feat(docs): Initial commit for docs in nuxt 3

.eslintrc.js

@@ -1,4 +1,5 @@
 const baseRules = {
+  '@typescript-eslint/triple-slash-reference': 0,
   'no-console': 0,
   'vue/valid-v-slot': [
     'error',

docs/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+*.log
+.nuxt
+nuxt.d.ts
+.output

docs/README.md

@@ -0,0 +1,29 @@
+# Nuxt 3 Minimal Starter
+
+We recommend to look at the [documentation](https://v3.nuxtjs.org).
+
+## Setup
+
+Make sure to install the dependencies
+
+```bash
+yarn install
+```
+
+## Development
+
+Start the development server on http://localhost:3000
+
+```bash
+yarn dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+yarn build
+```
+
+Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment).

docs/app.vue

@@ -0,0 +1,15 @@
+<template>
+  <NuxtLayout name="default">
+    <Header />
+    <div class="h-full flex flex-row">
+      <Sidebar />
+      <div id="vue-flow-docs" class="flex-1">
+        <NuxtPage />
+      </div>
+    </div>
+  </NuxtLayout>
+</template>
+<style>
+@import 'assets/index.css';
+@import 'node_modules/@braks/vue-flow/dist/style.css';
+</style>

docs/assets/index.css

@@ -0,0 +1,101 @@
+#root,
+#__nuxt {
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+html,
+body,
+#root,
+#__nuxt {
+  margin: 0;
+  height: 100%;
+  color: #111;
+}
+
+#__nuxt {
+  position: relative;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-image: url('./polygon-scatter.svg');
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  font-weight: 700;
+}
+
+.logo {
+  text-decoration: none;
+  display: block;
+  line-height: 1;
+}
+
+header a:hover {
+  color: whitesmoke;
+}
+
+header select {
+  margin-left: 1em;
+}
+
+.overview-example__add {
+  display: none;
+}
+
+.vue-flow__node a {
+  font-weight: 700;
+  color: #111;
+}
+
+.vue-flow__node.dark-node {
+  background: #0041d0;
+  color: #f8f8f8;
+}
+
+.vue-flow__node.dark {
+  background: #557;
+  color: #f8f8f8;
+}
+
+.vue-flow__node-selectorNode {
+  font-size: 14px;
+  background: #f0f2f3;
+  border: 1px solid #555;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.vue-flow__node-selectorNode .vue-flow__handle {
+  border-color: #f0f2f3;
+}
+
+@media screen and (min-width: 768px) {
+  .overview-example__add {
+    display: block;
+  }
+}
+
+.edgebutton {
+  border-radius: 999px;
+  cursor: pointer;
+}
+.edgebutton:hover {
+  box-shadow: 0 0 0 2px pink , 0 0 0 4px #f05f75;
+}
+
+#vue-flow-docs {
+  height: 100%;
+  margin:0;
+  background: #fff;
+}

docs/assets/polygon-scatter.svg

@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 960 540" width="960" height="540" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect width="960" height="540" fill="#31475e"></rect><g><g transform="translate(57 45)"><path d="M0 -106.9L83.6 -66.7L104.2 23.8L46.4 96.3L-46.4 96.3L-104.2 23.8L-83.6 -66.7Z" fill="#3fb984"></path></g><g transform="translate(708 88)"><path d="M0 -66L51.6 -41.2L64.3 14.7L28.6 59.5L-28.6 59.5L-64.3 14.7L-51.6 -41.2Z" fill="#3fb984"></path></g><g transform="translate(823 510)"><path d="M0 -77L60.2 -48L75.1 17.1L33.4 69.4L-33.4 69.4L-75.1 17.1L-60.2 -48Z" fill="#3fb984"></path></g><g transform="translate(896 280)"><path d="M0 -45L35.2 -28.1L43.9 10L19.5 40.5L-19.5 40.5L-43.9 10L-35.2 -28.1Z" fill="#3fb984"></path></g><g transform="translate(287 458)"><path d="M0 -58L45.3 -36.2L56.5 12.9L25.2 52.3L-25.2 52.3L-56.5 12.9L-45.3 -36.2Z" fill="#3fb984"></path></g><g transform="translate(12 380)"><path d="M0 -101L79 -63L98.5 22.5L43.8 91L-43.8 91L-98.5 22.5L-79 -63Z" fill="#3fb984"></path></g><g transform="translate(609 440)"><path d="M0 -60L46.9 -37.4L58.5 13.4L26 54.1L-26 54.1L-58.5 13.4L-46.9 -37.4Z" fill="#3fb984"></path></g><g transform="translate(457 42)"><path d="M0 -81L63.3 -50.5L79 18L35.1 73L-35.1 73L-79 18L-63.3 -50.5Z" fill="#3fb984"></path></g></g></svg>

