docs: replace codesandbox embed with repl (#122)

* docs: Animations

* docs: add confetti gun

* docs: update basic example on home page

* docs(deps): Add stackblitz sdk to deps

* chore: update yarn.lock

* docs: use vue repl

* docs: remove stackblitz sdk

* docs: basic repl example

* docs: use repl for examples/index.md (basic example)

* docs: pass ext to repl

* docs: add copy plugin

* docs: use import map instead of dynamic imports

* docs: use repl for custom node example

* docs: hide repl errors

* docs: use repl for custom connectionline example

* docs: use repl for edges example

* docs: exclude repl from ssr

* docs: use repl for nested example

* docs: use repl for stress example

* docs: rename customNode to custom-node

* docs: use repl for update-edge example

* docs: use repl for update-node example

* docs: use repl for validation example

* docs: use repl for save-restore example

* docs: scale down minimap in repl examples

* docs: use repl for dnd example

* docs: use repl for empty example

* docs: use repl for hidden example

* docs: use repl for interaction example

* docs: use repl for multi example

* docs: add pinia example with stackblitz

* docs: update basic example

* docs: update examples

* docs: remove transition from intro

* docs: update features

* update: README.md

* docs: scope css

docs/src/.vuepress/components.d.ts

@@ -6,17 +6,29 @@ declare module 'vue' {
   export interface GlobalComponents {
     Acknowledgement: typeof import('./../../components/home/Acknowledgement.vue')['default']
     Additional: typeof import('./../../components/home/flows/Additional.vue')['default']
+    App: typeof import('./../../components/examples/basic/App.vue')['default']
     Banner: typeof import('./../../components/home/Banner.vue')['default']
     Basic: typeof import('./../../components/home/flows/Basic.vue')['default']
-    Box: typeof import('./../../components/home/nodes/Box.vue')['default']
+    Controls: typeof import('./../../components/examples/save-restore/Controls.vue')['default']
     Custom: typeof import('./../../components/home/edges/Custom.vue')['default']
+    CustomConnectionLine: typeof import('./../../components/examples/connectionline/CustomConnectionLine.vue')['default']
+    CustomEdge: typeof import('./../../components/examples/edges/CustomEdge.vue')['default']
+    CustomEdge2: typeof import('./../../components/examples/edges/CustomEdge2.vue')['default']
+    CustomEdgeLabel: typeof import('./../../components/examples/edges/CustomEdgeLabel.vue')['default']
+    CustomInput: typeof import('./../../components/examples/validation/CustomInput.vue')['default']
+    CustomNode: typeof import('./../../components/examples/custom-node/CustomNode.vue')['default']
     Features: typeof import('./../../components/home/Features.vue')['default']
+    Flow: typeof import('./../../components/examples/multi/Flow.vue')['default']
     Home: typeof import('./../../components/home/Home.vue')['default']
     Input: typeof import('./../../components/home/nodes/Input.vue')['default']
+    InteractionControls: typeof import('./../../components/examples/interaction/InteractionControls.vue')['default']
     Intro: typeof import('./../../components/home/flows/Intro.vue')['default']
     Nested: typeof import('./../../components/home/flows/Nested.vue')['default']
     Output: typeof import('./../../components/home/nodes/Output.vue')['default']
+    PiniaExample: typeof import('./../../components/examples/pinia/PiniaExample.vue')['default']
+    Repl: typeof import('./../../components/Repl.vue')['default']
     RGB: typeof import('./../../components/home/flows/RGB.vue')['default']
+    Sidebar: typeof import('./../../components/examples/dnd/Sidebar.vue')['default']
   }
 }
 

docs/src/.vuepress/config.ts

@@ -10,6 +10,7 @@ import Components from 'unplugin-vue-components/vite'
 import AutoImport from 'unplugin-auto-import/vite'
 import head from './head'
 import { useVueFlow } from '@braks/vue-flow'
+import { copyVueFlowPlugin } from "./copy-plugin";
 
 config({ path: resolve(__dirname, '.env') })
 
@@ -23,7 +24,11 @@ export default defineUserConfig<DefaultThemeOptions>({
   bundler: '@vuepress/bundler-vite',
   bundlerConfig: {
     viteOptions: {
+      optimizeDeps: {
+        exclude: ['@animxyz/vue3'],
+      },
       plugins: [
+        copyVueFlowPlugin(),
         AutoImport({
           imports: ['vue', '@vueuse/core'],
           dts: resolve(__dirname, './auto-imports.d.ts'),
@@ -109,6 +114,7 @@ export default defineUserConfig<DefaultThemeOptions>({
             '/examples/hidden',
             '/examples/interaction',
             '/examples/multi',
+            '/examples/pinia',
             '/examples/stress',
           ],
         },

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

@@ -0,0 +1,27 @@
+import { Plugin } from 'vite'
+import { existsSync, readFileSync } from 'fs'
+import { resolve } from 'path'
+
+export function copyVueFlowPlugin(): Plugin {
+  return {
+    name: 'copy-vue-flow',
+    generateBundle() {
+      console.log('building')
+      const filePath = resolve(
+        __dirname,
+        '../../../node_modules/@braks/vue-flow/dist/vue-flow.es.js'
+      )
+      if (!existsSync(filePath)) {
+        throw new Error(
+          `@braks/vue-flow/dist/vue-flow.es.js not built. ` +
+          `Run "yarn build" first.`
+        )
+      }
+      this.emitFile({
+        type: 'asset',
+        fileName: 'vue-flow.es.js',
+        source: readFileSync(filePath, 'utf-8'),
+      })
+    }
+  }
+}

docs/src/.vuepress/theme/clientAppEnhance.ts

@@ -0,0 +1,6 @@
+import { defineClientAppEnhance } from '@vuepress/client'
+import VueAnimXyz from '@animxyz/vue3'
+
+export default defineClientAppEnhance(({ app }) => {
+  app.use(VueAnimXyz)
+})

docs/src/.vuepress/theme/index.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'path'
 import { Theme } from 'vuepress'
+import { path } from '@vuepress/utils'
 
 export default {
   name: 'vuepress-theme-local',
@@ -7,4 +8,5 @@ export default {
   layouts: {
     Layout: resolve(__dirname, 'layouts/default.vue'),
   },
+  clientAppEnhanceFiles: path.resolve(__dirname, './clientAppEnhance.ts'),
 } as Theme

docs/src/.vuepress/theme/layouts/default.vue

@@ -1,5 +1,6 @@
 <script>
 import 'virtual:windi.css'
+import '@animxyz/core'
 import '@braks/vue-flow/dist/style.css'
 import '@braks/vue-flow/dist/theme-default.css'
 import '../../assets/index.css'