test(props): add tests for basic props

2022-08-23 18:10:12 +02:00
parent ecf0476939
commit 43ec2b5552
19 changed files with 1262 additions and 131 deletions
--- a/examples/nextjs/cypress/components/hooks/useEdges.cy.tsx
+++ b/examples/nextjs/cypress/components/hooks/useEdges.cy.tsx
@@ -0,0 +1,42 @@
+import { useEffect } from 'react';
+import { ReactFlow, Edge, useEdges } from '@react-flow/bundle';
+
+import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';
+
+describe('useEdges.cy.tsx', () => {
+  it('handles edges', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow nodes={initialNodes} edges={initialEdges}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', initialEdges);
+  });
+
+  it('handles defaultEdges', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={initialNodes} defaultEdges={initialEdges}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', initialEdges);
+  });
+});
+
+const HookHelperComponent = ({ onChange }: { onChange: (edges: Edge[]) => void }) => {
+  const edges = useEdges();
+
+  useEffect(() => {
+    onChange(edges);
+  }, [edges]);
+
+  return null;
+};
--- a/examples/nextjs/cypress/components/hooks/useNodes.cy.tsx
+++ b/examples/nextjs/cypress/components/hooks/useNodes.cy.tsx
@@ -0,0 +1,58 @@
+import { useEffect } from 'react';
+import { Node, ReactFlow, useNodes } from '@react-flow/bundle';
+
+import { nodes } from '../../fixtures/simpleflow';
+
+const nodeDimensions = {
+  width: 100,
+  height: 50,
+};
+
+const initialNodes: Node[] = nodes.map((n) => ({
+  ...n,
+  style: nodeDimensions,
+}));
+
+const expectedNodes: Node[] = initialNodes.map((n) => ({
+  ...n,
+  positionAbsolute: n.position,
+  ...nodeDimensions,
+}));
+
+describe('useNodes.cy.tsx', () => {
+  it('handles nodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow nodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+
+  it('handles defaultNodes', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultNodes={initialNodes}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', []);
+    cy.get('@onChangeSpy').should('have.been.calledWith', expectedNodes);
+  });
+});
+
+const HookHelperComponent = ({ onChange }: { onChange: (nodes: Node[]) => void }) => {
+  const nodes = useNodes();
+
+  useEffect(() => {
+    onChange(nodes);
+  }, [nodes]);
+
+  return null;
+};
--- a/examples/nextjs/cypress/components/hooks/useOnViewportChange.cy.tsx
+++ b/examples/nextjs/cypress/components/hooks/useOnViewportChange.cy.tsx
@@ -0,0 +1,96 @@
+import { ReactFlow, useOnViewportChange, Viewport } from '@react-flow/bundle';
+
+describe('useOnViewportChange.cy.tsx', () => {
+  it('listen to viewport drag', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.dragPane({ from: { x: 50, y: 50 }, to: { x: 50, y: 100 } }).then(() => {
+      cy.get('@onStartSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+      cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 50, zoom: 1 });
+      cy.get('@onEndSpy').should('have.been.calledWith', { x: 0, y: 50, zoom: 1 });
+    });
+  });
+
+  it('handles zoom in', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(-200).then(() => {
+      cy.get('@onStartSpy').should('have.been.callCount', 1);
+      cy.get('@onChangeSpy').should('have.been.callCount', 1);
+      cy.get('@onEndSpy').should('have.been.callCount', 1);
+
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.gt(1);
+    });
+  });
+
+  it('handles zoom out', () => {
+    const onStartSpy = cy.spy().as('onStartSpy');
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+    const onEndSpy = cy.spy().as('onEndSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onStart={onStartSpy} onChange={onChangeSpy} onEnd={onEndSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(200).then(() => {
+      cy.get('@onStartSpy').should('have.been.callCount', 1);
+      cy.get('@onChangeSpy').should('have.been.callCount', 1);
+      cy.get('@onEndSpy').should('have.been.callCount', 1);
+
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.lt(1);
+    });
+  });
+
+  it('handles default viewport', () => {
+    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
+    const onStartSpy = cy.spy().as('onStartSpy');
+
+    cy.mount(
+      <ReactFlow defaultViewport={defaultViewport}>
+        <HookHelperComponent onStart={onStartSpy} />
+      </ReactFlow>
+    );
+
+    cy.dragPane({ from: { x: 50, y: 50 }, to: { x: 50, y: 100 } }).then(() => {
+      cy.get('@onStartSpy').should('have.been.calledWith', defaultViewport);
+    });
+  });
+});
+
+// test specific helpers
+
+function HookHelperComponent({
+  onStart,
+  onChange,
+  onEnd,
+}: {
+  onStart?: (viewport: Viewport) => void;
+  onChange?: (viewport: Viewport) => void;
+  onEnd?: (viewport: Viewport) => void;
+}) {
+  useOnViewportChange({ onStart, onChange, onEnd });
+
+  return null;
+}
+
+function getLatestViewport(onChangeSpy: any) {
+  return onChangeSpy.lastCall.args[0] as unknown as Viewport;
+}
--- a/examples/nextjs/cypress/components/hooks/useViewport.cy.tsx
+++ b/examples/nextjs/cypress/components/hooks/useViewport.cy.tsx
@@ -0,0 +1,79 @@
+import { ReactFlow, useViewport, Viewport } from '@react-flow/bundle';
+
+describe('useViewport.cy.tsx', () => {
+  it('handles drag', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+
+    cy.dragPane({ from: { x: 50, y: 0 }, to: { x: 50, y: 400 } }).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      cy.get('@onChangeSpy').should('have.been.calledWith', { x: 0, y: 0, zoom: 1 });
+
+      expect(getLatestViewport(onChangeSpy)).to.eql({ x: 0, y: 400, zoom: 1 });
+    });
+  });
+
+  it('handles zoom in', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(-200).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.gt(1);
+    });
+  });
+
+  it('handles zoom out', () => {
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.zoomPane(200).then(() => {
+      cy.get('@onChangeSpy').should('have.been.callCount', 2);
+      expect(getLatestViewport(onChangeSpy).zoom).to.be.lt(1);
+    });
+  });
+
+  it('handles default viewport', () => {
+    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
+    const onChangeSpy = cy.spy().as('onChangeSpy');
+
+    cy.mount(
+      <ReactFlow defaultViewport={defaultViewport}>
+        <HookHelperComponent onChange={onChangeSpy} />
+      </ReactFlow>
+    );
+
+    cy.get('@onChangeSpy').should('have.been.calledWith', defaultViewport);
+  });
+});
+
+// test specific helpers
+
+function HookHelperComponent({ onChange }: { onChange: (vp: Viewport) => void }) {
+  const viewport = useViewport();
+
+  onChange(viewport);
+
+  return null;
+}
+
+function getLatestViewport(onChangeSpy: any) {
+  return onChangeSpy.lastCall.args[0] as unknown as Viewport;
+}
--- a/examples/nextjs/cypress/components/reactflow/basic-props.cy.tsx
+++ b/examples/nextjs/cypress/components/reactflow/basic-props.cy.tsx
@@ -0,0 +1,255 @@
+import { useCallback, useState } from 'react';
+import {
+  ReactFlow,
+  Node,
+  Edge,
+  NodeChange,
+  EdgeChange,
+  applyNodeChanges,
+  applyEdgeChanges,
+  Connection,
+  addEdge,
+  ReactFlowProps,
+  EdgeProps,
+} from '@react-flow/bundle';
+
+import * as simpleflow from '../../fixtures/simpleflow';
+
+describe('<ReactFlow />: Basic Props', () => {
+  describe('uses defaultNodes and defaultEdges', () => {
+    beforeEach(() => {
+      cy.mount(<ReactFlow defaultNodes={simpleflow.nodes} defaultEdges={simpleflow.edges} />);
+    });
+
+    it('mounts nodes and edges', () => {
+      cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
+    });
+
+    it('drags a node', () => {
+      const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+
+      cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
+        const styleAfterDrag = $el.css('transform');
+        expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+      });
+    });
+  });
+
+  describe('uses nodes and edges', () => {
+    beforeEach(() => {
+      cy.mount(<Comp initialNodes={simpleflow.nodes} initialEdges={simpleflow.edges} />);
+    });
+
+    it('mounts nodes and edges', () => {
+      cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
+    });
+
+    it('can not drag a node', () => {
+      const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+
+      cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
+        const styleAfterDrag = $el.css('transform');
+        expect(styleBeforeDrag).to.equal(styleAfterDrag);
+      });
+    });
+  });
+
+  describe('uses onNodesChange handler', () => {
+    beforeEach(() => {
+      cy.mount(<Comp addOnNodeChangeHandler initialNodes={simpleflow.nodes} />);
+    });
+
+    it('mounts nodes', () => {
+      cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow__edge').should('have.length', 0);
+    });
+
+    it('drags a node', () => {
+      const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+
+      cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
+        const styleAfterDrag = $el.css('transform');
+        expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+      });
+    });
+
+    it('can not connect nodes', () => {
+      cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
+
+      cy.get('.react-flow__node')
+        .last()
+        .find('.react-flow__handle.target')
+        .trigger('mousemove')
+        .trigger('mouseup', { force: true });
+
+      cy.get('.react-flow__edge').should('have.length', 0);
+    });
+  });
+
+  describe('uses onEdgeChange handler', () => {
+    beforeEach(() => {
+      cy.mount(<Comp addOnEdgeChangeHandler initialNodes={simpleflow.nodes} initialEdges={simpleflow.edges} />);
+    });
+
+    it('mounts nodes and edges', () => {
+      cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow__edge').should('have.length', simpleflow.edges.length);
+    });
+
+    it('selects an edge', () => {
+      cy.get('.react-flow__edge').first().click().should('have.class', 'selected');
+    });
+  });
+
+  describe('uses onConnect handlers', () => {
+    beforeEach(() => {
+      cy.mount(<Comp addOnConnectHandler initialNodes={simpleflow.nodes} />);
+    });
+
+    it('mounts nodes', () => {
+      cy.get('.react-flow__node').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow__edge').should('have.length', 0);
+    });
+
+    it('connects nodes', () => {
+      cy.get('.react-flow__node').first().find('.react-flow__handle.source').trigger('mousedown', { button: 0 });
+
+      cy.get('.react-flow__node')
+        .last()
+        .find('.react-flow__handle.target')
+        .trigger('mousemove')
+        .trigger('mouseup', { force: true });
+
+      cy.get('.react-flow__edge').should('have.length', 1);
+    });
+  });
+
+  describe('uses nodeTypes', () => {
+    it('renders custom nodes', () => {
+      const nodeTypes = {
+        custom: () => <div className="customnode">custom node</div>,
+      };
+
+      const initialNodes = simpleflow.nodes.map((n) => ({
+        ...n,
+        type: 'custom',
+      }));
+
+      cy.mount(<Comp nodeTypes={nodeTypes} initialNodes={initialNodes} />);
+
+      cy.get('.react-flow__node-custom').should('have.length', simpleflow.nodes.length);
+      cy.get('.react-flow').contains('custom node');
+    });
+
+    it('tries invalid node type - should fallback to default', () => {
+      const initialNodes = simpleflow.nodes.map((n) => ({
+        ...n,
+        type: 'invalid',
+      }));
+
+      cy.mount(<Comp initialNodes={initialNodes} />);
+
+      cy.get('.react-flow__node-invalid').should('have.length', 0);
+      cy.get('.react-flow__node-default').should('have.length', simpleflow.nodes.length);
+    });
+  });
+
+  describe('uses edgeTypes', () => {
+    it('renders custom edge', () => {
+      const edgeTypes = {
+        custom: ({ sourceX, sourceY, targetX, targetY }: EdgeProps) => (
+          <path d={`M${sourceX} ${sourceY} L${targetX} ${targetY}`} stroke="black" />
+        ),
+      };
+
+      const initialEdges = simpleflow.edges.map((e) => ({
+        ...e,
+        type: 'custom',
+      }));
+
+      cy.mount(<Comp edgeTypes={edgeTypes} initialNodes={simpleflow.nodes} initialEdges={initialEdges} />);
+
+      cy.get('.react-flow__edge-custom').should('have.length', simpleflow.edges.length);
+    });
+
+    it('tries invalid edge type - should fallback to default', () => {
+      const initialEdges = simpleflow.edges.map((e) => ({
+        ...e,
+        type: 'invalid',
+      }));
+
+      cy.mount(<Comp initialNodes={simpleflow.nodes} initialEdges={initialEdges} />);
+
+      cy.get('.react-flow__edge-invalid').should('have.length', 0);
+      cy.get('.react-flow__edge-default').should('have.length', simpleflow.edges.length);
+    });
+  });
+
+  it('uses style', () => {
+    const styles = {
+      backgroundColor: 'red',
+    };
+
+    cy.mount(<Comp style={styles} />);
+    cy.get('.react-flow').should('have.css', 'background-color', 'rgb(255, 0, 0)');
+  });
+
+  it('uses classname', () => {
+    cy.mount(<Comp className="custom" />);
+    cy.get('.react-flow').should('have.class', 'custom');
+  });
+});
+
+// test specific helper component
+
+function Comp({
+  addOnNodeChangeHandler = false,
+  addOnEdgeChangeHandler = false,
+  addOnConnectHandler = false,
+  initialNodes = [],
+  initialEdges = [],
+  ...rest
+}: {
+  initialNodes?: Node[];
+  initialEdges?: Edge[];
+  addOnNodeChangeHandler?: boolean;
+  addOnEdgeChangeHandler?: boolean;
+  addOnConnectHandler?: boolean;
+} & Partial<ReactFlowProps>) {
+  const [nodes, setNodes] = useState<Node[]>(initialNodes);
+  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    [setNodes]
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    [setEdges]
+  );
+
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  const handlers: {
+    onNodesChange?: (changes: NodeChange[]) => void;
+    onEdgesChange?: (changes: EdgeChange[]) => void;
+    onConnect?: (params: Connection | Edge) => void;
+  } = {};
+
+  if (addOnNodeChangeHandler) {
+    handlers.onNodesChange = onNodesChange;
+  }
+
+  if (addOnEdgeChangeHandler) {
+    handlers.onEdgesChange = onEdgesChange;
+  }
+
+  if (addOnConnectHandler) {
+    handlers.onConnect = onConnect;
+  }
+
+  return <ReactFlow nodes={nodes} edges={edges} {...handlers} {...rest} />;
+}
--- a/examples/nextjs/cypress/components/reactflow/uncontrolled.cy.tsx
+++ b/examples/nextjs/cypress/components/reactflow/uncontrolled.cy.tsx
@@ -0,0 +1,35 @@
+import { ReactFlow } from '@react-flow/bundle';
+
+import { nodes, edges } from '../../fixtures/simpleflow';
+
+describe('<ReactFlow />: Uncontrolled Flow', () => {
+  beforeEach(() => {
+    cy.mount(<ReactFlow defaultNodes={nodes} defaultEdges={edges} />);
+  });
+
+  it('mounts nodes and edges', () => {
+    cy.get('.react-flow__node').should('have.length', nodes.length);
+    cy.get('.react-flow__edge').should('have.length', edges.length);
+  });
+
+  it('selects a node', () => {
+    cy.get('.react-flow__node').first().click().should('have.class', 'selected');
+    cy.get('.react-flow__pane').click();
+    cy.get('.react-flow__node').first().should('not.have.class', 'selected');
+  });
+
+  it('drags a node', () => {
+    const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
+
+    cy.drag('.react-flow__node:first', { x: 200, y: 25 }).then(($el: any) => {
+      const styleAfterDrag = $el.css('transform');
+      expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
+    });
+  });
+
+  it('selects an edge', () => {
+    cy.get('.react-flow__edge').first().click().should('have.class', 'selected');
+    cy.get('.react-flow__pane').click();
+    cy.get('.react-flow__edge').first().should('not.have.class', 'selected');
+  });
+});
--- a/examples/nextjs/cypress/components/reactflow/view-props.cy.tsx
+++ b/examples/nextjs/cypress/components/reactflow/view-props.cy.tsx
@@ -0,0 +1,126 @@
+import { ReactFlow, ReactFlowProps, Viewport, useViewport } from '@react-flow/bundle';
+
+import * as simpleflow from '../../fixtures/simpleflow';
+
+const nodesOutsideOfView = [
+  {
+    ...simpleflow.nodes[0],
+    position: {
+      x: -500,
+      y: 0,
+    },
+  },
+  {
+    ...simpleflow.nodes[1],
+    position: {
+      x: 500,
+      y: 0,
+    },
+  },
+];
+
+describe('<ReactFlow />: View Props', () => {
+  it('uses fitView', () => {
+    cy.mount(<Comp nodes={nodesOutsideOfView} fitView minZoom={0.2} />);
+    cy.get('.react-flow__node:first').isWithinViewport();
+  });
+
+  it('uses fitViewOptions', () => {
+    const fitViewOptions = { padding: 0.5 };
+
+    cy.mount(<ReactFlow nodes={[nodesOutsideOfView[0]]} fitView fitViewOptions={fitViewOptions} />).wait(200);
+    cy.get('.react-flow__node:first').isWithinViewport();
+  });
+
+  describe('uses minZoom', () => {
+    it('minZoom: 0.2', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+
+      cy.mount(<Comp minZoom={0.2} onChange={onChangeSpy} />);
+
+      cy.zoomPane(10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(0.2);
+      });
+    });
+
+    it('minZoom: 1', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+
+      cy.mount(<Comp minZoom={1} onChange={onChangeSpy} />);
+
+      cy.zoomPane(10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
+      });
+    });
+
+    it('sets invalid defaultZoom', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+      const defaultViewport = { x: 0, y: 0, zoom: 0.2 };
+
+      cy.mount(<Comp minZoom={1} defaultViewport={defaultViewport} onChange={onChangeSpy} />);
+
+      cy.zoomPane(10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
+      });
+    });
+  });
+
+  describe('uses maxZoom', () => {
+    it('maxZoom: 1', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+
+      cy.mount(<Comp maxZoom={1} onChange={onChangeSpy} />);
+
+      cy.zoomPane(-10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1);
+      });
+    });
+
+    it('maxZoom: 2', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+
+      cy.mount(<Comp maxZoom={2} onChange={onChangeSpy} />);
+
+      cy.zoomPane(-10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(2);
+      });
+    });
+
+    it('sets invalid defaultZoom', () => {
+      const onChangeSpy = cy.spy().as('onChangeSpy');
+      const defaultViewport = { x: 0, y: 0, zoom: 2 };
+
+      cy.mount(<Comp maxZoom={1.5} defaultViewport={defaultViewport} onChange={onChangeSpy} />);
+
+      cy.zoomPane(-10000).then(() => {
+        expect(getLatestViewport(onChangeSpy).zoom).to.be.eq(1.5);
+      });
+    });
+  });
+});
+
+// test specific helpers
+
+type CompProps = {
+  onChange?: (vp: Viewport) => void;
+};
+
+function InnerComp({ onChange }: CompProps) {
+  const viewport = useViewport();
+
+  onChange?.(viewport);
+
+  return null;
+}
+
+function Comp({ onChange, ...rest }: CompProps & ReactFlowProps) {
+  return (
+    <ReactFlow {...rest}>
+      <InnerComp onChange={onChange} />
+    </ReactFlow>
+  );
+}
+
+function getLatestViewport(onChangeSpy: any) {
+  return onChangeSpy.lastCall.args[0] as unknown as Viewport;
+}
--- a/examples/nextjs/cypress/components/utils/graph-utils.cy.ts
+++ b/examples/nextjs/cypress/components/utils/graph-utils.cy.ts
--- a/examples/nextjs/cypress/e2e/minimap.cy.ts
+++ b/examples/nextjs/cypress/e2e/minimap.cy.ts
@@ -11,12 +11,10 @@ describe('Minimap Testing', () => {
  it('has same number of nodes as the pane', () => {
    const paneNodes = Cypress.$('.react-flow__node').length;

-    cy.wait(100);
+    cy.wait(200);

    const minimapNodes = Cypress.$('.react-flow__minimap-node').length;

-    cy.wait(100);
-
    expect(paneNodes).equal(minimapNodes);
  });

--- a/examples/nextjs/cypress/fixtures/example.json
+++ b/examples/nextjs/cypress/fixtures/example.json
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
--- a/examples/nextjs/cypress/fixtures/simpleflow.ts
+++ b/examples/nextjs/cypress/fixtures/simpleflow.ts
@@ -0,0 +1,22 @@
+import { Node, Edge } from '@react-flow/bundle';
+
+export const nodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+  },
+];
+
+export const edges: Edge[] = [
+  {
+    id: 'e1',
+    source: '1',
+    target: '2',
+  },
+];
--- a/examples/nextjs/cypress/support/commands.ts
+++ b/examples/nextjs/cypress/support/commands.ts
@@ -1,40 +1,51 @@
 /// <reference types="cypress" />

