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

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);
+    }
   }
 }