xyflow / xyflow

React Flow | Svelte Flow - Powerful open source libraries for building node-based UIs with React (https://reactflow.dev) or Svelte (https://svelteflow.dev). Ready out-of-the-box and infinitely customizable.
https://xyflow.com
MIT License
21.54k stars 1.43k forks source link

Svelte: some `SvelteFlow` component events not strongly typed #4211

Closed cpsoinos closed 1 week ago

cpsoinos commented 3 weeks ago

Describe the Bug

Some events on SvelteFlow are strongly typed, while others are not. For example, "edgeclick" is strongly typed, while "nodedragstop" is not:

"edgeclick" "nodedragstop"
image image

Digging down into the types shipped with the package in node_modules/@xyflow/svelte/dist/lib/container/SvelteFlow/SvelteFlow.svelte.d.ts, you can see why:

/// <reference types=".pnpm/svelte@4.2.1/node_modules/svelte" />
import { SvelteComponentTyped } from "svelte";
import type { SvelteFlowProps } from './types';
declare const __propDef: {
    props: SvelteFlowProps;
    events: {
        dragover: DragEvent;
        drop: DragEvent;
        paneclick: CustomEvent<{
            event: MouseEvent | TouchEvent;
        }>;
        panecontextmenu: CustomEvent<{
            event: MouseEvent;
        }>;
        edgeclick: CustomEvent<{
            edge: import("../..").Edge;
            event: MouseEvent | TouchEvent;
        }>;
        edgecontextmenu: CustomEvent<{
            edge: import("../..").Edge;
            event: MouseEvent;
        }>;
        nodeclick: CustomEvent<any>;
        nodemouseenter: CustomEvent<any>;
        nodemousemove: CustomEvent<any>;
        nodemouseleave: CustomEvent<any>;
        nodedragstart: CustomEvent<any>;
        nodedrag: CustomEvent<any>;
        nodedragstop: CustomEvent<any>;
        nodecontextmenu: CustomEvent<any>;
        selectionclick: CustomEvent<{
            nodes: import("../..").Node[];
            event: MouseEvent | TouchEvent;
        }>;
        selectioncontextmenu: CustomEvent<{
            nodes: import("../..").Node[];
            event: MouseEvent | TouchEvent;
        }>;
    } & {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        connectionLine: {
            slot: string;
        };
        default: {};
    };
};
type SvelteFlowProps_ = typeof __propDef.props;
export { SvelteFlowProps_ as SvelteFlowProps };
export type SvelteFlowEvents = typeof __propDef.events;
export type SvelteFlowSlots = typeof __propDef.slots;
export default class SvelteFlow extends SvelteComponentTyped<SvelteFlowProps_, SvelteFlowEvents, SvelteFlowSlots> {
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Attempt to get proper types for the "nodedragstop" event using ComponentEvents<SvelteFlow>["nodedragstop"]. You'll get (property) nodedragstop: CustomEvent<any>

Expected behavior

As a developer, I expected to be able to get strongly typed events for all events emitted by SvelteFlow by using Svelte's ComponentEvents<SvelteFlow> utility.

Screenshots or Videos

No response

Platform

Additional context

No response

RedPhoenixQ commented 3 weeks ago

Fixed in #4195

moklick commented 1 week ago

fixed in 0.1.0 - thanks @RedPhoenixQ