docs/components/Header.vue

@@ -0,0 +1,16 @@
+<template>
+  <header class="flex items-center py-4 px-8 text-white">
+    <div class="flex flex-col">
+      <a class="logo text-xl" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow </a>
+      <span class="text-xs text-gray-800 mt-2"
+        >An open source library by <a href="https://github.com/bcakmakoglu/bcakmakoglu">Braks</a> <br />
+        Based on <a href="https://reactflow.dev">React Flow</a>
+      </span>
+    </div>
+    <div class="flex-1">Docs</div>
+    <div class="flex-1">
+      <router-link to="/examples"> Examples </router-link>
+    </div>
+    <div class="flex-1">Github</div>
+  </header>
+</template>

docs/components/Sidebar.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup></script>
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane on the left.</div>
+    <slot></slot>
+  </aside>
+</template>
+<style>
+aside {
+  border-right: 1px solid #eee;
+  padding: 15px 10px;
+  background: #fff;
+  height: 100%; /* Full-height: remove this if you want "auto" height */
+  width: 280px; /* Set the width of the sidebar */
+  overflow-x: hidden; /* Disable horizontal scroll */
+}
+</style>

docs/layouts/default.vue

@@ -0,0 +1,4 @@
+<script lang="ts" setup></script>
+<template>
+  <slot></slot>
+</template>

docs/nuxt.config.ts

@@ -0,0 +1,11 @@
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  meta: {
+    title: 'Vue Flow',
+    description: 'Vue Flow Documentation',
+  },
+  target: 'client',
+  ssr: false,
+  buildModules: ['nuxt-windicss'],
+})

docs/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@braks/vue-flow": "link:..",
+    "@pinia/nuxt": "^0.0.9",
+    "add": "^2.0.6",
+    "pinia": "^2.0.0-rc.14"
+  },
+  "devDependencies": {
+    "nuxt-windicss": "^2.0.4",
+    "nuxt3": "latest"
+  }
+}

docs/pages/examples/basic.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import Flow, {
+  MiniMap,
+  Controls,
+  Background,
+  Connection,
+  Edge,
+  Elements,
+  FlowElement,
+  FlowInstance,
+  addEdge,
+  isNode,
+  removeElements,
+  Node,
+} from '@braks/vue-flow'
+
+const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
+const onElementClick = ({ node }: { node: Node }) => console.log('click', node)
+const elements = ref<Elements>([
+  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
+  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
+  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
+  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+const rfInstance = ref<FlowInstance | null>(null)
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+const onConnect = (params: Edge | Connection) => (elements.value = addEdge(params, elements.value))
+const onLoad = (flowInstance: FlowInstance) => {
+  flowInstance.fitView({ padding: 0.1 })
+  rfInstance.value = flowInstance
+}
+
+const updatePos = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) {
+      el.position = {
+        x: Math.random() * 400,
+        y: Math.random() * 400,
+      }
+    }
+    return el
+  })
+}
+
+const logToObject = () => console.log(rfInstance.value?.toObject())
+const resetTransform = () => rfInstance.value?.setTransform({ x: 0, y: 0, zoom: 1 })
+
+const toggleClassnames = () => {
+  elements.value = elements.value.map((el: FlowElement) => {
+    if (isNode(el)) el.class = el.class === 'light' ? 'dark' : 'light'
+    return el
+  })
+}
+</script>
+<template>
+  <Flow
+    class="vue-flow-basic-example"
+    :elements="elements"
+    :default-zoom="1.5"
+    :min-zoom="0.2"
+    :max-zoom="4"
+    @elements-remove="onElementsRemove"
+    @connect="onConnect"
+    @node-drag-stop="onNodeDragStop"
+    @node-click="onElementClick"
+    @elementClick="onElementClick"
+    @load="onLoad"
+  >
+    <MiniMap />
+    <Controls />
+    <Background color="#aaa" :gap="8" />
+    <div style="position: absolute; right: 10px; top: 10px; z-index: 4">
+      <button style="margin-right: 5px" @click="resetTransform">reset transform</button>
+      <button style="margin-right: 5px" @click="updatePos">change pos</button>
+      <button style="margin-right: 5px" @click="toggleClassnames">toggle classnames</button>
+      <button @click="logToObject">toObject</button>
+    </div>
+  </Flow>
+</template>

