Cleanup pyscript web elements (#2094)

* change pydom example to use new pyscript.web namespace

* change tests to use new pyscript.web namespace

* create new pyscript.web package and move pydom to pyscript.web.dom

* add __init__ to pyscript.web and expose the dom instance instead of the pyscript.web.dom module

* move elements from pyweb.ui to pyscript.web and temp fix pydom import

* moved of elements file completed

* moved media from pyweb to pyscript.web

* RIP pyweb

* move JSProperty from pyscript.web.dom to pyscript.web.elements

* move element classes from pyscript.web.dom to pyscript.web.elements

* first round of fixes while running tests

* fix test typo

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* restore right type type returned for Element.parent. ALL TESTS PASS LOCALLY NOW

* lint

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* clean up dom.py from dead commented code and osbolete comments

* bugfix: dom shouldn't return None when it can't find any element for a specific selector so it now returns an empty collection

* additional cleanup in tests

* lint

* initial cleaning up of unused modules

* change element.append to not consider types anymore and add tests for appending elements.Element or a JsProxy object

* add Element.append tests for append JS elements directly and appending nodeList as well

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Tag and create the correct subclass of Element.

* Move: Element.snap -> video.snap

* Move: Element.download and draw to canvas.download and draw.

* Minor cleanups.

* Commenting.

* Allow css classes to be passed to Element constructor.

* Commenting.

* Typo fix.

* Make html, id and text JSProperties.

* Commenting.

* Remove unnecessary selected attribute on BaseElement.

* Extract: BaseElement.from_js -> element_from_js

* Pass *args and **kwargs to element_from_js and remove BaseElement.create

* Move value attribute to specific Element subclasses.

* fix: wrapping of existing js elements.

* Add body and head elements so parent and children work everywhere.

* Revert order of HasOptions mixin for the select element.

* Comment out tests that are no longer relevant (see comment).

* Use correct super args in mixin.

* Have to use element_from_js when returning options from OptionsProxy.

* rename: StyleProxy -> Style, OptionsProxy -> Options and added Classes.

* Remove cached_property.

* Remove list-y methods from Classes collection.

* Allow explicit children or *args for containers.

* controversial: fix tests to use find rather than dom

* Add html element so (say) body.parent does what is expected.

* Collapse Element class hierarchy.

* rename: js_element -> dom_element

* rename: element_from_js -> element_from_dom

* replace: JS with DOM

* rename: _js -> _dom_element

* fix dom tests.

* Complete element list with void elements derived from Element.

* Added attributes to the newly added Element subclasses.

* remove dom module, replace with instance.

Also, remove media :)

* fix: typo in test for 'b' element.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Remove dom and media modules.

* fix up ts definitions.

* Added missing import (used in content property).

* Added TODO :)

* wip: Add ClassesCollection

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Attempt to ask black to leave class list alone.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Add classes attribute to ElementCollection

* wip: work on classes collection

* Extract code to get set of all class names in ClassesCollection.

* Update elements.py

* Polishing.

* Make children return an ElementCollection

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* wip: Add the ability to set multiple properties.

* Add __getitem__ back to the dom object.

* Put validation when setting DOM properties back in.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* All tests green.

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Remove unnecessary comment.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Martin <martin.chilvers@gmail.com>

pyscript.core/tests/integration/test_pyweb.py

@@ -101,10 +101,11 @@ class TestElements(PyScriptTest):
         code_ = f"""
                 from pyscript import when
             <script type="{interpreter}">
-                from pyweb import pydom
-                from pyweb.ui.elements import {el_type}
+                from pyscript.web import dom
+                from pyscript.web.elements import {el_type}
+
                 el = {el_type}({attributes})
-                pydom.body.append(el)
+                dom.body.append(el)
             </script>
             """
         self.pyscript_run(code_)
@@ -178,7 +179,7 @@ class TestElements(PyScriptTest):
         )
 
     def test_b(self, interpreter):
-        self._create_el_and_basic_asserts("aside", "some text", interpreter)
+        self._create_el_and_basic_asserts("b", "some text", interpreter)
 
     def test_blockquote(self, interpreter):
         self._create_el_and_basic_asserts("blockquote", "some text", interpreter)
@@ -603,3 +604,207 @@ class TestElements(PyScriptTest):
             properties=properties,
             expected_errors=self.expected_missing_file_errors,
         )
