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

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(
-                `<${el.tagName.toLowerCase()}> must have an id attribute, when using the ${pyAttribute} attribute`,
-            );
+            ensureUniqueId(el);
         }
         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 == []