Add an id if the user forgot when using py-attribute (#1122)

docs/changelog.md

@@ -16,6 +16,10 @@ Bug fixes
 - Fixed missing closing tag when rendering an image with `display`. ([#1058](https://github.com/pyscript/pyscript/pull/1058))
 - Fixed a bug where Python plugins methods were being executed twice. ([#1064](https://github.com/pyscript/pyscript/pull/1064))
 
+Enhancements
+------------
+- When adding a `py-` attribute to an element but didn't added an `id` attribute, PyScript will now generate a random ID for the element instead of throwing an error which caused the splash screen to not shutdown. ([#1122](https://github.com/pyscript/pyscript/pull/1122))
+
 Documentation
 -------------
 

pyscriptjs/src/components/pyscript.ts

@@ -156,10 +156,9 @@ export function initHandlers(interpreter: Interpreter) {
 function createElementsWithEventListeners(interpreter: Interpreter, pyAttribute: string) {
     const matches: NodeListOf<HTMLElement> = document.querySelectorAll(`[${pyAttribute}]`);
     for (const el of matches) {
+        // If the element doesn't have an id, let's add one automatically!
         if (el.id.length === 0) {
-            throw new TypeError(
+            ensureUniqueId(el);
-                `<${el.tagName.toLowerCase()}> must have an id attribute, when using the ${pyAttribute} attribute`,
-            );
         }
         const handlerCode = el.getAttribute(pyAttribute);
         const event = pyAttributeToEvent.get(pyAttribute);

pyscriptjs/tests/integration/test_01_basic.py

@@ -305,3 +305,18 @@ class TestBasic(PyScriptTest):
             "'py-keydown=\"myFunction()\"' instead."
         )
         assert banner.inner_text() == expected_message
+
+    def test_py_attribute_without_id(self):
+        self.pyscript_run(
+            """
+            <button py-click="myfunc()">Click me</button>
+            <py-script>
+                def myfunc():
+                    print("hello world!")
+            </py-script>
+            """
+        )
+        btn = self.page.wait_for_selector("button")
+        btn.click()
+        assert self.console.log.lines[-1] == "hello world!"
+        assert self.console.error.lines == []