@selenite/graph-editor/dist/graph-editor/render/svelte/renderer.svelte.js

A graph editor for visual programming, based on rete and svelte.

import { mount, unmount } from 'svelte';
import Root from './Root.svelte';
import { isEqual } from 'lodash-es';
import { Node } from '../../nodes';
export function getSvelteRenderer() {
    const instances = new Map();
    const appProps = new Map();
    return {
        get(element) {
            return instances.get(element);
        },
        mount(element, Component, payload, onRendered) {
            const props = $state({ component: Component, props: payload || {}, onRendered });
            const app = mount(Root, { target: element, props });
            appProps.set(app, props);
            instances.set(element, app);
            return app;
        },
        update(app, payload) {
            const props = appProps.get(app);
            if (!props) {
                console.error('App props not found');
                console.log(app, payload);
                return;
            }
            if (!props.props || !payload) {
                return;
            }
            for (const [k, v] of Object.entries(payload)) {
                props.props[k] = v;
            }
        },
        unmount(element) {
            const app = instances.get(element);
            if (app) {
                unmount(app);
                instances.delete(element);
            }
        }
    };
}