fix(core): publish events on first render

[etowahadams]

Fix #1020
Toward #

Change List

• Compile a blank spec in the initial render so that the Gosling ref can get associated with the DOM.

This enables subscription events to work properly.

Screen.Recording.2023-12-23.at.2.11.00.PM.mov

Checklist

• Ensure the PR works with all demos on the online editor
• Unit tests added or updated
• Examples added or updated
• Documentation updated (e.g., added API functions)
• Screenshots for visual changes (e.g., new encoding support or UI change on Editor)

[etowahadams]

Here is what I used to test the subscription events (basically the example that Thomas provided, thanks Thomas!)

import React, { useEffect, useRef, useState } from 'react';
import { GoslingComponent, type GoslingRef, type GoslingSpec } from 'gosling.js';

const goslingSpec = {
    title: 'Basic Marks: bar',
    subtitle: 'Tutorial Examples',
    tracks: [
        {
            layout: 'linear',
            width: 800,
            height: 180,
            data: {
                url: 'https://resgen.io/api/v1/tileset_info/?d=UvVPeLHuRDiYA3qwFlm7xQ',
                type: 'multivec',
                row: 'sample',
                column: 'position',
                value: 'peak',
                categories: ['sample 1'],
                binSize: 5
            },
            mark: 'bar',
            x: { field: 'start', type: 'genomic', axis: 'bottom' },
            xe: { field: 'end', type: 'genomic' },
            y: { field: 'peak', type: 'quantitative', axis: 'right' },
            size: { value: 5 }
        }
    ]
} as GoslingSpec;

function App() {
    const gosRef = useRef<GoslingRef>(null);

    useEffect(() => {
        if (gosRef.current) {
            const currentRef = gosRef.current;
            // specProcessed
            currentRef.api.subscribe('onNewView', (_, data) => {
                console.warn('onNewView', data);
            });
            currentRef.api.subscribe('onNewTrack', (_, data) => {
                console.warn('onNewTrack', data);
            });
            currentRef.api.subscribe('specProcessed', (_, data) => {
                console.warn('specProcessed', data);
            });
        }

    }, [gosRef.current]);

    return (
        <div>
            <GoslingComponent ref={gosRef} spec={goslingSpec} />
        </div>
    );
}

export default App;

[sehilyi]

Ah, I see how this is fixed – Great!