+
+    def test_append_py_element(self, interpreter):
+        # Let's make sure the body of the page is clean first
+        body = self.page.locator("body")
+        assert body.inner_html() == ""
+
+        # Let's make sure the element is not in the page
+        element = self.page.locator("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript.web import dom
+                from pyscript.web.elements import div, p
+
+                el = div("{div_text_content}")
+                child = p('{p_text_content}')
+                el.append(child)
+                dom.body.append(el)
+            </script>
+            """
+        self.pyscript_run(code_)
+
+        # Let's keep the tag in 2 variables, one for the selector and another to
+        # check the return tag from the selector
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        assert el.text_content() == f"{div_text_content}{p_text_content}"
+
+        assert (
+            el.evaluate("node => node.children.length") == 1
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == f"{div_text_content}{p_text_content}"
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+    def test_append_proxy_element(self, interpreter):
+        # Let's make sure the body of the page is clean first
+        body = self.page.locator("body")
+        assert body.inner_html() == ""
+
+        # Let's make sure the element is not in the page
+        element = self.page.locator("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript import document
+                from pyscript.web import dom
+                from pyscript.web.elements import div, p
+
+                el = div("{div_text_content}")
+                child = document.createElement('P')
+                child.textContent = '{p_text_content}'
+                el.append(child)
+                dom.body.append(el)
+            </script>
+            """
+        self.pyscript_run(code_)
+
+        # Let's keep the tag in 2 variables, one for the selector and another to
+        # check the return tag from the selector
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        assert el.text_content() == f"{div_text_content}{p_text_content}"
+
+        assert (
+            el.evaluate("node => node.children.length") == 1
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == f"{div_text_content}{p_text_content}"
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+    def test_append_py_elementcollection(self, interpreter):
+        # Let's make sure the body of the page is clean first
+        body = self.page.locator("body")
+        assert body.inner_html() == ""
+
+        # Let's make sure the element is not in the page
+        element = self.page.locator("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        p2_text_content = "not me!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript.web import dom
+                from pyscript.web.elements import div, p, ElementCollection
+
+                el = div("{div_text_content}")
+                child1 = p('{p_text_content}')
+                child2 = p('{p2_text_content}', id='child2')
+                collection = ElementCollection([child1, child2])
+                el.append(collection)
+                dom.body.append(el)
+            </script>
+            """
+        self.pyscript_run(code_)
+
+        # Let's keep the tag in 2 variables, one for the selector and another to
+        # check the return tag from the selector
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        parent_full_content = f"{div_text_content}{p_text_content}{p2_text_content}"
+        assert el.text_content() == parent_full_content
+
+        assert (
+            el.evaluate("node => node.children.length") == 2
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+        assert el.evaluate("node => node.children[1].tagName") == "P"
+        assert el.evaluate("node => node.children[1].id") == "child2"
+        assert (
+            el.evaluate("node => node.children[1].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[1].textContent") == p2_text_content
+
+    def test_append_js_element_nodelist(self, interpreter):
+        # Let's make sure the body of the page is clean first
+        body = self.page.locator("body")
+        assert body.inner_html() == ""
+
+        # Let's make sure the element is not in the page
+        element = self.page.locator("div")
+        assert not element.count()
+
+        div_text_content = "Luke, I am your father"
+        p_text_content = "noooooooooo!"
+        p2_text_content = "not me!"
+        # Let's create the element
+        code_ = f"""
+            from pyscript import when
+            <script type="{interpreter}">
+                from pyscript import document
+                from pyscript.web import dom
+                from pyscript.web.elements import div, p, ElementCollection
+
+                el = div("{div_text_content}")
+                child1 = p('{p_text_content}')
+                child2 = p('{p2_text_content}', id='child2')
+
+                dom.body.append(child1)
+                dom.body.append(child2)
+
+                nodes = document.querySelectorAll('p')
+                el.append(nodes)
+
+                dom.body.append(el)
+            </script>
+            """
+        self.pyscript_run(code_)
+
+        # Let's keep the tag in 2 variables, one for the selector and another to
+        # check the return tag from the selector
+        el = self.page.locator("div")
+        tag = el.evaluate("node => node.tagName")
+        assert tag == "DIV"
+        parent_full_content = f"{div_text_content}{p_text_content}{p2_text_content}"
+        assert el.text_content() == parent_full_content
+
+        assert (
+            el.evaluate("node => node.children.length") == 2
+        ), "There should be only 1 child"
+        assert el.evaluate("node => node.children[0].tagName") == "P"
+        assert (
+            el.evaluate("node => node.children[0].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[0].textContent") == p_text_content
+
+        assert el.evaluate("node => node.children[1].tagName") == "P"
+        assert el.evaluate("node => node.children[1].id") == "child2"
+        assert (
+            el.evaluate("node => node.children[1].parentNode.textContent")
+            == parent_full_content
+        )
+        assert el.evaluate("node => node.children[1].textContent") == p2_text_content