Add stats.js for the preview panel when ?debug is on

ui/index.html

@@ -38,7 +38,8 @@
         "imports": {
           "preact": "https://unpkg.com/preact/dist/preact.module.js",
           "preact/debug": "https://unpkg.com/preact/debug/dist/debug.module.js",
-          "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js"
+          "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js",
+          "stats.js": "https://unpkg.com/stats.js@0.17.0/src/Stats.js"
         }
       }
     </script>

ui/index.js

@@ -8,10 +8,9 @@ import { Widget } from './widget.js';
 /** @typedef {import('../libapi.mjs').Config} Config */
 /** @typedef {import('./ops').Connection} Connection */
 
-let isDebug = new URLSearchParams(location.search).has('debug');
+export const isDebug = new URLSearchParams(location.search).has('debug');
 
 if (isDebug) {
-  // @ts-ignore
   await import('preact/debug');
 }
 

ui/preview.js

@@ -1,11 +1,20 @@
 import { h, Component, createRef } from 'preact';
 
+export const isDebug = new URLSearchParams(location.search).has('debug');
+
+const Stats = isDebug
+  ? await import('stats.js').then(
+      res => /** @type {typeof import('stats.js')} */ (res['default'])
+    )
+  : null;
+
 /** @extends Component<{ getPreview: () => Promise<Blob> }, null> */
 export class Preview extends Component {
   canvasHolderRef = createRef();
   canvasRef = createRef();
   /** @type {ResizeObserver} */
   resizeObserver;
+  stats = isDebug ? new Stats() : null;
 
   render() {
     return h(
@@ -19,6 +28,10 @@ export class Preview extends Component {
     let canvas = /** @type {HTMLCanvasElement} */ (this.canvasRef.current);
     let canvasHolder = this.canvasHolderRef.current;
 
+    if (isDebug) {
+      canvasHolder.appendChild(this.stats.dom);
+    }
+
     let canvasCtx = canvas.getContext('bitmaprenderer');
 
     let ratio = 0;
@@ -70,6 +83,7 @@ export class Preview extends Component {
           updateCanvasSize();
         }
         canvasCtx.transferFromImageBitmap(img);
+        this.stats?.update();
       } catch (e) {
         console.warn(e);
       }
@@ -79,5 +93,8 @@ export class Preview extends Component {
 
   componentWillUnmount() {
     this.resizeObserver.disconnect();
+    if (isDebug) {
+      this.canvasHolderRef.current.removeChild(this.stats.dom);
+    }
   }
 }