refactor(repo): use turbo + rollup + vite

.eslintrc.json

@@ -1,31 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react/jsx-runtime",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react", "@typescript-eslint"],
-  "rules": {
-    "@typescript-eslint/no-non-null-assertion": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

.gitignore

@@ -11,10 +11,5 @@ stats.html
 .idea
 .log
 
-.yarn/*
-!.yarn/patches
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-!.yarn/versions
-.pnp.*
+.turbo
+.rollup.cache

.npmrc

@@ -1,2 +1,3 @@
 registry = "https://registry.npmjs.com/"
-legacy-peer-deps = true
+legacy-peer-deps = true
+strict-peer-dependencies=false

.yarnrc.yml

@@ -1,5 +0,0 @@
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"

README.md

@@ -33,7 +33,7 @@ You can find more information in our [React Flow Pro FAQs](https://pro.reactflow
 
 ## Installation
 
-The easiest way to get the latest version of React Flow is to install it via npm:
+The easiest way to get the latest version of React Flow is to install it via npm, yarn or pnpm:
 
 ```bash
 npm install reactflow
@@ -64,16 +64,16 @@ function Flow({ nodes, edges, onNodesChange, onEdgesChange, onConnect }) {
 
 ## Development
 
-Before you can start developing please make sure that you have yarn classic installed (`npm i -g yarn`). Then install the dependencies using yarn: `yarn`.
+Before you can start developing please make sure that you have [pnpm](https://pnpm.io/) installed (`npm i -g pnpm`). Then install the dependencies using pnpm: `pnpm install`.
 
-For local development, you can use `yarn dev`. This will run preconstruct and build all the packages.
+For local development, you can use `pnpm dev`.
 
 ## Testing
 
-Testing is done with cypress. You can find the tests in the [`integration/flow`](/cypress/integration/flow) folder. In order to run the tests do:
+Testing is done with cypress. You can find the tests in the [`examples/cypress`](/examples/cypress/) folder. In order to run the tests do:
 
 ```sh
-npm run test
+pnpm test
 ```
 
 ## Maintainers
@@ -93,7 +93,7 @@ You can also use our [contact form](https://pro.reactflow.dev/contact) or join t
 
 ## Credits
 
-React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in your browser. Under the hood, React Flow depends on these great libraries:
+React Flow was initially developed for [datablocks](https://datablocks.pro), a graph-based editor for transforming, analyzing and visualizing data in the browser. Under the hood, React Flow depends on these great libraries:
 
 - [d3-zoom](https://github.com/d3/d3-zoom) - used for zoom, pan and drag interactions with the graph canvas
 - [d3-drag](https://github.com/d3/d3-drag) - used for making the nodes draggable

examples/nextjs/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

examples/nextjs/.gitignore

@@ -1,32 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel

examples/nextjs/.prettierrc.json

@@ -1,5 +0,0 @@
-{
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "printWidth": 120
-}

examples/nextjs/CHANGELOG.md

@@ -1,8 +0,0 @@
-# react-flow-examples
-
-## 0.0.1-next.0
-
-### Patch Changes
-
-- Updated dependencies []:
-  - reactflow@11.0.0-next.0

examples/nextjs/README.md

@@ -1,34 +0,0 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/cypress/support/component-index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-    <!-- Used by Next.js to inject CSS. -->
-    <div id="__next_css__DO_NOT_USE__"></div>
-  </head>
-  <body>
-    <div data-cy-root id="root"></div>
-  </body>
-</html>

examples/nextjs/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs/next.config.js

@@ -1,16 +0,0 @@
-const withPreconstruct = require('@preconstruct/next');
-const { patchWebpackConfig } = require('next-global-css');
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-  webpack: (config, options) => {
-    if (process.env.CYPRESS === 'true') {
-      //Allows importing the global.css file in cypress/support/component.ts
-      patchWebpackConfig(config, options);
-    }
-    return config;
-  },
-};
-
-module.exports = withPreconstruct({ ...nextConfig });

examples/nextjs/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "reactflow-examples",
-  "version": "0.0.0",
-  "private": true,
-  "license": "MIT",
-  "scripts": {
-    "dev": "next dev",
-    "copystyles": "cp ../../node_modules/reactflow/dist/style.css ./styles/rf-style.css && cp ../../node_modules/reactflow/dist/base.css ./styles/rf-base.css",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "cypress": "cypress"
-  },
-  "dependencies": {
-    "@preconstruct/next": "^4.0.0",
-    "dagre": "^0.8.5",
-    "localforage": "^1.10.0",
-    "next": "12.2.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "reactflow": "workspace:*"
-  },
-  "devDependencies": {
-    "@cypress/skip-test": "^2.6.1",
-    "@types/dagre": "^0.7.47",
-    "cypress": "^10.6.0",
-    "cypress-real-events": "^1.7.1",
-    "eslint": "^8.22.0",
-    "eslint-config-next": "12.2.2",
-    "next-global-css": "^1.3.1",
-    "postcss": "^8.4.16",
-    "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.1.0",
-    "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.7.2",
-    "tsconfig": "*",
-    "webpack": "^5.74.0"
-  }
-}

examples/nextjs/pages/_app.tsx

@@ -1,77 +0,0 @@
-import React, { ChangeEventHandler } from 'react';
-import { useRouter } from 'next/router';
-import { AppProps } from 'next/app';
-
-import '../styles/globals.css';
-
-// Unfortunately this doesn't work because preconsruct clears the dist folder and there is
-// no way to hook into the watch process to copy the files back to the dist folder
-// import '@reactflow/core/dist/theme-default.css';
-
-// this is a workaround for testing the theme. See explanation above.
-import '../styles/rf-style.css';
-
-const routes = [
-  '/',
-  '/Backgrounds',
-  '/ControlledUncontrolled',
-  '/CustomConnectionLine',
-  '/CustomNode',
-  '/DefaultNodes',
-  '/DragHandle',
-  '/DragNDrop',
-  '/EdgeRouting',
-  '/EdgeTypes',
-  '/Edges',
-  '/Empty',
-  '/FloatingEdges',
-  '/Hidden',
-  '/Interaction',
-  '/Layouting',
-  '/MultiFlows',
-  '/NestedNodes',
-  '/NodeTypeChange',
-  '/NodeTypesObjectChange',
-  '/Overview',
-  '/Provider',
-  '/SaveRestore',
-  '/Stress',
-  '/Subflow',
-  '/Switch',
-  '/TouchDevice',
-  '/Undirectional',
-  '/UpdatableEdge',
-  '/UpdateNode',
-  '/UseKeyPress',
-  '/UseReactFlow',
-  '/UseUpdateNodeInternals',
-  '/Validation',
-];
-
-function App({ Component, pageProps }: AppProps) {
-  const router = useRouter();
-
-  const onRouteChange: ChangeEventHandler<HTMLSelectElement> = (evt) => {
-    router.push(evt.target.value);
-  };
-
-  return (
-    <>
-      <header>
-        <a className="logo" href="https://github.com/wbkd/react-flow">
-          React Flow Dev
-        </a>
-        <select defaultValue={router.pathname} onChange={onRouteChange}>
-          {routes.map((route) => (
-            <option value={route} key={route}>
-              {route === '/' ? 'Basic' : route.substring(1, route.length)}
-            </option>
-          ))}
-        </select>
-      </header>
-      <Component {...pageProps} />
-    </>
-  );
-}
-
-export default App;

examples/nextjs/postcss.config.json

@@ -1,19 +0,0 @@
-{
-  "plugins": [
-    "postcss-nested",
-    "postcss-import",
-    "postcss-flexbugs-fixes",
-    [
-      "postcss-preset-env",
-      {
-        "autoprefixer": {
-          "flexbox": "no-2009"
-        },
-        "stage": 3,
-        "features": {
-          "custom-properties": false
-        }
-      }
-    ]
-  ]
-}

examples/nextjs/styles/Home.module.css

@@ -1,3 +0,0 @@
-.container {
-  position: relative;
-}

examples/nextjs/styles/rf-base.css

@@ -1,254 +0,0 @@
-/* this will be exported as base.css and can be used for a basic styling */
-/* these are the necessary styles for React Flow, they get used by base.css and style.css */
-.react-flow__container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.react-flow__pane {
-  z-index: 1;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-.react-flow__pane.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-.react-flow__viewport {
-  transform-origin: 0 0;
-  z-index: 2;
-  pointer-events: none;
-}
-.react-flow__renderer {
-  z-index: 4;
-}
-.react-flow__selectionpane {
-  z-index: 5;
-}
-.react-flow__nodesselection-rect:focus,
-.react-flow__nodesselection-rect:focus-visible {
-  outline: none;
-}
-.react-flow .react-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-.react-flow__edge-path,
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-  fill: none;
-}
-.react-flow__edge {
-  pointer-events: visibleStroke;
-  cursor: pointer;
-}
-.react-flow__edge.animated path {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-            animation: dashdraw 0.5s linear infinite;
-  }
-.react-flow__edge.inactive {
-    pointer-events: none;
-  }
-.react-flow__edge.selected,
-  .react-flow__edge:focus,
-  .react-flow__edge:focus-visible {
-    outline: none;
-  }
-.react-flow__edge.selected .react-flow__edge-path,
-  .react-flow__edge:focus .react-flow__edge-path,
-  .react-flow__edge:focus-visible .react-flow__edge-path {
-    stroke: #555;
-  }
-.react-flow__edge-textwrapper {
-    pointer-events: all;
-  }
-.react-flow__edge-textbg {
-    fill: white;
-  }
-.react-flow__edge .react-flow__edge-text {
-    pointer-events: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-.react-flow__connection {
-  pointer-events: none;
-}
-.react-flow__connection.animated {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-            animation: dashdraw 0.5s linear infinite;
-  }
-.react-flow__connectionline {
-  z-index: 1001;
-}
-.react-flow__nodes {
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-.react-flow__node {
-  position: absolute;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  background-color: white;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-.react-flow__node.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-.react-flow__nodesselection {
-  z-index: 3;
-  transform-origin: left top;
-  pointer-events: none;
-}
-.react-flow__nodesselection-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-.react-flow__handle {
-  position: absolute;
-  pointer-events: none;
-  min-width: 5px;
-  min-height: 5px;
-  background-color: #333;
-}
-.react-flow__handle.connectable {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-.react-flow__handle-bottom {
-    top: auto;
-    left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
-  }
-.react-flow__handle-top {
-    left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
-  }
-.react-flow__handle-left {
-    top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
-  }
-.react-flow__handle-right {
-    right: -4px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-.react-flow__edgeupdater {
-  cursor: move;
-  pointer-events: all;
-}
-.react-flow__panel {
-  position: absolute;
-  z-index: 1000;
-  margin: 15px;
-}
-.react-flow__panel.top {
-    top: 0;
-  }
-.react-flow__panel.bottom {
-    bottom: 0;
-  }
-.react-flow__panel.left {
-    left: 0;
-  }
-.react-flow__panel.right {
-    right: 0;
-  }
-.react-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-.react-flow__attribution {
-  font-size: 10px;
-  background: rgba(255, 255, 255, 0.5);
-  padding: 2px 3px;
-  margin: 0;
-}
-.react-flow__attribution a {
-    text-decoration: none;
-    color: #999;
-  }
-@-webkit-keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
-}
-.react-flow__node-default.selected,
-  .react-flow__node-default:focus,
-  .react-flow__node-default:focus-visible,
-  .react-flow__node-input.selected,
-  .react-flow__node-input:focus,
-  .react-flow__node-input:focus-visible,
-  .react-flow__node-output.selected,
-  .react-flow__node-output:focus,
-  .react-flow__node-output:focus-visible,
-  .react-flow__node-group.selected,
-  .react-flow__node-group:focus,
-  .react-flow__node-group:focus-visible {
-    outline: none;
-    border: 1px solid #555;
-  }
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-.react-flow__controls-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    padding: 5px;
-  }
-.react-flow__controls-button:hover {
-      background: #f4f4f4;
-    }
-.react-flow__controls-button svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-.react-flow__minimap {
-  background-color: #fff;
-}

examples/nextjs/styles/rf-style.css

@@ -1,283 +0,0 @@
-/* this gets exported as style.css and can be used for the default theming */
-/* these are the necessary styles for React Flow, they get used by base.css and style.css */
-.react-flow__container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-.react-flow__pane {
-  z-index: 1;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-.react-flow__pane.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-.react-flow__viewport {
-  transform-origin: 0 0;
-  z-index: 2;
-  pointer-events: none;
-}
-.react-flow__renderer {
-  z-index: 4;
-}
-.react-flow__selectionpane {
-  z-index: 5;
-}
-.react-flow__nodesselection-rect:focus,
-.react-flow__nodesselection-rect:focus-visible {
-  outline: none;
-}
-.react-flow .react-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-.react-flow__edge-path,
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-  fill: none;
-}
-.react-flow__edge {
-  pointer-events: visibleStroke;
-  cursor: pointer;
-}
-.react-flow__edge.animated path {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-            animation: dashdraw 0.5s linear infinite;
-  }
-.react-flow__edge.inactive {
-    pointer-events: none;
-  }
-.react-flow__edge.selected,
-  .react-flow__edge:focus,
-  .react-flow__edge:focus-visible {
-    outline: none;
-  }
-.react-flow__edge.selected .react-flow__edge-path,
-  .react-flow__edge:focus .react-flow__edge-path,
-  .react-flow__edge:focus-visible .react-flow__edge-path {
-    stroke: #555;
-  }
-.react-flow__edge-textwrapper {
-    pointer-events: all;
-  }
-.react-flow__edge-textbg {
-    fill: white;
-  }
-.react-flow__edge .react-flow__edge-text {
-    pointer-events: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-.react-flow__connection {
-  pointer-events: none;
-}
-.react-flow__connection.animated {
-    stroke-dasharray: 5;
-    -webkit-animation: dashdraw 0.5s linear infinite;
-            animation: dashdraw 0.5s linear infinite;
-  }
-.react-flow__connectionline {
-  z-index: 1001;
-}
-.react-flow__nodes {
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-.react-flow__node {
-  position: absolute;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  background-color: white;
-  cursor: -webkit-grab;
-  cursor: grab;
-}
-.react-flow__node.dragging {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-  }
-.react-flow__nodesselection {
-  z-index: 3;
-  transform-origin: left top;
-  pointer-events: none;
-}
-.react-flow__nodesselection-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: -webkit-grab;
-    cursor: grab;
-  }
-.react-flow__handle {
-  position: absolute;
-  pointer-events: none;
-  min-width: 5px;
-  min-height: 5px;
-  width: 6px;
-  height: 6px;
-  background: #1a192b;
-  border: 1px solid white;
-  border-radius: 100%;
-}
-.react-flow__handle.connectable {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-.react-flow__handle-bottom {
-    top: auto;
-    left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
-  }
-.react-flow__handle-top {
-    left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
-  }
-.react-flow__handle-left {
-    top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
-  }
-.react-flow__handle-right {
-    right: -4px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-.react-flow__edgeupdater {
-  cursor: move;
-  pointer-events: all;
-}
-.react-flow__panel {
-  position: absolute;
-  z-index: 1000;
-  margin: 15px;
-}
-.react-flow__panel.top {
-    top: 0;
-  }
-.react-flow__panel.bottom {
-    bottom: 0;
-  }
-.react-flow__panel.left {
-    left: 0;
-  }
-.react-flow__panel.right {
-    right: 0;
-  }
-.react-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-.react-flow__attribution {
-  font-size: 10px;
-  background: rgba(255, 255, 255, 0.5);
-  padding: 2px 3px;
-  margin: 0;
-}
-.react-flow__attribution a {
-    text-decoration: none;
-    color: #999;
-  }
-@-webkit-keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-.react-flow__edge.updating .react-flow__edge-path {
-      stroke: #777;
-    }
-.react-flow__edge-text {
-    font-size: 10px;
-  }
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-}
-.react-flow__node-default.selectable:hover, .react-flow__node-input.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
-      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-    }
-.react-flow__node-default.selectable.selected,
-    .react-flow__node-default.selectable:focus,
-    .react-flow__node-default.selectable:focus-visible,
-    .react-flow__node-input.selectable.selected,
-    .react-flow__node-input.selectable:focus,
-    .react-flow__node-input.selectable:focus-visible,
-    .react-flow__node-output.selectable.selected,
-    .react-flow__node-output.selectable:focus,
-    .react-flow__node-output.selectable:focus-visible,
-    .react-flow__node-group.selectable.selected,
-    .react-flow__node-group.selectable:focus,
-    .react-flow__node-group.selectable:focus-visible {
-      box-shadow: 0 0 0 0.5px #1a192b;
-      outline: none;
-    }
-.react-flow__node-group {
-  background: rgba(240, 240, 240, 0.25);
-  border-color: #1a192b;
-}
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-}
-.react-flow__nodesselection-rect:focus,
-  .react-flow__nodesselection-rect:focus-visible,
-  .react-flow__selection:focus,
-  .react-flow__selection:focus-visible {
-    outline: none;
-  }
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-}
-.react-flow__controls-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-    padding: 5px;
-  }
-.react-flow__controls-button:hover {
-      background: #f4f4f4;
-    }
-.react-flow__controls-button svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-.react-flow__minimap {
-  background-color: #fff;
-}

examples/nextjs/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "tsconfig/base.json",
-  "display": "ReactFlow - Examples",
-  "compilerOptions": {
-    "allowJs": true,
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
-    "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "target": "es5",
-    "types": ["cypress", "cypress-real-events"]
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
-}

examples/vite-app/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vite-app/cypress.config.ts

@@ -1,17 +1,16 @@
-const { defineConfig } = require('cypress');
+import { defineConfig } from 'cypress';
 
-module.exports = defineConfig({
+export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:5173',
     viewportWidth: 1280,
     viewportHeight: 720,
     video: false,
   },
-
   component: {
     devServer: {
-      framework: 'next',
-      bundler: 'webpack',
+      framework: 'react',
+      bundler: 'vite',
     },
     screenshotOnRunFailure: false,
     video: false,

examples/vite-app/cypress/components/hooks/useEdges.cy.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import ReactFlow, { Edge, useEdges } from 'reactflow';
 
 import { nodes as initialNodes, edges as initialEdges } from '../../fixtures/simpleflow';

examples/vite-app/cypress/support/component-index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <style>
+      html,
+      body,
+      #root {
+        margin: 0;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div data-cy-root id="root"></div>
+  </body>
+</html>

examples/vite-app/cypress/support/component.ts

@@ -8,8 +8,7 @@ import 'cypress-real-events/support';
 import { mount } from 'cypress/react18';
 import { XYPosition } from 'reactflow';
 
-import '../../styles/globals.css';
-import '../../styles/rf-style.css';
+import 'reactflow/dist/style.css';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

examples/vite-app/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

examples/vite-app/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "vite-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "test": "pnpm test-component",
+    "test-component": "cypress run --component",
+    "test-e2e": "vite serve & cypress run --e2e"
+  },
+  "dependencies": {
+    "dagre": "^0.8.5",
+    "localforage": "^1.10.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0",
+    "reactflow": "workspace:*"
+  },
+  "devDependencies": {
+    "@cypress/skip-test": "^2.6.1",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.1.0",
+    "cypress": "^10.6.0",
+    "cypress-real-events": "^1.7.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.1.0"
+  }
+}

examples/vite-app/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

examples/vite-app/src/App/index.tsx

@@ -0,0 +1,194 @@
+import { ChangeEvent } from 'react';
+import { BrowserRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+
+import Basic from '../examples/Basic';
+import ControlledUncontrolled from '../examples/ControlledUncontrolled';
+import CustomConnectionLine from '../examples/CustomConnectionLine';
+import CustomNode from '../examples/CustomNode';
+import DefaultNodes from '../examples/DefaultNodes';
+import DragHandle from '../examples/DragHandle';
+import DragNDrop from '../examples/DragNDrop';
+import Edges from '../examples/Edges';
+import EdgeTypes from '../examples/EdgeTypes';
+import Empty from '../examples/Empty';
+import FloatingEdges from '../examples/FloatingEdges';
+import Hidden from '../examples/Hidden';
+import Interaction from '../examples/Interaction';
+import Layouting from '../examples/Layouting';
+import MultiFlows from '../examples/MultiFlows';
+import NestedNodes from '../examples/NestedNodes';
+import NodeTypeChange from '../examples/NodeTypeChange';
+import NodeTypesObjectChange from '../examples/NodeTypesObjectChange';
+import Overview from '../examples/Overview';
+import Provider from '../examples/Provider';
+import SaveRestore from '../examples/SaveRestore';
+import Stress from '../examples/Stress';
+import Subflow from '../examples/Subflow';
+import SwitchFlow from '../examples/Switch';
+import TouchDevice from '../examples/TouchDevice';
+import Undirectional from '../examples/Undirectional';
+import UpdatableEdge from '../examples/UpdatableEdge';
+import UpdateNode from '../examples/UpdateNode';
+import UseUpdateNodeInternals from '../examples/UseUpdateNodeInternals';
+import UseReactFlow from '../examples/UseReactFlow';
+import Validation from '../examples/Validation';
+import UseKeyPress from '../examples/UseKeyPress';
+
+const routes = [
+  {
+    path: '/',
+    component: Basic,
+  },
+  {
+    path: '/default-nodes',
+    component: DefaultNodes,
+  },
+  {
+    path: '/custom-connectionline',
+    component: CustomConnectionLine,
+  },
+  {
+    path: '/custom-node',
+    component: CustomNode,
+  },
+  {
+    path: '/draghandle',
+    component: DragHandle,
+  },
+  {
+    path: '/dragndrop',
+    component: DragNDrop,
+  },
+  {
+    path: '/edges',
+    component: Edges,
+  },
+  {
+    path: '/edge-types',
+    component: EdgeTypes,
+  },
+  {
+    path: '/empty',
+    component: Empty,
+  },
+  {
+    path: '/floating-edges',
+    component: FloatingEdges,
+  },
+  {
+    path: '/hidden',
+    component: Hidden,
+  },
+  {
+    path: '/interaction',
+    component: Interaction,
+  },
+  {
+    path: '/layouting',
+    component: Layouting,
+  },
+  {
+    path: '/multiflows',
+    component: MultiFlows,
+  },
+  {
+    path: '/nested-nodes',
+    component: NestedNodes,
+  },
+  {
+    path: '/nodetype-change',
+    component: NodeTypeChange,
+  },
+  {
+    path: '/nodetypesobject-change',
+    component: NodeTypesObjectChange,
+  },
+  {
+    path: '/provider',
+    component: Provider,
+  },
+  {
+    path: '/save-restore',
+    component: SaveRestore,
+  },
+  {
+    path: '/stress',
+    component: Stress,
+  },
+  {
+    path: '/subflow',
+    component: Subflow,
+  },
+  {
+    path: '/switch',
+    component: SwitchFlow,
+  },
+  {
+    path: '/touch-device',
+    component: TouchDevice,
+  },
+  {
+    path: '/undirectional',
+    component: Undirectional,
+  },
+  {
+    path: '/updatable-edge',
+    component: UpdatableEdge,
+  },
+  {
+    path: '/update-node',
+    component: UpdateNode,
+  },
+  {
+    path: '/usereactflow',
+    component: UseReactFlow,
+  },
+  {
+    path: '/useupdatenodeinternals',
+    component: UseUpdateNodeInternals,
+  },
+  {
+    path: '/validation',
+    component: Validation,
+  },
+  {
+    path: '/controlled-uncontrolled',
+    component: ControlledUncontrolled,
+  },
+  {
+    path: '/use-key-press',
+    component: UseKeyPress,
+  },
+];
+
+const Header = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const onChange = (event: ChangeEvent<HTMLSelectElement>) => navigate(event.target.value);
+
+  return (
+    <header>
+      <a className="logo" href="https://github.com/wbkd/react-flow">
+        React Flow Dev
+      </a>
+      <select defaultValue={location.pathname} onChange={onChange}>
+        {routes.map((route) => (
+          <option value={route.path} key={route.path}>
+            {route.path === '/' ? 'overview' : route.path.substring(1, route.path.length)}
+          </option>
+        ))}
+      </select>
+    </header>
+  );
+};
+
+export default () => (
+  <BrowserRouter>
+    <Header />
+    <Routes>
+      {routes.map((route) => (
+        <Route path={route.path} key={route.path} element={<route.component />} />
+      ))}
+    </Routes>
+  </BrowserRouter>
+);

examples/vite-app/src/examples/Overview/index.tsx

@@ -45,7 +45,7 @@ const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge m
 const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
 const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
 const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
-const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX);
+const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX, e.clientY);
 
 const initialNodes: Node[] = [
   {