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'

docs/src/examples/connectionline.md

@@ -6,33 +6,14 @@ pageClass: examples
 # Custom Connection Line
 
 If the default connection lines aren't to your liking, or you want to expand on the existing 
-functionality you can pass a custom connection line component to Vue Flow.
+functionality you can use your own custom connection line.
 
 Simply pass a component in the designated template slot, and you're good to go.
 
-```vue:no-line-numbers
-<template>
-  <VueFlow>
-    <template #connection-line="props">
-      <MyCustomConnectionLine v-bind="props" />
-    </template>
-  </VueFlow>
-</template>
-```
-
-You can see a working example in the sandbox.
-
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-custom-connection-line-0okgze?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Custom Connection Line"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-custom-connection-line-0okgze?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Custom Connection Line"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="connectionline"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/custom-node.md

@@ -5,24 +5,15 @@ pageClass: examples
 
 # Custom Node
 
-One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic node functionality (dragging, selection etc).
+One of the key features of Vue Flow is implementing custom elements (nodes / edges) that allow you to expand on the basic functionalities (dragging, selecting etc).
 
 You can display any content and functionality inside a custom node. More documentation about how to set
-up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes/).
-
-You can see a working example in the sandbox below.
+up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-custom-node-example-wznb3q?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Custom Node Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-custom-node-example-wznb3q?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-    class="block dark:hidden h-full w-full min-h-[75vh]"
-    title="Vue Flow: Custom Node Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="customNode"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/dnd.md

@@ -16,16 +16,9 @@ This example shows another key feature of Vue Flow. You can initialize the Flow
 is actually mounted. This can be achieved by using the [`useVueFlow`](/guide/composables.html#usevueflow) composable.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-drag-drop-tpbm7d?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Drag & Drop"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-drag-drop-tpbm7d?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-    class="block dark:hidden h-full w-full min-h-[75vh]"
-    title="Vue Flow: Drag & Drop"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="dnd"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/edges.md

@@ -9,16 +9,9 @@ Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and
 In addition to the built-in edge types you can create your own custom edges. You can find more information on edge types [here](/guide/edge.html#default-edge-types).
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-edges-3jbddk?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Edges"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-edges-3jbddk?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Edges"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="edges"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/empty.md

@@ -9,16 +9,9 @@ Similar to the drag and drop example, we can also add nodes to an empty graph on
 which triggers a push into our elements / nodes array.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-empty-example-bcxxdv?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Empty Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-empty-example-bcxxdv?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Empty Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="empty"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/hidden.md

@@ -13,16 +13,9 @@ If you set the `onlyRenderVisibleElements` prop to `true`, hidden elements will
 css. This behavior is disabled by default, meaning all elements are rendered whether they are hidden or not.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-hidden-example-nrpjl7?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Hidden Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-hidden-example-nrpjl7?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Hidden Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="hidden"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/index.md

@@ -11,16 +11,9 @@ On the bottom left you see the viewport-controls and on the bottom right the min
 You can also see the built-in node (default, input, output) and edge (bezier, straight, step, smoothstep) types.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=dark"
-     class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-     title="Vue Flow: Basic Example"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-basic-example-3hq147?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FBasic.vue&moduleview=1&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-     title="Vue Flow: Basic Example"
-     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-   ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="basic"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/interaction.md

@@ -10,16 +10,9 @@ This includes enabling/disabling zoom-scroll, pan-scroll, dragging etc.
 In the sandbox below you can find an example showing you how to toggle interaction options.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-interaction-example-pqzf7p?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Hidden Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-interaction-example-pqzf7p?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Hidden Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="interaction"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/multi.md

@@ -10,16 +10,9 @@ Vue Flow is not limited to a single instance on a page.
 You can use as many component instances as you like.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Multi Flows Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-multi-flows-example-y4yn9u?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FMultiFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Multi Flows Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="multi"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/nesting.md

@@ -12,16 +12,9 @@ You can also define the boundaries of a node, i.e. if the node can be dragged ou
 or even let Vue Flow extend the area of a node to fit all it's children.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/compassionate-goldberg-h5dsnq?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Nested Nodes Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/compassionate-goldberg-h5dsnq?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Nested Nodes Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="nested"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/pinia.md

@@ -0,0 +1,15 @@
+---
+pageClass: examples
+
+---
+
+# Pinia
+
+Using your existing storage implementation is not an issue. 
+You can store your elements in whatever store you're already using, mutate them there and pass the result to Vue Flow.
+
+In this example we use [pinia](https://pinia.vuejs.org/) to store our elements, update their positions and toggle classes.
+
+<div class="mt-6">
+  <PiniaExample />
+</div>

docs/src/examples/save.md

@@ -5,27 +5,21 @@ pageClass: examples
 
 # Save & Restore
 
-::: warning BREAKING CHANGE
-__Changes from 0.3.x to 0.4.x__
-The "built-in" storage feature has been fully removed.
+There is no built-in persistent storage feature, however you can use your own storage implementation.
+
+::: tip State Management Libraries
+  Check the [pinia](/examples/pinia) example to see how to use Vue Flow with a state management library.
 :::
 
-There is no built-in storage feature, however creating a save & restore feature is simple.
+This example demonstrates save & restore functionality using the [`LocalStorage`](https://developer.mozilla.org/de/docs/Web/API/Window/localStorage) of the browser.
 
-This example demonstrates save & restore functionality using the `LocalStorage` of the browser.
-You are of course free to implement your own logic (for example fetching the data from an API that's connected to a database).
+You can extend on this basic idea however you like, i.e. fetch data that you transform into elements which are then passed to Vue Flow or 
+some other business logic you would like to handle.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Save & Restore Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-save-restore-example-1u7u6t?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Save & Restore Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="saveRestore"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/stress.md

@@ -10,16 +10,9 @@ Vue Flow is built to be fast but there are limits.
 Try out how many nodes you can get to render before your browser crashes.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-stress-zyr01z?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Stress"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-stress-zyr01z?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Stress"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="stress"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/updatable-edge.md

@@ -14,16 +14,9 @@ for specific edges by using the `updatable` attribute.
 
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/eager-tree-c7igf6?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Updatable Edge Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/eager-tree-c7igf6?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Updatable Edge Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="updateEdge"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/update-node.md

@@ -14,16 +14,9 @@ That means you can manipulate any property of your original nodes, and it will t
 You can of course also access the nodes directly from the state and change their properties from there.
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-update-node-example-q5hjp3?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Update Node Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-update-node-example-q5hjp3?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Update Node Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="updateNode"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/examples/validation.md

@@ -31,16 +31,9 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-validation-example-zxbyus?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=dark"
-    class="hidden dark:block bg-black h-full w-full min-h-[75vh]"
-    title="Vue Flow: Validation Example"
-    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
-  <iframe src="https://codesandbox.io/embed/vue-flow-validation-example-zxbyus?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FFlow.vue&theme=light"
-     class="block dark:hidden h-full w-full min-h-[75vh]"
-      title="Vue Flow: Validation Example"
-      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  ></iframe>
+  <client-only>
+    <Suspense>
+      <Repl example="validation"></Repl>
+    </Suspense>
+  </client-only>
 </div>

docs/src/index.md

@@ -13,4 +13,6 @@ footer: MIT Licensed | Copyright © 2021-present Burak Cakmakoglu
 
 <Features />
 
-<Acknowledgement />
+<XyzTransition :appear-visible="true" xyz="fade down ease-out-back">
+  <Acknowledgement />
+</XyzTransition>