detect the case in which multiple <py-config> are listed

Ideally I would like it to be a fatal error, but it's too hard to do it with the current state of the code, will refactor it later (#826)

pyscriptjs/src/main.ts

@@ -8,7 +8,7 @@ import { PyLoader } from './components/pyloader';
 import { PyodideRuntime } from './pyodide';
 import { getLogger } from './logger';
 import { globalLoader, runtimeLoaded, addInitializer } from './stores';
-import { handleFetchError, globalExport } from './utils'
+import { handleFetchError, showError, globalExport } from './utils'
 
 const logger = getLogger('pyscript/main');
 
@@ -45,7 +45,18 @@ class PyScriptApp {
         // XXX: we should actively complain if there are multiple <py-config>
         // and show a big error. PRs welcome :)
         logger.info('searching for <py-config>');
-        const el = document.querySelector('py-config');
+        const elements = document.getElementsByTagName('py-config');
+        let el = null;
+        if (elements.length > 0)
+            el = elements[0];
+        if (elements.length >= 2) {
+            // XXX: ideally, I would like to have a way to raise "fatal
+            // errors" and stop the computation, but currently our life cycle
+            // is too messy to implement it reliably. We might want to revisit
+            // this once it's in a better shape.
+            showError("Multiple &lt;py-config&gt; tags detected. Only the first is " +
+                      "going to be parsed, all the others will be ignored");
+        }
         this.config = loadConfigFromElement(el);
         logger.info('config loaded:\n' + JSON.stringify(this.config, null, 2));
     }

pyscriptjs/src/utils.ts

@@ -54,6 +54,8 @@ function guidGenerator(): string {
  */
 function showError(msg: string): void {
     const warning = document.createElement('div');
+    // XXX: the style should go to css instead of here probably
+    warning.className = "py-error";
     warning.style.backgroundColor = 'LightCoral';
     warning.style.alignContent = 'center';
     warning.style.margin = '4px';

pyscriptjs/tests/integration/test_py_config.py

@@ -131,3 +131,28 @@ class TestConfig(PyScriptTest):
             )
         msg = str(exc)
         assert "<ExceptionInfo JsError" in msg
+
+    def test_multiple_py_config(self):
+        self.pyscript_run(
+            """
+            <py-config>
+            name = "foobar"
+            </py-config>
+
+            <py-config>
+            this is ignored and won't even be parsed
+            </py-config>
+
+            <py-script>
+                import js
+                config = js.pyscript_get_config()
+                js.console.log("config name:", config.name)
+            </py-script>
+            """
+        )
+        div = self.page.wait_for_selector(".py-error")
+        expected = (
+            "Multiple <py-config> tags detected. Only the first "
+            "is going to be parsed, all the others will be ignored"
+        )
+        assert div.text_content() == expected