refactor(additional-components): move additional components into separate pkg

docs/components/Repl.vue

@@ -71,6 +71,7 @@ onMounted(async () => {
   // pre-set import map
   store.setImportMap({
     imports: {
+      '@vue-flow/additional-components': `${location.origin}/additional-components.es.js`,
       '@vue-flow/core': `${location.origin}/vue-flow.es.js`,
       ...additionalImports,
     },

docs/components/examples/basic/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, isNode, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/connectionline/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, VueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import CustomConnectionLine from './CustomConnectionLine.vue'
 

docs/components/examples/custom-node/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { computed, h, onMounted, ref } from 'vue'
 import ColorSelectorNode from './CustomNode.vue'
 import { presets } from './presets.js'

docs/components/examples/edges/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MarkerType, MiniMap, VueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { MarkerType, VueFlow } from '@vue-flow/core'
 import { h, ref } from 'vue'
 import CustomEdge from './CustomEdge.vue'
 import CustomEdge2 from './CustomEdge2.vue'

docs/components/examples/empty/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 
 const { nodes, addNodes, edges, addEdges, onConnect, onPaneReady, onNodeDragStop, dimensions } = useVueFlow()
 

docs/components/examples/hidden/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref, watchEffect } from 'vue'
 
 const isHidden = ref(false)

docs/components/examples/horizontal/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { ref } from 'vue'
 import { initialElements } from './initial-elements.js'
 

docs/components/examples/nested/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { Background, ConnectionMode, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { onMounted } from 'vue'
 
 const { onConnect, nodes, edges, addEdges, addNodes } = useVueFlow({

docs/components/examples/update-edge/App.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ConnectionMode, Controls, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
+import { Controls } from '@vue-flow/additional-components'
+import { ConnectionMode, VueFlow, addEdge, updateEdge } from '@vue-flow/core'
 import { ref } from 'vue'
 
 const elements = ref([

docs/components/home/flows/Additional.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import type { Elements } from '@vue-flow/core'
-import { Background, Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls, MiniMap } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/Basic.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ClassFunc, GraphEdge, GraphNode, StyleFunc } from '@vue-flow/core'
-import { Background, ConnectionLineType, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionLineType, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 import Cross from '~icons/mdi/window-close'
 
 const emit = defineEmits(['pane'])

docs/components/home/flows/Intro.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
-import { Background, Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { Handle, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import confetti from 'canvas-confetti'
 import colors from 'windicss/colors'
+import { Background } from '@vue-flow/additional-components'
 import { cheer, fireworks } from './confetti'
 import Heart from '~icons/mdi/heart'
 

docs/components/home/flows/Nested.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { Background, ConnectionMode, Controls, VueFlow, useVueFlow } from '@vue-flow/core'
+import { ConnectionMode, VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import { Background, Controls } from '@vue-flow/additional-components'
 
 const emit = defineEmits(['pane'])
 

docs/components/home/flows/RGB.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import type { MiniMapNodeFunc } from '@vue-flow/core'
-import { Background, BackgroundVariant, Controls, MiniMap, VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
+import type { MiniMapNodeFunc } from '@vue-flow/additional-components'
+import { Background, BackgroundVariant, Controls, MiniMap } from '@vue-flow/additional-components'
 import CustomEdge from '../edges/Custom.vue'
 import RGBNode from '../nodes/Input.vue'
 import RGBOutputNode from '../nodes/Output.vue'

docs/package.json

@@ -14,6 +14,7 @@
     "@algolia/client-search": "^4.14.2",
     "@animxyz/core": "^0.6.6",
     "@animxyz/vue3": "^0.6.7",
+    "@vue-flow/additional-components": "workspace:*",
     "@vue-flow/core": "workspace:*",
     "@stackblitz/sdk": "^1.8.0",
     "@vue/repl": "1.1.2",

docs/src/.vitepress/copy-plugin.ts

@@ -2,19 +2,28 @@ import { existsSync, readFileSync } from 'fs'
 import { resolve } from 'path'
 import type { Plugin } from 'vite'
 
+const copyFile = (path: string, pkgName: string) => {
+  const filePath = resolve(__dirname, `${path}/${pkgName}`)
+  if (!existsSync(filePath)) {
+    throw new Error(`${pkgName} not built. ` + `Run "pnpm -w build" first.`)
+  }
+
+  ;(this as any).emitFile({
+    type: 'asset',
+    fileName: pkgName,
+    source: readFileSync(filePath, 'utf-8'),
+  })
+}
+
 export function copyVueFlowPlugin(): Plugin {
   return {
     name: 'copy-vue-flow',
     generateBundle() {
-      const filePath = resolve(__dirname, '../../node_modules/@vue-flow/core/dist/vue-flow.es.js')
-      if (!existsSync(filePath)) {
-        throw new Error(`@vue-flow/core/dist/vue-flow.es.js not built. ` + `Run "pnpm -w build" first.`)
-      }
-
-      this.emitFile({
-        type: 'asset',
-        fileName: 'vue-flow.es.js',
-        source: readFileSync(filePath, 'utf-8'),
+      ;[
+        { path: '../../node_modules/@vue-flow/core/dist/', pkgName: 'vue-flow.es.js' },
+        { path: '../../node_modules/@vue-flow/additional-components/dist/', pkgName: 'additional-components.es.js' },
+      ].forEach((pkg) => {
+        copyFile.call(this, pkg.path, pkg.pkgName)
       })
     },
   }