fix(docs): dedupe and add alias for vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
bcakmakoglu · Nov 6, 2021 · 3931a59 · 3931a59
1 parent ae0772b
commit 3931a59
Show file tree

Hide file tree

Showing 41 changed files with 853 additions and 807 deletions.
diff --git a/docs/assets/index.css b/docs/assets/index.css
@@ -13,10 +13,9 @@ html,
 body,
 #root,
 #__nuxt {
-  height: 100vh;
   margin: 0;
+  height: 100%;
   color: #111;
-  overflow: hidden;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;

diff --git a/docs/components/Header.vue b/docs/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="flex items-center py-4 px-8 text-white h-[92px]">
+  <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"

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -1,3 +1,4 @@
+import { resolve } from 'path'
 import { defineNuxtConfig } from 'nuxt3'
 
 export default defineNuxtConfig({
@@ -8,5 +9,14 @@ export default defineNuxtConfig({
   router: {
     base: '/',
   },
+  vite: {
+    alias: {
+      vue: resolve('./node_modules/vue'),
+    },
+    resolve: {
+      dedupe: ['vue'],
+      preserveSymlinks: false,
+    },
+  },
   buildModules: ['nuxt-windicss'],
 })
diff --git a/docs/package.json b/docs/package.json
@@ -1,8 +1,8 @@
 {
   "private": true,
   "scripts": {
-    "dev": "nuxt dev",
-    "build": "nuxt build",
+    "dev": "nuxi dev",
+    "build": "nuxi build",
     "start": "node .output/server/index.mjs"
   },
   "dependencies": {
@@ -11,7 +11,6 @@
     "localforage": "^1.10.0"
   },
   "devDependencies": {
-    "@nuxt/nitro": "^0.10.0",
     "@types/dagre": "^0.7.46",
     "nuxt-windicss": "^2.0.4",
     "nuxt3": "latest"

diff --git a/docs/pages/examples/edge-types.vue b/docs/pages/examples/edge-types.vue
@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-/**
- * Example for checking the different edge types and source and target positions
- */
 import {
   Flow,
   removeElements,

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup></script>
 <template>
-  <div class="flex justify-center items-center h-full">
+  <div class="flex justify-center items-center h-full w-full">
     <h1 class="text-5xl">Vue Flow</h1>
   </div>
 </template>
diff --git a/docs/yarn.lock b/docs/yarn.lock
diff --git a/examples/Basic/Basic.vue b/examples/Basic/Basic.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,
@@ -12,7 +13,7 @@ import Flow, {
   isNode,
   removeElements,
   Node,
-} from '~/index'
+} from '@braks/vue-flow'
 
 const onNodeDragStop = ({ node }: { node: Node }) => console.log('drag stop', node)
 const onElementClick = ({ node }: { node: Node }) => console.log('click', node)

diff --git a/examples/CustomConnectionLine/CustomConnectionLine.vue b/examples/CustomConnectionLine/CustomConnectionLine.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import ConnectionLine from './ConnectionLine.vue'
-import Flow, { removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
+import { Flow, removeElements, addEdge, Background, BackgroundVariant, Elements, Connection, Edge } from '~/index'
 
 const elements = ref<Elements>([
   {

diff --git a/examples/CustomNode/CustomNode.vue b/examples/CustomNode/CustomNode.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ColorSelectorNode from './ColorSelectorNode.vue'
-import Flow, {
+import {
+  Flow,
   isEdge,
   removeElements,
   addEdge,

diff --git a/examples/DragNDrop/DnD.vue b/examples/DragNDrop/DnD.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import Flow, { addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
+import { Flow, addEdge, removeElements, Controls, FlowInstance, Elements, Connection, Edge, ElementId, Node } from '~/index'
 import './dnd.css'
 
 const flowInstance = ref<FlowInstance>()

diff --git a/examples/EdgeTypes/EdgeTypesExample.vue b/examples/EdgeTypes/EdgeTypesExample.vue
@@ -3,7 +3,7 @@
  * Example for checking the different edge types and source and target positions
  */
 import { getElements } from './utils'
-import Flow, { removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
+import { Flow, removeElements, addEdge, MiniMap, Controls, Background, FlowInstance, Connection, Edge, Elements } from '~/index'
 
 const onLoad = (flowInstance: FlowInstance) => {
   flowInstance.fitView()

diff --git a/examples/EdgeWithButton/EdgeWithButton.vue b/examples/EdgeWithButton/EdgeWithButton.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import ButtonEdge from './ButtonEdge.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Background,
   Connection,

diff --git a/examples/Edges/EdgesExample.vue b/examples/Edges/EdgesExample.vue
@@ -2,7 +2,8 @@
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'
 import CustomLabel from './CustomLabel.vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

diff --git a/examples/Empty/EmptyExample.vue b/examples/Empty/EmptyExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   MiniMap,
   Controls,
   Background,

diff --git a/examples/Hidden/HiddenExample.vue b/examples/Hidden/HiddenExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
+import { Flow, MiniMap, Controls, Connection, Edge, Elements, addEdge } from '~/index'
 
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },

diff --git a/examples/Interaction/InteractionExample.vue b/examples/Interaction/InteractionExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   addEdge,
   MiniMap,
   Controls,

diff --git a/examples/Layouting/LayoutingExample.vue b/examples/Layouting/LayoutingExample.vue
@@ -3,7 +3,8 @@ import dagre from 'dagre'
 import initialElements from './initial-elements'
 import './layouting.css'
 
-import Flow, {
+import {
+  Flow,
   Controls,
   addEdge,
   ConnectionMode,

diff --git a/examples/MultiFlows/Flow.vue b/examples/MultiFlows/Flow.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
+import { Flow, Background, Connection, Elements, Edge, removeElements, addEdge } from '~/index'
 const initialElements: Elements = [
   { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },

diff --git a/examples/NodeTypeChange/NodeTypeChangeExample.vue b/examples/NodeTypeChange/NodeTypeChangeExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, { addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
+import { Flow, addEdge, Connection, Edge, Elements, isEdge, FlowInstance, Position } from '~/index'
 
 const initialElements: Elements = [
   {

diff --git a/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue b/examples/NodeTypesIdChange/NodeTypesIdChangeExample.vue
@@ -2,7 +2,7 @@
 import { CSSProperties } from 'vue'
 import NodeA from './NodeA.vue'
 import NodeB from './NodeB.vue'
-import Flow, { Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
+import { Flow, Elements, Position, NodeType, Connection, Edge, addEdge } from '~/index'
 
 const initialElements: Elements = [
   {

diff --git a/examples/Overview/Overview.vue b/examples/Overview/Overview.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

diff --git a/examples/Provider/ProviderExample.vue b/examples/Provider/ProviderExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Sidebar from './Sidebar.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   removeElements,
   Controls,

diff --git a/examples/SaveRestore/SaveRestoreExample.vue b/examples/SaveRestore/SaveRestoreExample.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import Controls from './Controls.vue'
-import Flow, { addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
+import { Flow, addEdge, Connection, Node, Edge, Elements, FlowInstance, removeElements } from '~/index'
 
 import './save.css'
 

diff --git a/examples/Stress/StressExample.vue b/examples/Stress/StressExample.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import { getElements } from './utils'
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   MiniMap,

diff --git a/examples/Switch/SwitchExample.vue b/examples/Switch/SwitchExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
+import { Flow, removeElements, addEdge, Node, FlowElement, Elements, Connection, Edge } from '~/index'
 
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node)
 const onElementClick = (_: MouseEvent, element: FlowElement) => console.log('click', element)

diff --git a/examples/Unidirectional/UnidirectionalExample.vue b/examples/Unidirectional/UnidirectionalExample.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

diff --git a/examples/UpdatableEdge/UpdatableEdgeExample.vue b/examples/UpdatableEdge/UpdatableEdgeExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   Controls,
   updateEdge,
   addEdge,

diff --git a/examples/UpdateNode/UpdateNodeExample.vue b/examples/UpdateNode/UpdateNodeExample.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import Flow, { Elements } from '~/index'
+import { Flow, Elements } from '~/index'
 
 import './updatenode.css'
 

diff --git a/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue b/examples/UpdateNodeInternals/UpdateNodeInternalsExample.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { CSSProperties } from 'vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   NodeType,
   addEdge,
   useZoomPanHelper,

diff --git a/examples/Validation/ValidationExample.vue b/examples/Validation/ValidationExample.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import CustomInput from './CustomInput.vue'
 import CustomNode from './CustomNode.vue'
-import Flow, {
+import {
+  Flow,
   addEdge,
   Handle,
   Connection,

diff --git a/examples/ZoomPanHelper/ZoomPanHelperExample.vue b/examples/ZoomPanHelper/ZoomPanHelperExample.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import Flow, {
+import {
+  Flow,
   removeElements,
   addEdge,
   Background,

diff --git a/package.json b/package.json
@@ -11,26 +11,24 @@
   "exports": {
     ".": {
       "import": "./dist/vue-flow.es.js",
-      "require": "./dist/vue-flow.umd.js"
+      "require": "./dist/vue-flow.cjs.js"
     },
     "./*": "./*"
   },
-  "main": "./dist/vue-flow.umd.js",
+  "main": "./dist/vue-flow.cjs.js",
   "types": "./dist/index.d.ts",
   "module": "./dist/vue-flow.es.js",
-  "unpkg": "./dist/vue-flow.umd.js",
-  "jsdelivr": "./dist/vue-flow.umd.js",
+  "unpkg": "./dist/vue-flow.iife.js",
+  "jsdelivr": "./dist/vue-flow.iife.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "dev": "vue-tsc --noEmit && vite",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly",
-    "serve": "vite preview",
-    "prepublishOnly": "pnpm build",
+    "prepublishOnly": "yarn build",
     "test": "exit 0;",
     "lint:js": "eslint --ext \".js,.jsx,.ts,.tsx\" --fix --ignore-path .gitignore .",
-    "lint": "pnpm lint:js"
+    "lint": "yarn lint:js"
   },
   "dependencies": {
     "@braks/revue-draggable": "0.2.5",
@@ -40,30 +38,29 @@
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
-    "pinia": "^2.0.0-rc.14",
-    "ssr-window": "^4.0.0"
+    "pinia": "^2.0.0-rc.14"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.9.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@vitejs/plugin-vue": "^1.9.3",
+    "@vue/compiler-sfc": "^3.2.21",
     "autoprefixer": "^10.3.7",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.1",
     "np": "^7.5.0",
-    "pnpm": "^6.18.0",
     "postcss-nested": "^5.0.6",
     "prettier": "^2.4.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": "^3.2.21",
     "vue-tsc": "^0.28.7"
   },
   "peerDependencies": {
-    "vue": ">=3.0.5"
+    "vue": "^3.2.21"
   },
   "publishConfig": {
     "access": "public",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/Edges/Edge.vue b/src/components/Edges/Edge.vue
@@ -118,7 +118,6 @@ const edgePos = computed(() =>
 </script>
 <template>
   <g
-    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,
@@ -137,6 +136,7 @@ const edgePos = computed(() =>
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
+      v-if="!props.edge.isHidden && isVisible(edgePos)"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,

diff --git a/src/composables/useWindow.ts b/src/composables/useWindow.ts
@@ -1,6 +1,4 @@
-import { ssrWindow } from 'ssr-window'
-
 export default (): Window & typeof globalThis & { chrome?: any } => {
   if (typeof window !== 'undefined') return window
-  else return ssrWindow as any
+  else return {} as any
 }