Improve JS logging (#743)

This PR tries to improve and rationalize what we log. Key points:
- introduce `logger.ts`: each file/component is encouraged to use the logger instead of writing directly to `console.*`
    * the logger automatically prepend a prefix like `[py-config]`, `[py-env]` which make it easier to understand where a certain message is printed from
    * it provide a central place where to add more features in the future. E.g., I can imagine having a config setting to completely silence the logs (not implemented yet)
- use the new loggers everywhere
- write to `.info()` instead of `.log()`. The idea is to keep `console.log` free, so that for the users it's easier to tell apart their own messages and the pyscript ones
- generally improve what we log. This is an endless exercise, but I tried to print more things which are useful to understand what's going on and in which order the various things are executed, and remove prints which were clearly debugging leftovers

pyscriptjs/src/components/pyscript.ts

@@ -10,6 +10,9 @@ import {
 import { addClasses, htmlDecode } from '../utils';
 import { BaseEvalElement } from './base';
 import type { Runtime } from '../runtime';
+import { getLogger } from '../logger';
+
+const logger = getLogger('py-script');
 
 // Premise used to connect to the first available runtime (can be pyodide or others)
 let runtime: Runtime;
@@ -72,8 +75,6 @@ export class PyScript extends BaseEvalElement {
         this.appendChild(mainDiv);
         addToScriptsQueue(this);
 
-        console.log('connected');
-
         if (this.hasAttribute('src')) {
             this.source = this.getAttribute('src');
         }
@@ -100,7 +101,7 @@ export class PyScript extends BaseEvalElement {
                     // "can't read 'name' of undefined" at import time
                     exports = { ...(await import(url)) };
                 } catch {
-                    console.warn(`failed to fetch '${url}' for '${name}'`);
+                    logger.warn(`failed to fetch '${url}' for '${name}'`);
                     continue;
                 }
 
@@ -209,9 +210,9 @@ const pyAttributeToEvent: Map<string, string> = new Map<string, string>([
         ["py-toggle", "toggle"],
         ]);
 
-/** Initialize all elements with py-on* handlers attributes  */
+/** Initialize all elements with py-* handlers attributes  */
 async function initHandlers() {
-    console.log('Collecting nodes...');
+    logger.debug('Initializing py-* event handlers...');
     for (const pyAttribute of pyAttributeToEvent.keys()) {
         await createElementsWithEventListeners(runtime, pyAttribute);
     }
@@ -251,8 +252,8 @@ async function createElementsWithEventListeners(runtime: Runtime, pyAttribute: s
 
 /** Mount all elements with attribute py-mount into the Python namespace */
 async function mountElements() {
-    console.log('Collecting nodes to be mounted into python namespace...');
     const matches: NodeListOf<HTMLElement> = document.querySelectorAll('[py-mount]');
+    logger.info(`py-mount: found ${matches.length} elements`);
 
     let source = '';
     for (const el of matches) {