« 🚨 DOM-to-WebWorker-to-DOM Event Bridge

Revolutionary data flow architecture bridging DOM events to WebWorker computations:

Event Chain:

DOM input → handleInput() → worker.postMessage() →
  WebWorker computation → worker.onmessage →
    this.dispatch('worker-result')
      → displayResult()

Key Innovation: Seamless DOM-to-WebWorker-to-DOM event bridging through YpsilonEventHandler's custom event system. Heavy computations never block the UI.

Note: Runs directly on file:// protocol like all YpsilonEventHandler examples - just download and open in browser! (Requires internet for CDN library access)

Type in the input to trigger heavy computation in WebWorker:

Compute

💡 Ready! Type in the input above to see DOM-to-WebWorker event bridging in action.

What has this to do with Ypsilon?

In this example, we use YpsilonEventHandler as Subscriber System to subscribe and dispatch Events.

YpsilonEventHandler provides 2 ways to subscribe:

// Subcribe immediately via document selector in the constructor
constructor() {
    super({
        document: [
            { type: 'worker-result', handler: 'onEventUseMethod' }
        ]
    });
}

// Or like in this example, on the fly using this.addEvent
// It will listen immediately after adding
this.addEvent('document', { type: 'worker-result', handler: 'displayResult' });