docs/pages/examples/index.vue

@@ -0,0 +1,171 @@
+<script lang="ts" setup>
+import { CSSProperties } from 'vue'
+import Flow, {
+  removeElements,
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  isNode,
+  Node,
+  Elements,
+  FlowElement,
+  FlowInstance,
+  FlowTransform,
+  SnapGrid,
+  ArrowHeadType,
+  Connection,
+  Edge,
+} from '@braks/vue-flow'
+
+const onNodeDragStart = (node: Node) => console.log('drag start', node)
+const onNodeDrag = (node: Node) => console.log('drag', node)
+const onNodeDragStop = (node: Node) => console.log('drag stop', node)
+const onNodeDoubleClick = (node: Node) => console.log('node double click', node)
+const onPaneClick = (event: MouseEvent) => console.log('pane click', event)
+const onPaneScroll = (event?: MouseEvent) => console.log('pane scroll', event)
+const onPaneContextMenu = (event: MouseEvent) => console.log('pane context menu', event)
+const onSelectionDrag = (nodes: Node[]) => console.log('selection drag', nodes)
+const onSelectionDragStart = (nodes: Node[]) => console.log('selection drag start', nodes)
+const onSelectionDragStop = (nodes: Node[]) => console.log('selection drag stop', nodes)
+const onSelectionContextMenu = (event: MouseEvent, nodes: Node[]) => {
+  event.preventDefault()
+  console.log('selection context menu', nodes)
+}
+const onElementClick = (element: FlowElement) => console.log(`${isNode(element) ? 'node' : 'edge'} click:`, element)
+const onSelectionChange = (elements: Elements | null) => console.log('selection change', elements)
+const onLoad = (flowInstance: FlowInstance) => {
+  console.log('flow loaded:', flowInstance)
+  flowInstance.fitView()
+}
+
+const onMoveEnd = (transform?: FlowTransform) => console.log('zoom/move end', transform)
+const onEdgeContextMenu = (edge: Edge) => console.log('edge context menu', edge)
+const onEdgeMouseEnter = (edge: Edge) => console.log('edge mouse enter', edge)
+const onEdgeMouseMove = (edge: Edge) => console.log('edge mouse move', edge)
+const onEdgeMouseLeave = (edge: Edge) => console.log('edge mouse leave', edge)
+const onEdgeDoubleClick = (edge: Edge) => console.log('edge double click', edge)
+
+const initialElements: Elements = [
+  {
+    id: '1',
+    type: 'input',
+    data: {
+      label: 'Welcome to <strong>Vue Flow!</strong>',
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: '2',
+    data: {
+      label: 'This is a <strong>default node</strong>',
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: '3',
+    data: {
+      label: 'This one has a <strong>custom style</strong>',
+    },
+    position: { x: 400, y: 100 },
+    style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
+  },
+  {
+    id: '4',
+    position: { x: 250, y: 200 },
+    data: {
+      label: `You can find the docs on
+          <a href="https://github.com/bcakmakoglu/vue-flow" target="_blank" rel="noopener noreferrer">
+            Github
+          </a>`,
+    },
+  },
+  {
+    id: '5',
+    data: {
+      label: 'Or check out the other <strong>examples</strong>',
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: '6',
+    type: 'output',
+    data: {
+      label: 'An <strong>output node</strong>',
+    },
+    position: { x: 100, y: 480 },
+  },
+  { id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
+  { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+  { id: 'e1-3', source: '1', target: '3' },
+  { id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
+  { id: 'e4-5', source: '4', target: '5', arrowHeadType: ArrowHeadType.Arrow, label: 'edge with arrow head' },
+  { id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
+  {
+    id: 'e5-7',
+    source: '5',
+    target: '7',
+    type: 'step',
+    style: { stroke: '#f6ab6c' },
+    label: 'a step edge',
+    animated: true,
+    labelStyle: { fill: '#f6ab6c', fontWeight: 700 },
+  },
+]
+
+const connectionLineStyle: CSSProperties = { stroke: '#ddd' }
+const snapGrid: SnapGrid = [16, 16]
+
+const nodeStrokeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'output') return '#ff0072'
+  if (n.type === 'default') return '#1a192b'
+
+  return '#eee'
+}
+
+const nodeColor = (n: Node): string => {
+  if (n.style?.background) return n.style.background as string
+
+  return '#fff'
+}
+
+const elements = ref<Elements>(initialElements)
+const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))
+const onElementsRemove = (elementsToRemove: Elements) => (elements.value = removeElements(elementsToRemove, elements.value))
+</script>
+<template>
+  <Flow
+    :elements="elements"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    @element-click="onElementClick"
+    @elements-remove="onElementsRemove"
+    @eonnect="onConnect"
+    @pane-click="onPaneClick"
+    @pane-scroll="onPaneScroll"
+    @pane-contex-menu="onPaneContextMenu"
+    @node-drag-start="onNodeDragStart"
+    @node-drag="onNodeDrag"
+    @node-drag-stop="onNodeDragStop"
+    @node-double-click="onNodeDoubleClick"
+    @selection-drag-start="onSelectionDragStart"
+    @selection-drag="onSelectionDrag"
+    @selection-drag-stop="onSelectionDragStop"
+    @selection-context-menu="onSelectionContextMenu"
+    @selection-change="onSelectionChange"
+    @move-end="onMoveEnd"
+    @load="onLoad"
+    @edge-context-menu="onEdgeContextMenu"
+    @edge-mouse-enter="onEdgeMouseEnter"
+    @edge-mouse-move="onEdgeMouseMove"
+    @edge-mouse-leave="onEdgeMouseLeave"
+    @edge-double-click="onEdgeDoubleClick"
+  >
+    <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
+    <Controls />
+    <Background color="#aaa" gap="20" />
+  </Flow>
+</template>

docs/pages/index.vue

@@ -0,0 +1,6 @@
+<script lang="ts" setup></script>
+<template>
+  <div class="flex justify-center items-center h-full">
+    <h1 class="text-5xl">Vue Flow</h1>
+  </div>
+</template>

docs/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json",
+}

examples/Stress/StressExample.vue

@@ -21,7 +21,7 @@ const onLoad = (flowInstance: FlowInstance) => {
   console.log(flowInstance.getElements())
 }
 
-const initialElements: Elements = getElements(30, 30)
+const initialElements: Elements = getElements(10, 10)
 const elements = ref(initialElements)
 
 const onConnect = (params: Connection | Edge) => (elements.value = addEdge(params, elements.value))

package.json

@@ -7,32 +7,30 @@
     "url": "https://github.com/bcakmakoglu/vue-flow"
   },
   "license": "MIT",
-  "author": "Burak Cakmakoglu",
+  "author": "Burak Cakmakoglu<brainbraks@googlemail.com>",
   "exports": {
     ".": {
-      "import": "./dist/vue-flow.esm.js",
+      "import": "./dist/vue-flow.es.js",
-      "require": "./dist/vue-flow.cjs.js"
+      "require": "./dist/vue-flow.umd.js"
     },
     "./*": "./*"
   },
-  "main": "./dist/vue-flow.cjs.js",
+  "main": "./dist/vue-flow.umd.js",
-  "types": "./dist/vue-flow.d.ts",
+  "types": "./dist/index.d.ts",
-  "module": "./dist/vue-flow.esm.js",
+  "module": "./dist/vue-flow.es.js",
-  "unpkg": "./dist/vue-flow.iife.min.js",
+  "unpkg": "./dist/vue-flow.umd.js",
-  "jsdelivr": "./dist/vue-flow.iife.min.js",
+  "jsdelivr": "./dist/vue-flow.umd.js",
-  "sideEffects": false,
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "vue-tsc --noEmit && vite",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "vite build && vue-dts-gen \"./src/**/*.{ts,vue}\"",
-    "build:dist": "rollup -c --environment NODE_ENV:production",
     "serve": "vite preview",
-    "prepublishOnly": "yarn build:dist",
+    "prepublishOnly": "pnpm build",
     "test": "exit 0;",
     "lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "lint": "yarn lint:js"
+    "lint": "pnpm lint:js"
   },
   "dependencies": {
     "@braks/revue-draggable": "0.2.5",
@@ -46,8 +44,6 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
-    "@babel/core": "^7.15.8",
-    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.2",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-replace": "^2.4.2",
@@ -55,29 +51,21 @@
     "@vitejs/plugin-vue": "^1.9.3",
     "autoprefixer": "^10.3.7",
     "dagre": "^0.8.5",
-    "esbuild-register": "^2.6.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.1",
     "localforage": "^1.10.0",
     "np": "^7.5.0",
     "pnpm": "^6.18.0",
-    "postcss": "^8.3.9",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.4.1",
-    "rollup": "^2.58.0",
-    "rollup-plugin-dts": "^3.0.2",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "tslib": "^2.3.1",
     "typescript": "^4.4.4",
     "unplugin-auto-import": "^0.4.12",
     "vite": "^2.6.10",
     "vite-svg-loader": "^2.2.0",
     "vue": "^3.2.20",
-    "vue-router": "^4.0.12",
+    "vue-dts-gen": "^0.3.0",
     "vue-tsc": "^0.28.7"
   },
   "peerDependencies": {

postcss.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  plugins: [require('autoprefixer'), require('postcss-nested')]
+  inject: true,
+  plugins: [require('autoprefixer'), require('postcss-nested')],
 }

