@xyflow/svelte/dist/lib/actions/portal/portal.svelte.js

Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.

import { useStore } from '../../store';
function tryToMount(node, domNode, target) {
    if (!target || !domNode) {
        return;
    }
    const targetEl = target === 'root' ? domNode : domNode.querySelector(`.svelte-flow__${target}`);
    if (targetEl) {
        targetEl.appendChild(node);
    }
}
export function portal(node, target) {
    const { domNode } = $derived(useStore());
    let destroyEffect;
    // svelte-ignore state_referenced_locally
    if (domNode) {
        // if the domNode is already mounted, we can directly try to mount the node
        tryToMount(node, domNode, target);
    }
    else {
        // if the domNode is not mounted yet, we need to wait for it to be ready
        destroyEffect = $effect.root(() => {
            $effect(() => {
                tryToMount(node, domNode, target);
                destroyEffect?.();
            });
        });
    }
    return {
        async update(target) {
            tryToMount(node, domNode, target);
        },
        destroy() {
            if (node.parentNode) {
                node.parentNode.removeChild(node);
            }
            destroyEffect?.();
        }
    };
}