xyflow · pcorpet · Jul 16, 2024
diff --git a/packages/react/src/components/ReactFlowProvider/index.tsx b/packages/react/src/components/ReactFlowProvider/index.tsx
@@ -7,10 +7,10 @@ import type { Node, Edge } from '../../types';
 import { NodeOrigin } from '@xyflow/system';
 
 export type ReactFlowProviderProps = {
-  initialNodes?: Node[];
-  initialEdges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
+  initialNodes?: readonly Node[];
+  initialEdges?: readonly Edge[];
+  defaultNodes?: readonly Node[];
+  defaultEdges?: readonly Edge[];
   initialWidth?: number;
   initialHeight?: number;
   fitView?: boolean;

diff --git a/packages/react/src/container/ReactFlow/Wrapper.tsx b/packages/react/src/container/ReactFlow/Wrapper.tsx
@@ -17,10 +17,10 @@ export function Wrapper({
   nodeOrigin,
 }: {
   children: ReactNode;
-  nodes?: Node[];
-  edges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
+  defaultNodes?: readonly Node[];
+  defaultEdges?: readonly Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;

diff --git a/packages/react/src/store/index.ts b/packages/react/src/store/index.ts
@@ -31,10 +31,10 @@ const createStore = ({
   fitView,
   nodeOrigin,
 }: {
-  nodes?: Node[];
-  edges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
+  defaultNodes?: readonly Node[];
+  defaultEdges?: readonly Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;
@@ -43,7 +43,7 @@ const createStore = ({
   createWithEqualityFn<ReactFlowState>(
     (set, get) => ({
       ...getInitialState({ nodes, edges, width, height, fitView, nodeOrigin, defaultNodes, defaultEdges }),
-      setNodes: (nodes: Node[]) => {
+      setNodes: (nodes: readonly Node[]) => {
         const { nodeLookup, parentLookup, nodeOrigin, elevateNodesOnSelect } = get();
         // setNodes() is called exclusively in response to user actions:
         // - either when the `<ReactFlow nodes>` prop is updated in the controlled ReactFlow setup,
@@ -55,14 +55,14 @@ const createStore = ({
 
         set({ nodes });
       },
-      setEdges: (edges: Edge[]) => {
+      setEdges: (edges: readonly Edge[]) => {
         const { connectionLookup, edgeLookup } = get();
 
         updateConnectionLookup(connectionLookup, edgeLookup, edges);
 
         set({ edges });
       },
-      setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => {
+      setDefaultNodesAndEdges: (nodes?: readonly Node[], edges?: readonly Edge[]) => {
         if (nodes) {
           const { setNodes } = get();
           setNodes(nodes);

diff --git a/packages/react/src/store/initialState.ts b/packages/react/src/store/initialState.ts
@@ -23,10 +23,10 @@ const getInitialState = ({
   fitView,
   nodeOrigin,
 }: {
-  nodes?: Node[];
-  edges?: Edge[];
-  defaultNodes?: Node[];
-  defaultEdges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
+  defaultNodes?: readonly Node[];
+  defaultEdges?: readonly Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;

diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
@@ -63,7 +63,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    *  }
    * ];
    */
-  nodes?: NodeType[];
+  nodes?: readonly NodeType[];
   /** An array of edges to render in a controlled flow.
    * @example
    * const edges = [
@@ -74,11 +74,11 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    *  }
    * ];
    */
-  edges?: EdgeType[];
+  edges?: readonly EdgeType[];
   /** The initial nodes to render in an uncontrolled flow. */
-  defaultNodes?: NodeType[];
+  defaultNodes?: readonly NodeType[];
   /** The initial edges to render in an uncontrolled flow. */
-  defaultEdges?: EdgeType[];
+  defaultEdges?: readonly EdgeType[];
   /** Defaults to be applied to all new edges that are added to the flow.
    *
    * Properties on a new edge will override these defaults if they exist.
@@ -180,7 +180,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
   onSelectionDragStop?: SelectionDragHandler<NodeType>;
   onSelectionStart?: (event: ReactMouseEvent) => void;
   onSelectionEnd?: (event: ReactMouseEvent) => void;
-  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: NodeType[]) => void;
+  onSelectionContextMenu?: (event: ReactMouseEvent, nodes: readonly NodeType[]) => void;
   /** When a connection line is completed and two nodes are connected by the user, this event fires with the new connection.
    *
    * You can use the addEdge utility to convert the connection to a complete edge.
@@ -353,7 +353,7 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
    * @example [0, 2] // allows panning with the left and right mouse buttons
    * [0, 1, 2, 3, 4] // allows panning with all mouse buttons
    */
-  panOnDrag?: boolean | number[];
+  panOnDrag?: boolean | readonly number[];
   /** Minimum zoom level
    * @default 0.5
    */

diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
@@ -52,13 +52,13 @@ export type EdgeTypes = Record<
 >;
 
 export type UnselectNodesAndEdgesParams = {
-  nodes?: Node[];
-  edges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
 };
 
 export type OnSelectionChangeParams = {
-  nodes: Node[];
-  edges: Edge[];
+  nodes: readonly Node[];
+  edges: readonly Edge[];
 };
 
 export type OnSelectionChangeFunc = (params: OnSelectionChangeParams) => void;

diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
@@ -52,10 +52,10 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
   width: number;
   height: number;
   transform: Transform;
-  nodes: NodeType[];
+  nodes: readonly NodeType[];
   nodeLookup: NodeLookup<InternalNode<NodeType>>;
   parentLookup: ParentLookup<InternalNode<NodeType>>;
-  edges: Edge[];
+  edges: readonly Edge[];
   edgeLookup: EdgeLookup<EdgeType>;
   connectionLookup: ConnectionLookup;
   onNodesChange: OnNodesChange<NodeType> | null;
@@ -149,9 +149,9 @@ export type ReactFlowStore<NodeType extends Node = Node, EdgeType extends Edge =
 };
 
 export type ReactFlowActions<NodeType extends Node, EdgeType extends Edge> = {
-  setNodes: (nodes: NodeType[]) => void;
-  setEdges: (edges: EdgeType[]) => void;
-  setDefaultNodesAndEdges: (nodes?: NodeType[], edges?: EdgeType[]) => void;
+  setNodes: (nodes: readonly NodeType[]) => void;
+  setEdges: (edges: readonly EdgeType[]) => void;
+  setDefaultNodesAndEdges: (nodes?: readonly NodeType[], edges?: readonly EdgeType[]) => void;
   updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;
   updateNodePositions: UpdateNodePositions;
   resetSelectedElements: () => void;

diff --git a/packages/react/src/utils/changes.ts b/packages/react/src/utils/changes.ts
@@ -14,7 +14,7 @@ import type { Node, Edge, InternalNode } from '../types';
 // This function applies changes to nodes or edges that are triggered by React Flow internally.
 // When you drag a node for example, React Flow will send a position change update.
 // This function then applies the changes and returns the updated elements.
-function applyChanges(changes: any[], elements: any[]): any[] {
+function applyChanges(changes: readonly any[], elements: readonly any[]): any[] {
   const updatedElements: any[] = [];
   // By storing a map of changes for each element, we can a quick lookup as we
   // iterate over the elements array!
@@ -139,7 +139,7 @@ function applyChange(change: any, element: any): any {
  */
 export function applyNodeChanges<NodeType extends Node = Node>(
   changes: NodeChange<NodeType>[],
-  nodes: NodeType[]
+  nodes: readonly NodeType[]
 ): NodeType[] {
   return applyChanges(changes, nodes) as NodeType[];
 }
@@ -165,8 +165,8 @@ export function applyNodeChanges<NodeType extends Node = Node>(
     );
  */
 export function applyEdgeChanges<EdgeType extends Edge = Edge>(
-  changes: EdgeChange<EdgeType>[],
-  edges: EdgeType[]
+  changes: readonly EdgeChange<EdgeType>[],
+  edges: readonly EdgeType[]
 ): EdgeType[] {
   return applyChanges(changes, edges) as EdgeType[];
 }

diff --git a/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte b/packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
@@ -12,8 +12,8 @@
 
   const dispatch = createEventDispatcher<
     NodeEventMap & {
-      selectioncontextmenu: { nodes: Node[]; event: MouseEvent | TouchEvent };
-      selectionclick: { nodes: Node[]; event: MouseEvent | TouchEvent };
+      selectioncontextmenu: { nodes: readonly Node[]; event: MouseEvent | TouchEvent };
+      selectionclick: { nodes: readonly Node[]; event: MouseEvent | TouchEvent };
     }
   >();
 

diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -60,7 +60,7 @@ export function useSvelteFlow(): {
    *
    * @returns nodes array
    */
-  getNodes: (ids?: string[]) => Node[];
+  getNodes: (ids?: readonly string[]) => readonly Node[];
   /**
    * Returns an edge by id.
    *
@@ -73,7 +73,7 @@ export function useSvelteFlow(): {
    *
    * @returns edges array
    */
-  getEdges: (ids?: string[]) => Edge[];
+  getEdges: (ids?: readonly string[]) => readonly Edge[];
   /**
    * Sets the current zoom level.
    *
@@ -509,10 +509,10 @@ export function useSvelteFlow(): {
     viewport
   };
 }
-function getElements(lookup: Map<string, InternalNode>, ids: string[]): Node[];
-function getElements(lookup: Map<string, Edge>, ids: string[]): Edge[];
+function getElements(lookup: Map<string, InternalNode>, ids: readonly string[]): Node[];
+function getElements(lookup: Map<string, Edge>, ids: readonly string[]): Edge[];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function getElements(lookup: Map<string, any>, ids: string[]): any[] {
+function getElements(lookup: Map<string, any>, ids: readonly string[]): any[] {
   const result = [];
 
   for (const id of ids) {

diff --git a/packages/svelte/src/lib/store/index.ts b/packages/svelte/src/lib/store/index.ts
@@ -39,8 +39,8 @@ export function createStore({
   fitView: fitViewOnCreate,
   nodeOrigin
 }: {
-  nodes?: Node[];
-  edges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;
@@ -237,7 +237,7 @@ export function createStore({
     }
   }
 
-  function resetSelectedElements(elements: Node[] | Edge[]) {
+  function resetSelectedElements(elements: readonly Node[] | readonly Edge[]) {
     let elementsChanged = false;
     elements.forEach((element) => {
       if (element.selected) {
@@ -252,7 +252,7 @@ export function createStore({
     get(store.panZoom)?.setClickDistance(distance);
   }
 
-  function unselectNodesAndEdges(params?: { nodes?: Node[]; edges?: Edge[] }) {
+  function unselectNodesAndEdges(params?: { nodes?: readonly Node[]; edges?: readonly Edge[] }) {
     const resetNodes = resetSelectedElements(params?.nodes || get(store.nodes));
     if (resetNodes) store.nodes.set(get(store.nodes));
 

diff --git a/packages/svelte/src/lib/store/initial-store.ts b/packages/svelte/src/lib/store/initial-store.ts
@@ -77,8 +77,8 @@ export const getInitialStore = ({
   fitView,
   nodeOrigin
 }: {
-  nodes?: Node[];
-  edges?: Edge[];
+  nodes?: readonly Node[];
+  edges?: readonly Edge[];
   width?: number;
   height?: number;
   fitView?: boolean;

diff --git a/packages/svelte/src/lib/store/types.ts b/packages/svelte/src/lib/store/types.ts
@@ -14,8 +14,8 @@ import type { getInitialStore } from './initial-store';
 import type { Node, Edge, NodeTypes, EdgeTypes, FitViewOptions } from '$lib/types';
 
 export type SvelteFlowStoreActions = {
-  syncNodeStores: (nodesStore: Writable<Node[]>) => void;
-  syncEdgeStores: (edgeStore: Writable<Edge[]>) => void;
+  syncNodeStores: (nodesStore: Writable<readonly Node[]>) => void;
+  syncEdgeStores: (edgeStore: Writable<readonly Edge[]>) => void;
   syncViewport: (viewportStore?: Writable<Viewport>) => void;
   setNodeTypes: (nodeTypes: NodeTypes) => void;
   setEdgeTypes: (edgeTypes: EdgeTypes) => void;
@@ -29,7 +29,7 @@ export type SvelteFlowStoreActions = {
   fitView: (options?: FitViewOptions) => Promise<boolean>;
   updateNodePositions: UpdateNodePositions;
   updateNodeInternals: (updates: Map<string, InternalNodeUpdate>) => void;
-  unselectNodesAndEdges: (params?: { nodes?: Node[]; edges?: Edge[] }) => void;
+  unselectNodesAndEdges: (params?: { nodes?: readonly Node[]; edges?: readonly Edge[] }) => void;
   addSelectedNodes: (ids: string[]) => void;
   addSelectedEdges: (ids: string[]) => void;
   handleNodeSelection: (id: string) => void;