Document how to use `BuiltInEdge` type, so that `pathOptions` works properly

[bcakmakoglu]

Describe the Bug

In v11 the typing for the Edge type allows pathOptions for the default edge-types (bezier, step and smoothstep) while in v12 pathOptions is not recognized anymore and will cause TypeScript to report an error for it even though the options are still taken and passed to the edge component.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Set up a basic v12 example and use sth like this

const initialEdges: Edge[] = [
  // Error: Object literal may only specify known properties, and pathOptions does not exist in type Edge
  { id: 'e1-2', type: 'smoothstep', pathOptions: { borderRadius: 100 }, source: '1', target: '2', animated: true },
];

Expected behavior

pathOptions should be a valid property on the default edge types previously mentioned.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[hedefalk]

We have the same issue, need it for curvature setting and don't want to mess with ts-ignores. Working around with:

import { Edge as XYFlowEdge } from "@xyflow/react";
type Edge = XYFlowEdge & { pathOptions?: { curvature: number } };

[peterkogo]

We have added a type called BuiltInEdge to make usage of built in edge types more specific and to have an opt-out mechanism (in a real world application you will probably only use custom nodes).
If you type your edges array correctly it should work.

const edges: BuiltInEdge[] = [...]          // if you just use built in edges
const edges: (BuiltInEdge | Edge)[] = [...] // if you use built in and custom edges

We have revamped our Typescript section for v12, where all of this is explained in detail. Will post it here once it's released.

[chrtze]

This has been documented here.