-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This is will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-
-Cypress.Commands.add('drag', (selector, { x, y }) => {
-  return cy.window().then((window) =>
+Cypress.Commands.add('drag', (selector, { x, y }) =>
+  cy.window().then((window) =>
    cy
      .get(selector as string)
      .trigger('mousedown', { which: 1, view: window })
      .trigger('mousemove', { clientX: x, clientY: y, force: true })
      .wait(50)
      .trigger('mouseup', { view: window, force: true })
-  );
+  )
+);
+
+Cypress.Commands.add('dragPane', ({ from, to }) =>
+  cy.window().then((window) =>
+    cy
+      .get('.react-flow__pane')
+      .trigger('mousedown', from.x, from.y, { which: 1, view: window })
+
+      .trigger('mousemove', to.x, to.y)
+      .trigger('mouseup', { force: true, view: window })
+  )
+);
+
+Cypress.Commands.add('zoomPane', (wheelDelta: number) =>
+  cy.get('.react-flow__pane').trigger('wheel', 'center', { deltaY: wheelDelta }).wait(250)
+);
+
+Cypress.Commands.add('isWithinViewport', { prevSubject: true }, (subject) => {
+  const rect = subject[0].getBoundingClientRect();
+
+  expect(rect.top).to.be.within(0, window.innerHeight);
+  expect(rect.right).to.be.within(0, window.innerWidth);
+  expect(rect.bottom).to.be.within(0, window.innerHeight);
+  expect(rect.left).to.be.within(0, window.innerWidth);
+
+  return subject;
+});
+
+Cypress.Commands.add('isOutsideViewport', { prevSubject: true }, (subject) => {
+  const rect = subject[0].getBoundingClientRect();
+
+  expect(rect.top).not.to.be.within(0, window.innerHeight);
+  expect(rect.right).not.to.be.within(0, window.innerWidth);
+  expect(rect.bottom).not.to.be.within(0, window.innerHeight);
+  expect(rect.left).not.to.be.within(0, window.innerWidth);
+
+  return subject;
 });

 export {};
--- a/examples/nextjs/cypress/support/component.ts
+++ b/examples/nextjs/cypress/support/component.ts
@@ -20,6 +20,7 @@ import './commands';
 // require('./commands')

 import { mount } from 'cypress/react18';
+import { XYPosition } from '@react-flow/bundle';

 import '../../styles/globals.css';
 import '../../styles/rf-style.css';
@@ -28,7 +29,11 @@ declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount;
-      drag: (selector: string, { x, y }: { x: number; y: number }) => Cypress.Chainable<JQuery<HTMLElement>>;
+      drag: (selector: string, toPosition: XYPosition) => Cypress.Chainable<JQuery<HTMLElement>>;
+      dragPane: ({ from, to }: { from: XYPosition; to: XYPosition }) => Cypress.Chainable<JQuery<HTMLElement>>;
+      zoomPane: (wheelDelta: number) => Cypress.Chainable<JQuery<HTMLElement>>;
+      isWithinViewport: () => Cypress.Chainable<JQuery<HTMLElement>>;
+      isOutsideViewport: () => Cypress.Chainable<JQuery<HTMLElement>>;
    }
  }
 }
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -30,6 +30,7 @@
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.1.0",
    "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.7.2"
