YEH - DOM-to-WebWorker Event Bridge

HTML

<h1>DOM-to-WebWorker Event Bridge</h1>
<p>Type in the input to trigger heavy computation in WebWorker:</p>
<input type="text" name="test-placeholder" placeholder="Type anything...">
<span id="is-working"></span>
<div id="output"></div>
<p><a href="https://yaijs.github.io/yai/docs/yeh/">YEH on Github</a></p>

<script type="module">
import { YEH } from 'https://cdn.jsdelivr.net/npm/@yaijs/core@1.1.6/yeh/yeh.min.js';

/**
 * Bridge DOM events to WebWorkers via custom events
 */
class WebWorkerBridge extends YEH {
  constructor() {
    super({ body: [{ type: 'input', handler: 'handleInput' }] });
    this.pendingRequests = 0;

    // Create worker using Blob URL (CSP-safe)
    const blob = new Blob(
      [
        `
            self.onmessage = function(e) {
                // Actually heavy: find primes up to 2 million
                const start = performance.now();
                const primes = [];
                for (let i = 2; i <= 2000000; i++) {
                    let isPrime = true;
                    for (let j = 2; j <= Math.sqrt(i); j++) {
                        if (i % j === 0) { isPrime = false; break; }
                    }
                    if (isPrime) primes.push(i);
                }
                const end = performance.now();

                self.postMessage({
                    type: 'computation-done',
                    result: {
                        primeCount: primes.length,
                        largestPrime: primes[primes.length - 1],
                        duration: (end - start).toFixed(2)
                    },
                    input: e.data
                });
            };
        `,
      ],
      { type: 'application/javascript' },
    );

    this.workerUrl = URL.createObjectURL(blob);
    this.worker = new Worker(this.workerUrl);

    this.worker.onmessage = (e) => {
      this.dispatch('worker-result', e.data);
    };
  }

  handleInput(event,...