rollup.config.js

@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-require('esbuild-register')
-module.exports = require('./rollup.ts')

rollup.ts

@@ -1,111 +0,0 @@
-import typescript from 'rollup-plugin-typescript2'
-import { terser } from 'rollup-plugin-terser'
-import dts from 'rollup-plugin-dts'
-import commonjs from '@rollup/plugin-commonjs'
-import resolve from '@rollup/plugin-node-resolve'
-import replace from '@rollup/plugin-replace'
-// @ts-ignore
-import svg from 'rollup-plugin-svg'
-import postcss from 'rollup-plugin-postcss'
-// @ts-ignore
-
-import pkg from './package.json'
-
-const configs: any[] = []
-
-const activePackages = [
-  {
-    display: 'vue-flow',
-    external: ['@vueuse/core'],
-  },
-]
-
-// @ts-ignore
-for (const { external, iife } of activePackages) {
-  const iifeGlobals = {
-    'vue': 'Vue',
-    '@vueuse/core': 'VueUse',
-  }
-
-  const iifeName = 'VueFlow'
-  const functionNames = ['vue-flow']
-
-  for (const fn of functionNames) {
-    const input = 'src/index.ts'
-
-    const output: any[] = [
-      {
-        file: `dist/${fn}.cjs.js`,
-        format: 'cjs',
-      },
-      {
-        file: `dist/${fn}.esm.js`,
-        format: 'es',
-      },
-    ]
-
-    if (iife !== false) {
-      output.push(
-        {
-          file: `dist/${fn}.iife.js`,
-          format: 'iife',
-          name: iifeName,
-          extend: true,
-          globals: iifeGlobals,
-        },
-        {
-          file: `dist/${fn}.iife.min.js`,
-          format: 'iife',
-          name: iifeName,
-          extend: true,
-          globals: iifeGlobals,
-          plugins: [
-            terser({
-              format: {
-                comments: false,
-              },
-            }),
-          ],
-        },
-      )
-    }
-
-    configs.push({
-      input,
-      output,
-      plugins: [
-        typescript({
-          tsconfigOverride: {
-            compilerOptions: {
-              declaration: false,
-            },
-          },
-        }),
-        svg(),
-        resolve(),
-        postcss({
-          inject: true,
-          minimize: true,
-        }),
-        commonjs({ include: 'node_modules/**' }),
-        replace({
-          __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
-          preventAssignment: true,
-        }),
-      ],
-      external: ['vue', ...(external || [])],
-    })
-
-    configs.push({
-      input,
-      output: {
-        file: `dist/${fn}.d.ts`,
-        format: 'es',
-      },
-      plugins: [dts()],
-      external: ['vue', ...(external || []), /\.css$/],
-    })
-  }
-}
-
-export default configs