+    "postcss-preset-env": "^7.7.2",
+    "webpack": "^5.74.0"
  }
 }
--- a/examples/nextjs/pages/Hidden/index.tsx
+++ b/examples/nextjs/pages/Hidden/index.tsx
@@ -70,8 +70,6 @@ const HiddenFlow = () => {
    setEdges(setHidden(isHidden));
  }, [isHidden, setEdges, setNodes]);

-  console.log(nodes);
-
  return (
    <ReactFlow
      nodes={nodes}
--- a/examples/nextjs/tests/useOnViewportChange.cy.tsx
+++ b/examples/nextjs/tests/useOnViewportChange.cy.tsx
@@ -1,76 +0,0 @@
-import { ReactFlow, useOnViewportChange, Viewport } from '@react-flow/bundle';
-
-describe('useOnViewportChange.cy.js', () => {
-  it('listen to viewport drag', () => {
-    let startViewport = {};
-    let changeViewport = {};
-    let endViewport = {};
-
-    const onStart = (viewport: Viewport) => {
-      startViewport = viewport;
-    };
-    const onChange = (viewport: Viewport) => {
-      changeViewport = viewport;
-    };
-    const onEnd = (viewport: Viewport) => {
-      endViewport = viewport;
-    };
-
-    cy.mount(
-      <ReactFlow>
-        <OnViewportChange onStart={onStart} onChange={onChange} onEnd={onEnd} />
-      </ReactFlow>
-    );
-
-    cy.window().then((win: any) => {
-      cy.get('.react-flow__pane')
-        .trigger('mousedown', 50, 50, { which: 1, view: win })
-        .trigger('mousemove', 50, 100)
-        .trigger('mouseup', { force: true, view: win })
-        .then(() => {
-          expect(startViewport).to.eql({ x: 0, y: 0, zoom: 1 });
-          expect(changeViewport).to.not.eql({ x: 0, y: 0, zoom: 1 });
-          expect(endViewport).to.eql({ x: 0, y: 50, zoom: 1 });
-        });
-    });
-  });
-
-  it('handles default viewport', () => {
-    const defaultViewport = { x: 100, y: 100, zoom: 0.5 };
-    let startViewport = {};
-
-    const onStart = (viewport: Viewport) => {
-      startViewport = viewport;
-    };
-
-    cy.mount(
-      <ReactFlow defaultViewport={defaultViewport}>
-        <OnViewportChange onStart={onStart} />
-      </ReactFlow>
-    );
-
-    cy.window().then((win: any) => {
-      cy.get('.react-flow__pane')
-        .trigger('mousedown', 50, 50, { which: 1, view: win })
-        .trigger('mousemove', 50, 100)
-        .trigger('mouseup', { force: true, view: win })
-        .then(() => {
-          expect(startViewport).to.eql(defaultViewport);
-        });
-    });
-  });
-});
-
-function OnViewportChange({
-  onStart,
-  onChange,
-  onEnd,
-}: {
-  onStart?: (viewport: Viewport) => void;
-  onChange?: (viewport: Viewport) => void;
-  onEnd?: (viewport: Viewport) => void;
-}) {
-  useOnViewportChange({ onStart, onChange, onEnd });
-
-  return null;
-}
--- a/examples/nextjs/tsconfig.json
+++ b/examples/nextjs/tsconfig.json
@@ -13,7 +13,9 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "baseUrl": "./",
+    "types": ["cypress", "@testing-library/cypress"]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
--- a/package.json
+++ b/package.json
@@ -15,9 +15,13 @@
    "build": "preconstruct build && yarn run packages",
    "packages": "yarn workspaces foreach --include '@react-flow/**' run build",
    "test:all": "yarn test:chrome && yarn test:firefox",
+    "test:e2e": "cd examples/nextjs && cypress run",
+    "test:component": "cd examples/nextjs && cypress run --component",
    "test:chrome": "cd examples/nextjs && cypress run --browser chrome",
    "test:firefox": "cd examples/nextjs && cypress run --browser firefox",
-    "test": "yarn build && start-server-and-test dev:example http://localhost:3000 test:chrome",
+    "test": "yarn build && start-server-and-test dev:example http://localhost:3000 test:component",
+    "cypress:open": "cd examples/nextjs && cypress open",
+    "cypress:dev": "yarn build && start-server-and-test dev:example http://localhost:3000 cypress:open",
    "release": "changeset publish"
  },
  "dependencies": {
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,7 +15,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.18.6, @babel/code-frame@npm:^7.5.5":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.18.6, @babel/code-frame@npm:^7.5.5":
  version: 7.18.6
  resolution: "@babel/code-frame@npm:7.18.6"
  dependencies:
@@ -1386,7 +1386,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4":
+"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.7, @babel/runtime@npm:^7.8.4":
  version: 7.18.9
  resolution: "@babel/runtime@npm:7.18.9"
  dependencies:
@@ -2035,6 +2035,16 @@ __metadata:
  languageName: node
  linkType: hard

+"@jridgewell/trace-mapping@npm:^0.3.14":
+  version: 0.3.15
+  resolution: "@jridgewell/trace-mapping@npm:0.3.15"
+  dependencies:
+    "@jridgewell/resolve-uri": ^3.0.3
+    "@jridgewell/sourcemap-codec": ^1.4.10
+  checksum: 38917e9c2b014d469a9f51c016ed506acbe44dd16ec2f6f99b553ebf3764d22abadbf992f2367b6d2b3511f3eae8ed3a8963f6c1030093fda23efd35ecab2bae
+  languageName: node
+  linkType: hard
+
 "@jridgewell/trace-mapping@npm:^0.3.9":
  version: 0.3.14
  resolution: "@jridgewell/trace-mapping@npm:0.3.14"
@@ -2507,6 +2517,34 @@ __metadata:
  languageName: node
  linkType: hard

+"@testing-library/cypress@npm:^8.0.3":
+  version: 8.0.3
+  resolution: "@testing-library/cypress@npm:8.0.3"
+  dependencies:
+    "@babel/runtime": ^7.14.6
+    "@testing-library/dom": ^8.1.0
+  peerDependencies:
+    cypress: ^2.1.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0
+  checksum: 319f6c7297f85e5673882a71009b5d5b576006f986d87a6ca6f2f8c679d96d9779f3ddbc01654b5a943407fa91192814f250835ce01f153e33ef24818cf1bf20
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:^8.1.0":
+  version: 8.17.1
+  resolution: "@testing-library/dom@npm:8.17.1"
+  dependencies:
+    "@babel/code-frame": ^7.10.4
+    "@babel/runtime": ^7.12.5
+    "@types/aria-query": ^4.2.0
+    aria-query: ^5.0.0
+    chalk: ^4.1.0
+    dom-accessibility-api: ^0.5.9
+    lz-string: ^1.4.4
+    pretty-format: ^27.0.2
+  checksum: e4df091fcf84c9eac4a6ee4c76674c1d562bf98732f0ac8820972d7718ab10397b672b9f082aace3cacd1f610fc77de6e1b6094e67afe1df0443bf22eb9deab2
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:2":
  version: 2.0.0
  resolution: "@tootallnate/once@npm:2.0.0"
@@ -2514,6 +2552,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/aria-query@npm:^4.2.0":
+  version: 4.2.2
+  resolution: "@types/aria-query@npm:4.2.2"
+  checksum: 6f2ce11d91e2d665f3873258db19da752d91d85d3679eb5efcdf9c711d14492287e1e4eb52613b28e60375841a9e428594e745b68436c963d8bad4bf72188df3
+  languageName: node
+  linkType: hard
+
 "@types/d3-array@npm:*":
  version: 3.0.3
  resolution: "@types/d3-array@npm:3.0.3"
@@ -2793,6 +2838,26 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/eslint-scope@npm:^3.7.3":
+  version: 3.7.4
+  resolution: "@types/eslint-scope@npm:3.7.4"
+  dependencies:
+    "@types/eslint": "*"
+    "@types/estree": "*"
+  checksum: ea6a9363e92f301cd3888194469f9ec9d0021fe0a397a97a6dd689e7545c75de0bd2153dfb13d3ab532853a278b6572c6f678ce846980669e41029d205653460
+  languageName: node
+  linkType: hard
+
+"@types/eslint@npm:*":
+  version: 8.4.6
+  resolution: "@types/eslint@npm:8.4.6"
+  dependencies:
+    "@types/estree": "*"
+    "@types/json-schema": "*"
+  checksum: bfaf27b00031b2238139003965475d023306119e467947f7a43a41e380918e365618e2ae6a6ae638697f6421a6bb1571db078695ff5e548f23618000b38acd23
+  languageName: node
+  linkType: hard
+
 "@types/estree@npm:*":
  version: 1.0.0
  resolution: "@types/estree@npm:1.0.0"
@@ -2807,6 +2872,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/estree@npm:^0.0.51":
+  version: 0.0.51
+  resolution: "@types/estree@npm:0.0.51"
+  checksum: e56a3bcf759fd9185e992e7fdb3c6a5f81e8ff120e871641607581fb3728d16c811702a7d40fa5f869b7f7b4437ab6a87eb8d98ffafeee51e85bbe955932a189
+  languageName: node
+  linkType: hard
+
 "@types/geojson@npm:*":
  version: 7946.0.10
  resolution: "@types/geojson@npm:7946.0.10"
@@ -2823,7 +2895,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
  version: 7.0.11
  resolution: "@types/json-schema@npm:7.0.11"
  checksum: 527bddfe62db9012fccd7627794bd4c71beb77601861055d87e3ee464f2217c85fca7a4b56ae677478367bbd248dbde13553312b7d4dbc702a2f2bbf60c4018d
@@ -3115,6 +3187,171 @@ __metadata:
  languageName: node
  linkType: hard

+"@webassemblyjs/ast@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/ast@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/helper-numbers": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+  checksum: 1eee1534adebeece635362f8e834ae03e389281972611408d64be7895fc49f48f98fddbbb5339bf8a72cb101bcb066e8bca3ca1bf1ef47dadf89def0395a8d87
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/floating-point-hex-parser@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/floating-point-hex-parser@npm:1.11.1"
+  checksum: b8efc6fa08e4787b7f8e682182d84dfdf8da9d9c77cae5d293818bc4a55c1f419a87fa265ab85252b3e6c1fd323d799efea68d825d341a7c365c64bc14750e97
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-api-error@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-api-error@npm:1.11.1"
+  checksum: 0792813f0ed4a0e5ee0750e8b5d0c631f08e927f4bdfdd9fe9105dc410c786850b8c61bff7f9f515fdfb149903bec3c976a1310573a4c6866a94d49bc7271959
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-buffer@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-buffer@npm:1.11.1"
+  checksum: a337ee44b45590c3a30db5a8b7b68a717526cf967ada9f10253995294dbd70a58b2da2165222e0b9830cd4fc6e4c833bf441a721128d1fe2e9a7ab26b36003ce
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-numbers@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-numbers@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser": 1.11.1
+    "@webassemblyjs/helper-api-error": 1.11.1
+    "@xtuc/long": 4.2.2
+  checksum: 44d2905dac2f14d1e9b5765cf1063a0fa3d57295c6d8930f6c59a36462afecc6e763e8a110b97b342a0f13376166c5d41aa928e6ced92e2f06b071fd0db59d3a
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-wasm-bytecode@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-wasm-bytecode@npm:1.11.1"
+  checksum: eac400113127832c88f5826bcc3ad1c0db9b3dbd4c51a723cfdb16af6bfcbceb608170fdaac0ab7731a7e18b291be7af68a47fcdb41cfe0260c10857e7413d97
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/helper-wasm-section@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/helper-wasm-section@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+  checksum: 617696cfe8ecaf0532763162aaf748eb69096fb27950219bb87686c6b2e66e11cd0614d95d319d0ab1904bc14ebe4e29068b12c3e7c5e020281379741fe4bedf
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/ieee754@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/ieee754@npm:1.11.1"
+  dependencies:
+    "@xtuc/ieee754": ^1.2.0
+  checksum: 23a0ac02a50f244471631802798a816524df17e56b1ef929f0c73e3cde70eaf105a24130105c60aff9d64a24ce3b640dad443d6f86e5967f922943a7115022ec
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/leb128@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/leb128@npm:1.11.1"
+  dependencies:
+    "@xtuc/long": 4.2.2
+  checksum: 33ccc4ade2f24de07bf31690844d0b1ad224304ee2062b0e464a610b0209c79e0b3009ac190efe0e6bd568b0d1578d7c3047fc1f9d0197c92fc061f56224ff4a
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/utf8@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/utf8@npm:1.11.1"
+  checksum: 972c5cfc769d7af79313a6bfb96517253a270a4bf0c33ba486aa43cac43917184fb35e51dfc9e6b5601548cd5931479a42e42c89a13bb591ffabebf30c8a6a0b
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/wasm-edit@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-edit@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/helper-wasm-section": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+    "@webassemblyjs/wasm-opt": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    "@webassemblyjs/wast-printer": 1.11.1
+  checksum: 6d7d9efaec1227e7ef7585a5d7ff0be5f329f7c1c6b6c0e906b18ed2e9a28792a5635e450aca2d136770d0207225f204eff70a4b8fd879d3ac79e1dcc26dbeb9
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/wasm-gen@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-gen@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/ieee754": 1.11.1
+    "@webassemblyjs/leb128": 1.11.1
+    "@webassemblyjs/utf8": 1.11.1
+  checksum: 1f6921e640293bf99fb16b21e09acb59b340a79f986c8f979853a0ae9f0b58557534b81e02ea2b4ef11e929d946708533fd0693c7f3712924128fdafd6465f5b
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/wasm-opt@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-opt@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-buffer": 1.11.1
+    "@webassemblyjs/wasm-gen": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+  checksum: 21586883a20009e2b20feb67bdc451bbc6942252e038aae4c3a08e6f67b6bae0f5f88f20bfc7bd0452db5000bacaf5ab42b98cf9aa034a6c70e9fc616142e1db
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/wasm-parser@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wasm-parser@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/helper-api-error": 1.11.1
+    "@webassemblyjs/helper-wasm-bytecode": 1.11.1
+    "@webassemblyjs/ieee754": 1.11.1
+    "@webassemblyjs/leb128": 1.11.1
+    "@webassemblyjs/utf8": 1.11.1
+  checksum: 1521644065c360e7b27fad9f4bb2df1802d134dd62937fa1f601a1975cde56bc31a57b6e26408b9ee0228626ff3ba1131ae6f74ffb7d718415b6528c5a6dbfc2
+  languageName: node
+  linkType: hard
+
+"@webassemblyjs/wast-printer@npm:1.11.1":
+  version: 1.11.1
+  resolution: "@webassemblyjs/wast-printer@npm:1.11.1"
+  dependencies:
+    "@webassemblyjs/ast": 1.11.1
+    "@xtuc/long": 4.2.2
+  checksum: f15ae4c2441b979a3b4fce78f3d83472fb22350c6dc3fd34bfe7c3da108e0b2360718734d961bba20e7716cb8578e964b870da55b035e209e50ec9db0378a3f7
+  languageName: node
+  linkType: hard
+
+"@xtuc/ieee754@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@xtuc/ieee754@npm:1.2.0"
+  checksum: ac56d4ca6e17790f1b1677f978c0c6808b1900a5b138885d3da21732f62e30e8f0d9120fcf8f6edfff5100ca902b46f8dd7c1e3f903728634523981e80e2885a
+  languageName: node
+  linkType: hard
+
+"@xtuc/long@npm:4.2.2":
+  version: 4.2.2
+  resolution: "@xtuc/long@npm:4.2.2"
+  checksum: 8ed0d477ce3bc9c6fe2bf6a6a2cc316bb9c4127c5a7827bae947fa8ec34c7092395c5a283cc300c05b5fa01cbbfa1f938f410a7bf75db7c7846fea41949989ec
+  languageName: node
+  linkType: hard
+
 "abbrev@npm:1":
  version: 1.1.1
  resolution: "abbrev@npm:1.1.1"
@@ -3122,6 +3359,15 @@ __metadata:
  languageName: node
  linkType: hard

+"acorn-import-assertions@npm:^1.7.6":
+  version: 1.8.0
+  resolution: "acorn-import-assertions@npm:1.8.0"
+  peerDependencies:
+    acorn: ^8
+  checksum: 5c4cf7c850102ba7ae0eeae0deb40fb3158c8ca5ff15c0bca43b5c47e307a1de3d8ef761788f881343680ea374631ae9e9615ba8876fee5268dbe068c98bcba6
+  languageName: node
+  linkType: hard
+
 "acorn-jsx@npm:^5.3.2":
  version: 5.3.2
  resolution: "acorn-jsx@npm:5.3.2"
@@ -3170,7 +3416,16 @@ __metadata:
  languageName: node
  linkType: hard

-"ajv@npm:^6.10.0, ajv@npm:^6.12.4":
+"ajv-keywords@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "ajv-keywords@npm:3.5.2"
+  peerDependencies:
+    ajv: ^6.9.1
+  checksum: 7dc5e5931677a680589050f79dcbe1fefbb8fea38a955af03724229139175b433c63c68f7ae5f86cf8f65d55eb7c25f75a046723e2e58296707617ca690feae9
+  languageName: node
+  linkType: hard
+
+"ajv@npm:^6.10.0, ajv@npm:^6.12.4, ajv@npm:^6.12.5":
  version: 6.12.6
  resolution: "ajv@npm:6.12.6"
  dependencies:
@@ -3223,6 +3478,13 @@ __metadata:
  languageName: node
  linkType: hard

+"ansi-styles@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:~3.1.2":
  version: 3.1.2
  resolution: "anymatch@npm:3.1.2"
@@ -3283,6 +3545,13 @@ __metadata:
  languageName: node
  linkType: hard

+"aria-query@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "aria-query@npm:5.0.0"
+  checksum: c41f98866c5a304561ee8cae55856711cddad6f3f85d8cb43cc5f79667078d9b8979ce32d244c1ff364e6463a4d0b6865804a33ccc717fed701b281cf7dc6296
+  languageName: node
+  linkType: hard
+
 "array-includes@npm:^3.1.4, array-includes@npm:^3.1.5":
  version: 3.1.5
  resolution: "array-includes@npm:3.1.5"
@@ -3593,7 +3862,7 @@ __metadata:
  languageName: node
  linkType: hard

-"browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
+"browserslist@npm:^4.14.5, browserslist@npm:^4.20.2, browserslist@npm:^4.20.3, browserslist@npm:^4.21.0, browserslist@npm:^4.21.2, browserslist@npm:^4.21.3":
  version: 4.21.3
  resolution: "browserslist@npm:4.21.3"
  dependencies:
@@ -3788,6 +4057,13 @@ __metadata:
  languageName: node
  linkType: hard

+"chrome-trace-event@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "chrome-trace-event@npm:1.0.3"
+  checksum: cb8b1fc7e881aaef973bd0c4a43cd353c2ad8323fb471a041e64f7c2dd849cde4aad15f8b753331a32dda45c973f032c8a03b8177fc85d60eaa75e91e08bfb97
+  languageName: node
+  linkType: hard
+
 "ci-info@npm:^2.0.0":
  version: 2.0.0
  resolution: "ci-info@npm:2.0.0"
@@ -4459,6 +4735,13 @@ __metadata:
  languageName: node
  linkType: hard

+"dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.14
+  resolution: "dom-accessibility-api@npm:0.5.14"
+  checksum: 782c813f75a09ba6735ef03b5e1624406a3829444ae49d5bdedd272a49d437ae3354f53e02ffc8c9fd9165880250f41546538f27461f839dd4ea1234e77e8d5e
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^8.1.0":
  version: 8.6.0
  resolution: "dotenv@npm:8.6.0"
@@ -4522,6 +4805,16 @@ __metadata:
  languageName: node
  linkType: hard

+"enhanced-resolve@npm:^5.10.0":
+  version: 5.10.0
+  resolution: "enhanced-resolve@npm:5.10.0"
+  dependencies:
+    graceful-fs: ^4.2.4
+    tapable: ^2.2.0
+  checksum: 0bb9830704db271610f900e8d79d70a740ea16f251263362b0c91af545576d09fe50103496606c1300a05e588372d6f9780a9bc2e30ce8ef9b827ec8f44687ff
+  languageName: node
+  linkType: hard
+
 "enquirer@npm:^2.3.0, enquirer@npm:^2.3.6":
  version: 2.3.6
  resolution: "enquirer@npm:2.3.6"
@@ -4585,6 +4878,13 @@ __metadata:
  languageName: node
  linkType: hard

+"es-module-lexer@npm:^0.9.0":
+  version: 0.9.3
+  resolution: "es-module-lexer@npm:0.9.3"
+  checksum: 84bbab23c396281db2c906c766af58b1ae2a1a2599844a504df10b9e8dc77ec800b3211fdaa133ff700f5703d791198807bba25d9667392d27a5e9feda344da8
+  languageName: node
+  linkType: hard
+
 "es-shim-unscopables@npm:^1.0.0":
  version: 1.0.0
  resolution: "es-shim-unscopables@npm:1.0.0"
@@ -4790,7 +5090,7 @@ __metadata:
  languageName: node
  linkType: hard

-"eslint-scope@npm:^5.1.1":
+"eslint-scope@npm:5.1.1, eslint-scope@npm:^5.1.1":
  version: 5.1.1
  resolution: "eslint-scope@npm:5.1.1"
  dependencies:
@@ -4991,6 +5291,13 @@ __metadata:
  languageName: node
  linkType: hard

+"events@npm:^3.2.0":
+  version: 3.3.0
+  resolution: "events@npm:3.3.0"
+  checksum: f6f487ad2198aa41d878fa31452f1a3c00958f46e9019286ff4787c84aac329332ab45c9cdc8c445928fc6d7ded294b9e005a7fce9426488518017831b272780
+  languageName: node
+  linkType: hard
+
 "execa@npm:4.1.0":
  version: 4.1.0
  resolution: "execa@npm:4.1.0"
@@ -5523,6 +5830,13 @@ __metadata:
  languageName: node
  linkType: hard

+"glob-to-regexp@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "glob-to-regexp@npm:0.4.1"
+  checksum: e795f4e8f06d2a15e86f76e4d92751cf8bbfcf0157cea5c2f0f35678a8195a750b34096b1256e436f0cebc1883b5ff0888c47348443e69546a5a87f9e1eb1167
+  languageName: node
+  linkType: hard
+
 "glob@npm:7.1.7":
  version: 7.1.7
  resolution: "glob@npm:7.1.7"
@@ -5616,7 +5930,7 @@ __metadata:
  languageName: node
  linkType: hard

-"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.5, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6":
+"graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.5, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
  version: 4.2.10
  resolution: "graceful-fs@npm:4.2.10"
  checksum: 3f109d70ae123951905d85032ebeae3c2a5a7a997430df00ea30df0e3a6c60cf6689b109654d6fdacd28810a053348c4d14642da1d075049e6be1ba5216218da
@@ -6211,6 +6525,17 @@ __metadata:
  languageName: node
  linkType: hard

+"jest-worker@npm:^27.4.5":
+  version: 27.5.1
+  resolution: "jest-worker@npm:27.5.1"
+  dependencies:
+    "@types/node": "*"
+    merge-stream: ^2.0.0
+    supports-color: ^8.0.0
+  checksum: 98cd68b696781caed61c983a3ee30bf880b5bd021c01d98f47b143d4362b85d0737f8523761e2713d45e18b4f9a2b98af1eaee77afade4111bb65c77d6f7c980
+  languageName: node
+  linkType: hard
+
 "joi@npm:^17.4.0":
  version: 17.6.0
  resolution: "joi@npm:17.6.0"
@@ -6279,7 +6604,7 @@ __metadata:
  languageName: node
  linkType: hard

-"json-parse-even-better-errors@npm:^2.3.0":
+"json-parse-even-better-errors@npm:^2.3.0, json-parse-even-better-errors@npm:^2.3.1":
  version: 2.3.1
  resolution: "json-parse-even-better-errors@npm:2.3.1"
  checksum: 798ed4cf3354a2d9ccd78e86d2169515a0097a5c133337807cdf7f1fc32e1391d207ccfc276518cc1d7d8d4db93288b8a50ba4293d212ad1336e52a8ec0a941f
@@ -6484,6 +6809,13 @@ __metadata:
  languageName: node
  linkType: hard

+"loader-runner@npm:^4.2.0":
+  version: 4.3.0
+  resolution: "loader-runner@npm:4.3.0"
+  checksum: a90e00dee9a16be118ea43fec3192d0b491fe03a32ed48a4132eb61d498f5536a03a1315531c19d284392a8726a4ecad71d82044c28d7f22ef62e029bf761569
+  languageName: node
+  linkType: hard
+
 "localforage@npm:^1.10.0":
  version: 1.10.0
  resolution: "localforage@npm:1.10.0"
@@ -6615,6 +6947,15 @@ __metadata:
  languageName: node
  linkType: hard

+"lz-string@npm:^1.4.4":
+  version: 1.4.4
+  resolution: "lz-string@npm:1.4.4"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 54e31238a61a84d8f664d9860a9fba7310c5b97a52c444f80543069bc084815eff40b8d4474ae1d93992fdf6c252dca37cf27f6adbeb4dbc3df2f3ac773d0e61
+  languageName: node
+  linkType: hard
+
 "magic-string@npm:^0.25.7":
  version: 0.25.9
  resolution: "magic-string@npm:0.25.9"
@@ -6738,7 +7079,7 @@ __metadata:
  languageName: node
  linkType: hard

-"mime-types@npm:^2.1.12, mime-types@npm:~2.1.19":
+"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:~2.1.19":
  version: 2.1.35
  resolution: "mime-types@npm:2.1.35"
  dependencies:
@@ -6927,6 +7268,13 @@ __metadata:
  languageName: node
  linkType: hard

+"neo-async@npm:^2.6.2":
+  version: 2.6.2
+  resolution: "neo-async@npm:2.6.2"
+  checksum: deac9f8d00eda7b2e5cd1b2549e26e10a0faa70adaa6fdadca701cc55f49ee9018e427f424bac0c790b7c7e2d3068db97f3093f1093975f2acb8f8818b936ed9
+  languageName: node
+  linkType: hard
+
 "next-global-css@npm:^1.3.1":
  version: 1.3.1
  resolution: "next-global-css@npm:1.3.1"
@@ -8047,6 +8395,17 @@ __metadata:
  languageName: node
  linkType: hard

+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: ^5.0.1
+    ansi-styles: ^5.0.0
+    react-is: ^17.0.1
+  checksum: cf610cffcb793885d16f184a62162f2dd0df31642d9a18edf4ca298e909a8fe80bdbf556d5c9573992c102ce8bf948691da91bf9739bee0ffb6e79c8a8a6e088
+  languageName: node
+  linkType: hard
+
 "pretty-hrtime@npm:^1.0.3":
  version: 1.0.3
  resolution: "pretty-hrtime@npm:1.0.3"
@@ -8159,6 +8518,15 @@ __metadata:
  languageName: node
  linkType: hard

+"randombytes@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "randombytes@npm:2.1.0"
+  dependencies:
+    safe-buffer: ^5.1.0
+  checksum: d779499376bd4cbb435ef3ab9a957006c8682f343f14089ed5f27764e4645114196e75b7f6abf1cbd84fd247c0cb0651698444df8c9bf30e62120fbbc52269d6
+  languageName: node
+  linkType: hard
+
 "react-dom@npm:^18.2.0":
  version: 18.2.0
  resolution: "react-dom@npm:18.2.0"
@@ -8177,6 +8545,7 @@ __metadata:
  dependencies:
    "@preconstruct/next": ^4.0.0
    "@react-flow/bundle": "workspace:*"
+    "@testing-library/cypress": ^8.0.3
    "@types/dagre": ^0.7.47
    cypress: ^10.6.0
    dagre: ^0.8.5
@@ -8192,6 +8561,7 @@ __metadata:
    postcss-preset-env: ^7.7.2
    react: ^18.2.0
    react-dom: ^18.2.0
+    webpack: ^5.74.0
  languageName: unknown
  linkType: soft

@@ -8234,6 +8604,13 @@ __metadata:
  languageName: node
  linkType: hard

+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
+  languageName: node
+  linkType: hard
+
 "react@npm:^18.2.0":
  version: 18.2.0
  resolution: "react@npm:18.2.0"
@@ -8562,7 +8939,7 @@ __metadata:
  languageName: node
  linkType: hard

-"safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.2, safe-buffer@npm:~5.2.0":
  version: 5.2.1
  resolution: "safe-buffer@npm:5.2.1"
  checksum: b99c4b41fdd67a6aaf280fcd05e9ffb0813654894223afb78a31f14a19ad220bba8aba1cb14eddce1fcfb037155fe6de4e861784eb434f7d11ed58d1e70dd491
@@ -8592,6 +8969,17 @@ __metadata:
  languageName: node
  linkType: hard

+"schema-utils@npm:^3.1.0, schema-utils@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "schema-utils@npm:3.1.1"
+  dependencies:
+    "@types/json-schema": ^7.0.8
+    ajv: ^6.12.5
+    ajv-keywords: ^3.5.2
+  checksum: fb73f3d759d43ba033c877628fe9751620a26879f6301d3dbeeb48cf2a65baec5cdf99da65d1bf3b4ff5444b2e59cbe4f81c2456b5e0d2ba7d7fd4aed5da29ce
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1":
  version: 5.7.1
  resolution: "semver@npm:5.7.1"
@@ -8630,6 +9018,15 @@ __metadata:
  languageName: node
  linkType: hard

+"serialize-javascript@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "serialize-javascript@npm:6.0.0"
+  dependencies:
+    randombytes: ^2.1.0
+  checksum: 56f90b562a1bdc92e55afb3e657c6397c01a902c588c0fe3d4c490efdcc97dcd2a3074ba12df9e94630f33a5ce5b76a74784a7041294628a6f4306e0ec84bf93
+  languageName: node
+  linkType: hard
+
 "set-blocking@npm:^2.0.0":
  version: 2.0.0
  resolution: "set-blocking@npm:2.0.0"
@@ -9054,7 +9451,7 @@ __metadata:
  languageName: node
  linkType: hard

-"supports-color@npm:^8.1.1":
+"supports-color@npm:^8.0.0, supports-color@npm:^8.1.1":
  version: 8.1.1
  resolution: "supports-color@npm:8.1.1"
  dependencies:
@@ -9070,6 +9467,13 @@ __metadata:
  languageName: node
  linkType: hard

+"tapable@npm:^2.1.1, tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 3b7a1b4d86fa940aad46d9e73d1e8739335efd4c48322cb37d073eb6f80f5281889bf0320c6d8ffcfa1a0dd5bfdbd0f9d037e252ef972aca595330538aac4d51
+  languageName: node
+  linkType: hard
+
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
  version: 6.1.11
  resolution: "tar@npm:6.1.11"
@@ -9091,7 +9495,29 @@ __metadata:
  languageName: node
  linkType: hard

-"terser@npm:^5.2.1":
+"terser-webpack-plugin@npm:^5.1.3":
+  version: 5.3.5
+  resolution: "terser-webpack-plugin@npm:5.3.5"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.14
+    jest-worker: ^27.4.5
+    schema-utils: ^3.1.1
+    serialize-javascript: ^6.0.0
+    terser: ^5.14.1
+  peerDependencies:
+    webpack: ^5.1.0
+  peerDependenciesMeta:
+    "@swc/core":
+      optional: true
+    esbuild:
+      optional: true
+    uglify-js:
+      optional: true
+  checksum: 611c7b38d6fa0213dc03f48da9efe29c7edd098fc128a64905f7c9b61af8e7c36c13113d46b50be19ee2b8378442f4e1b8b4ddac9bba2cb73499ed32fc0e18f4
+  languageName: node
+  linkType: hard
+
+"terser@npm:^5.14.1, terser@npm:^5.2.1":
  version: 5.14.2
  resolution: "terser@npm:5.14.2"
  dependencies:
@@ -9507,6 +9933,16 @@ __metadata:
  languageName: node
  linkType: hard

+"watchpack@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "watchpack@npm:2.4.0"
+  dependencies:
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.1.2
+  checksum: 23d4bc58634dbe13b86093e01c6a68d8096028b664ab7139d58f0c37d962d549a940e98f2f201cecdabd6f9c340338dc73ef8bf094a2249ef582f35183d1a131
+  languageName: node
+  linkType: hard
+
 "wcwidth@npm:^1.0.1":
  version: 1.0.1
  resolution: "wcwidth@npm:1.0.1"
@@ -9523,6 +9959,50 @@ __metadata:
  languageName: node
  linkType: hard

+"webpack-sources@npm:^3.2.3":
+  version: 3.2.3
+  resolution: "webpack-sources@npm:3.2.3"
+  checksum: 989e401b9fe3536529e2a99dac8c1bdc50e3a0a2c8669cbafad31271eadd994bc9405f88a3039cd2e29db5e6d9d0926ceb7a1a4e7409ece021fe79c37d9c4607
+  languageName: node
+  linkType: hard
+
+"webpack@npm:^5.74.0":
+  version: 5.74.0
+  resolution: "webpack@npm:5.74.0"
+  dependencies:
+    "@types/eslint-scope": ^3.7.3
+    "@types/estree": ^0.0.51
+    "@webassemblyjs/ast": 1.11.1
+    "@webassemblyjs/wasm-edit": 1.11.1
+    "@webassemblyjs/wasm-parser": 1.11.1
+    acorn: ^8.7.1
+    acorn-import-assertions: ^1.7.6
+    browserslist: ^4.14.5
+    chrome-trace-event: ^1.0.2
+    enhanced-resolve: ^5.10.0
+    es-module-lexer: ^0.9.0
+    eslint-scope: 5.1.1
+    events: ^3.2.0
+    glob-to-regexp: ^0.4.1
+    graceful-fs: ^4.2.9
+    json-parse-even-better-errors: ^2.3.1
+    loader-runner: ^4.2.0
+    mime-types: ^2.1.27
+    neo-async: ^2.6.2
+    schema-utils: ^3.1.0
+    tapable: ^2.1.1
+    terser-webpack-plugin: ^5.1.3
+    watchpack: ^2.4.0
+    webpack-sources: ^3.2.3
+  peerDependenciesMeta:
+    webpack-cli:
+      optional: true
+  bin:
+    webpack: bin/webpack.js
+  checksum: 320c41369a75051b19e18c63f408b3dcc481852e992f83d311771c5ec0f05f2946385e8ebef62030cf3587f0a3d2f12779ffdb191569a966847289ba7313f946
+  languageName: node
+  linkType: hard
+
 "whatwg-url@npm:^5.0.0":
  version: 5.0.0
  resolution: "whatwg-url@npm:5.0.0"