renderer.ts

import { Eimer, EimerBrowserTransport } from 'eimer';
import { ConsoleLoggingTracerBackend, EimerPublishingTracerBackend, EimerTracer, EimerTraceSubscriber } from 'eimer/tracing';

// Create eimer node and connect to "preload" via BrowserTransport
const tracer = new EimerTracer();
const eimer = new Eimer('renderer', {}, { tracer: tracer });
tracer.setBackend(new EimerPublishingTracerBackend(eimer));
eimer.connect(new EimerBrowserTransport(window));

const traceSubscriber = new EimerTraceSubscriber(eimer, new ConsoleLoggingTracerBackend());

// Initialize UI and set up event handlers

// counter value
const counterElement = document.getElementById('counter') as HTMLDivElement;
if (counterElement) {
    eimer.callRpc<number>('counter.get').then((value: number) => { counterElement.textContent = value.toString() });
    eimer.subscribe('counter.change', (value: any) => {
        counterElement.textContent = value.toString();
    });
}

// "+" Button
const incrementButton = document.getElementById('increment') as HTMLButtonElement;
if (incrementButton) {
    incrementButton.addEventListener('click', async () => {
        try {
            const trace = tracer.startSpan('counter.increment');
            await eimer.callRpc('counter.increment', {}, 30_000, { trace, collectEimerTraces: true });
            tracer.endSpan(trace.spanId);
        } catch (error) {
            console.error('Failed to increment counter:', error);
        }
    });
}

// "-" Button
const decrementButton = document.getElementById('decrement') as HTMLButtonElement;
if (decrementButton) {
    decrementButton.addEventListener('click', async () => {
        try {
            const trace = tracer.startSpan('counter.decrement');
            await eimer.callRpc('counter.decrement', {}, 30_000, { trace });
            tracer.endSpan(trace.spanId);
        } catch (error) {
            console.error('Failed to decrement counter:', error);
        }
    });
}