src/additional-components/MiniMap/MiniMap.vue

@@ -41,7 +41,8 @@ const nodeStrokeColorFunc: StringFunc =
 
 const nodeClassNameFunc = props.nodeClassName instanceof Function ? props.nodeClassName : () => props.nodeClassName as StringFunc
 
-const shapeRendering: ShapeRendering = typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
+const shapeRendering: ShapeRendering =
+  (window && typeof window === 'undefined') || !!window.chrome ? 'crispEdges' : 'geometricPrecision'
 
 const viewBox = computed(() => {
   const bb = getRectOfNodes(store.nodes)

src/components/Nodes/Node.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { DraggableEventListener } from '@braks/revue-draggable'
+import { DraggableEventListener, DraggableCore } from '@braks/revue-draggable'
 import { Node, NodeType, SnapGrid } from '~/types'
 import { NodeIdContextKey } from '~/context'
 import { useHooks, useStore } from '~/composables'

src/composables/useKeyPress.ts

@@ -37,9 +37,11 @@ export default (keyCode: KeyCode, onChange?: (keyPressed: boolean) => void): Ref
     },
   )
 
-  useEventListener(window, 'blur', () => {
+  if (window && typeof window !== 'undefined') {
-    isPressed.value = false
+    useEventListener(window, 'blur', () => {
-  })
+      isPressed.value = false
+    })
+  }
 
   if (onChange && typeof onChange === 'function') onChange(isPressed.value)
 

src/composables/useZoomPanHelper.ts

@@ -1,6 +1,7 @@
+// @ts-nocheck
 import { zoomIdentity } from 'd3-zoom'
 import { getRectOfNodes, pointToRendererPoint, getTransformForBounds } from '~/utils/graph'
-import { FitViewParams, FlowTransform, Rect, UseZoomPanHelper, XYPosition } from '~/types'
+import { FitViewParams, FlowTransform, Node, Rect, UseZoomPanHelper, XYPosition } from '~/types'
 import useStore from '~/composables/useStore'
 
 const DEFAULT_PADDING = 0.1
@@ -17,7 +18,7 @@ export default (store = useStore()): UseZoomPanHelper => {
     fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
       if (!store.nodes.length) return
 
-      const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node) => !node.isHidden))
+      const bounds = getRectOfNodes(options.includeHiddenNodes ? store.nodes : store.nodes.filter((node: Node) => !node.isHidden))
       const [x, y, zoom] = getTransformForBounds(
         bounds,
         store.dimensions.width,

src/container/Flow/Flow.vue

@@ -130,7 +130,10 @@ const init = (opts: typeof props) => {
 
 onBeforeUnmount(() => store?.$dispose())
 
-watch(props, (val) => init(val))
+watch(
+  () => props,
+  (val) => init(val),
+)
 init(props)
 
 const nodeTypes = controlledComputed(

src/context/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { InjectionKey } from 'vue'
 import { ElementId, FlowHooks, FlowStore } from '~/types'
 

src/types/node.ts

@@ -17,7 +17,7 @@ export interface Node<T = any> {
     | any
   data?: T
   style?: any
-  className?: string
+  class?: string
   targetPosition?: Position
   sourcePosition?: Position
   isHidden?: boolean

src/types/types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { CSSProperties, HTMLAttributes } from 'vue'
 import { Edge, EdgeType } from './edge'
 import { Node, NodeExtent, NodeType, TranslateExtent } from './node'

src/utils/graph.ts

@@ -34,7 +34,7 @@ export const clampPosition = (position: XYPosition, extent: NodeExtent): XYPosit
 export const getHostForElement = (element: HTMLElement): Document => {
   const doc = element.getRootNode() as Document
   if ('getElementFromPoint' in doc) return doc
-  else return window.document
+  else return false as any
 }
 
 export const isEdge = (element: Node | Connection | Edge): element is Edge =>

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "outDir": "./dist",
     "baseUrl": ".",
     "module": "ESNext",
     "target": "es2020",
@@ -17,8 +18,7 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [
-      "vite/client",
+      "vite/client"
-      "@types/node"
     ],
     "paths": {
       "~/*": [
@@ -32,6 +32,7 @@
   "exclude": [
     "node_modules",
     "build",
-    "dist"
+    "dist",
+    "examples"
   ]
 }

vite.config.ts

@@ -3,6 +3,9 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import svgLoader from 'vite-svg-loader'
 import AutoImport from 'unplugin-auto-import/vite'
+import commonjs from '@rollup/plugin-commonjs'
+import replace from '@rollup/plugin-replace'
+import pkg from './package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -13,7 +16,31 @@ export default defineConfig({
     },
   },
   build: {
-    outDir: 'build',
+    minify: 'terser',
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'vue-flow',
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      plugins: [
+        commonjs({ include: 'node_modules/**/*' }),
+        replace({
+          __VUE_FLOW_VERSION__: JSON.stringify(pkg.version),
+          preventAssignment: true,
+        }),
+      ],
+      output: {
+        dir: './dist',
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
   },
   plugins: [
     vue(),