chore(docs): wrap Repl in client only

docs/components/DocsRepl.vue

@@ -0,0 +1,122 @@
+<script lang="ts" setup>
+import type { SFCOptions } from '@vue/repl'
+import { ReplStore, Repl as VueRepl } from '@vue/repl'
+import { useVueFlow } from '@vue-flow/core'
+import '@vue/repl/style.css'
+import { isClient } from '@vueuse/core'
+import { exampleImports } from './examples'
+
+const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
+
+const { vueFlowVersion } = useVueFlow()
+
+let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
+@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+
+html,
+body,
+#app {
+  margin: 0;
+  height: 100%;
+}
+
+#app {
+  text-transform: uppercase;
+  font-family: 'JetBrains Mono', monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+.vue-flow__minimap {
+  transform: scale(75%);
+  transform-origin: bottom right;
+}
+\n`
+
+const store = new ReplStore({
+  showOutput: true,
+  outputMode: 'preview',
+})
+
+const vh = useCssVar('--vh')
+
+watchEffect(() => {
+  vh.value = `${window.innerHeight}px`
+})
+
+const files: any = {}
+const imports = exampleImports[props.example]
+const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
+
+for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
+  if (example.includes('css')) {
+    css += `${imports[example as keyof typeof imports]}`
+  } else {
+    files[example] = imports[example as keyof typeof imports]
+  }
+}
+
+onMounted(async () => {
+  await store.setVueVersion('3.2.37')
+
+  await store.setFiles(
+    {
+      ...files,
+      'main.css': css,
+    },
+    props.mainFile ?? 'App.vue',
+  )
+
+  // pre-set import map
+  await store.setImportMap({
+    imports: {
+      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
+      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
+      ...additionalImports,
+    },
+  })
+
+  if (isClient) {
+    document.body.className += 'examples'
+  }
+})
+
+const sfcOptions = {
+  script: {
+    reactivityTransform: true,
+  },
+} as SFCOptions
+</script>
+
+<template>
+  <VueRepl
+    :clear-console="true"
+    :auto-resize="true"
+    :store="store"
+    :show-compile-output="false"
+    :show-import-map="false"
+    :sfc-options="sfcOptions"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
+  />
+</template>
+
+<style>
+.file-selector {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
+}
+
+.vue-repl {
+  --vh: 100vh;
+
+  @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
+
+  height: calc(var(--vh) - 72px);
+}
+
+.msg.err {
+  @apply hidden;
+}
+</style>

docs/components/Repl.vue

@@ -1,117 +1,15 @@
-<script lang="ts" setup>
+<script>
-import { ReplStore, Repl as VueRepl } from '@vue/repl'
+import { isClient } from '@vueuse/core'
-import { useVueFlow } from '@vue-flow/core'
+import DocsRepl from './DocsRepl.vue'
-import '@vue/repl/style.css'
-import { exampleImports } from './examples'
 
-const props = defineProps<{ example: keyof typeof exampleImports; mainFile?: string; dependencies?: Record<string, string> }>()
+export default defineComponent({
-const { vueFlowVersion } = useVueFlow()
+  props: ['example'],
-let css = `@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/style.css';
+  setup(props) {
-@import 'https://cdn.jsdelivr.net/npm/@vue-flow/core@${vueFlowVersion.value}/dist/theme-default.css';
+    return () => {
+      if (!isClient) return null
 
-html,
+      return h(DocsRepl, props)
-body,
+    }
-#app {
-  margin: 0;
-  height: 100%;
-}
-
-#app {
-  text-transform: uppercase;
-  font-family: 'JetBrains Mono', monospace;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-.vue-flow__minimap {
-  transform: scale(75%);
-  transform-origin: bottom right;
-}
-\n`
-
-const store = new ReplStore({
-  showOutput: true,
-  outputMode: 'preview',
-})
-
-const vh = useCssVar('--vh')
-
-watchEffect(
-  () => {
-    vh.value = `${window.innerHeight}px`
   },
-  { flush: 'post' },
-)
-
-const files: any = {}
-const imports = exampleImports[props.example]
-const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
-
-for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
-  if (example.includes('css')) {
-    css += `${imports[example as keyof typeof imports]}`
-  } else {
-    files[example] = imports[example as keyof typeof imports]
-  }
-}
-
-onMounted(async () => {
-  await store.setVueVersion('3.2.37')
-
-  await store.setFiles(
-    {
-      ...files,
-      'main.css': css,
-    },
-    props.mainFile ?? 'App.vue',
-  )
-
-  // pre-set import map
-  store.setImportMap({
-    imports: {
-      '@vue-flow/additional-components': `${location.origin}/vue-flow-additional-components.mjs`,
-      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
-      ...additionalImports,
-    },
-  })
 })
-
-const sfcOptions = {
-  script: {
-    reactivityTransform: true,
-  },
-}
 </script>
-
-<template>
-  <VueRepl
-    :clear-console="true"
-    :auto-resize="true"
-    :store="store"
-    :show-compile-output="false"
-    :show-import-map="false"
-    :sfc-options="sfcOptions"
-    @keydown.ctrl.s.prevent
-    @keydown.meta.s.prevent
-  />
-</template>
-
-<style>
-.file-selector {
-  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
-}
-
-.vue-repl {
-  --vh: 100vh;
-
-  @apply rounded-lg border-1 border-solid dark:border-gray-200/10 border-gray-200;
-
-  height: calc(var(--vh) - 72px);
-}
-
-.msg.err {
-  @apply hidden;
-}
-</style>

docs/src/.vitepress/config.ts

@@ -216,8 +216,8 @@ export default defineConfigWithTheme<DefaultTheme.Config>({
           items: [
             { text: 'Edges', link: '/examples/edges/' },
             { text: 'Updatable Edge', link: '/examples/edges/updatable-edge' },
-            { text: 'Custom Connectionline', link: '/examples/edges/connection-line' },
+            { text: 'Custom Connection Line', link: '/examples/edges/connection-line' },
-            { text: 'Connection validation', link: '/examples/edges/validation' },
+            { text: 'Connection Validation', link: '/examples/edges/validation' },
           ],
         },
       ],

docs/src/assets/index.css

@@ -10,8 +10,16 @@
   backdrop-filter: blur(1px);
 }
 
-.VPPage {
+.examples .VPDoc {
-  @apply px-8 py-6 md:px-12 lg:px-24;
+  @apply !px-8 !py-6 md:!px-12 lg:!px-24;
+}
+
+.examples .content-container {
+  @apply max-w-full;
+}
+
+.examples .aside {
+  @apply !hidden;
 }
 
 html, body {

docs/src/components.d.ts

@@ -20,6 +20,7 @@ declare module '@vue/runtime-core' {
     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']
+    DocsRepl: typeof import('./../components/DocsRepl.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']

docs/src/examples/dnd.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Drag & Drop
 
 Adding nodes to an already existing graph can be done multiple ways. To create an interactive editor, you would probably
@@ -16,9 +11,5 @@ 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">
-  <ClientOnly>
+  <Repl example="dnd"></Repl>
-    <Suspense>
-      <Repl example="dnd"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/edges/connection-line.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Custom Connection Line
 
 If the default connection lines aren't to your liking, or you want to expand on the existing 
@@ -11,9 +6,5 @@ functionality you can use your own custom connection line.
 Simply pass a component in the designated template slot, and you're good to go.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="connectionline"></Repl>
-    <Suspense>
-      <Repl example="connectionline"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/edges/index.md

@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Edges
 
 Vue Flow comes with four pre-defined edge types - bezier-, step-, smoothstep and straight-edges.
 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">
-  <ClientOnly>
+  <Repl example="edges"></Repl>
-    <Suspense>
-      <Repl example="edges"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/edges/updatable-edge.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Updatable Edge
 
 Existing edges can be updated, meaning their source / target position can be changed interactively.

docs/src/examples/edges/validation.md

@@ -1,13 +1,9 @@
----
-layout: page
-
----
-
 # Connection Validation
 
 Connections can be validated before edges are created and nodes get connected. 
 
 ## Using a handle in a custom node
+
 ```vue
 <div>
   [ ... ]
@@ -17,6 +13,7 @@ Connections can be validated before edges are created and nodes get connected.
 ```
 
 ## Passing as node option
+
 ```ts
 const nodes = [
   {
@@ -31,9 +28,5 @@ const nodes = [
 ```
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="validation"></Repl>
-    <Suspense>
-      <Repl example="validation"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/empty.md

@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Empty
 
 Similar to the drag and drop example, we can also add nodes to an empty graph on a button click, 
 which triggers a push into our elements / nodes array.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="empty"></Repl>
-    <Suspense>
-      <Repl example="empty"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/floating-edges.md

@@ -1,25 +0,0 @@
----
-layout: page
-
----
-
-This example demonstrates "floating edges".
-
-The positions of the source and target nodes are calculated dynamically,
-the caveat here is, that edge-anchors are still tied to Handles (even though invisible in this example),
-so connections would, by default, only be triggered when hovering over the handles (bottom / top by default).
-
-<div class="mt-6">
-  <iframe src="https://codesandbox.io/embed/vue-flow-floating-edges-zfxdok?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: Floating 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-floating-edges-zfxdok?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: Floating 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>
-</div>

docs/src/examples/hidden.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Hidden
 
 You can toggle the visibility of nodes by simply setting their `hidden` attribute to either `true` or `false`.
@@ -16,9 +11,5 @@ This can save you some time on initial renders but consider that moving the pane
 which can cause performance spikes depending on the complexity of the components that have to be mounted.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="hidden"></Repl>
-    <Suspense>
-      <Repl example="hidden"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/horizontal.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Horizontal Layout
 
 Vue Flow doesn't require you to use vertical layouts.
@@ -11,9 +6,5 @@ You can use horizontal layouts with the default node types as well.
 You can define where source or target handle positions are with the `sourcePosition` or `targetPosition` properties of nodes.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="horizontal"></Repl>
-    <Suspense>
-      <Repl example="horizontal"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/index.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Basic
 
 This is a basic example to help you familiarize with the basic features of Vue Flow. 
@@ -11,9 +6,5 @@ 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">
-  <ClientOnly>
+  <Repl example="basic"></Repl>
-    <Suspense>
-      <Repl example="basic"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/interaction.md

@@ -1,7 +1,3 @@
----
-layout: page
-
----
 # Interaction
 
 Vue Flow provides options to interact and limit interaction with the viewport and graph.
@@ -10,9 +6,5 @@ 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">
-  <ClientOnly>
+  <Repl example="interaction"></Repl>
-    <Suspense>
-      <Repl example="interaction"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/intersection.md

@@ -1,15 +1,7 @@
----
-layout: page
-
----
 # Intersection
 
 Vue Flow provides utils to find intersections of nodes with other nodes (or a given area).
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="intersection"></Repl>
-    <Suspense>
-      <Repl example="intersection"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/multi.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Multi Flows
 
 Vue Flow is not limited to a single instance on a page. 
@@ -10,9 +5,5 @@ 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">
-  <ClientOnly>
+  <Repl example="multi"></Repl> 
-    <Suspense>
-      <Repl example="multi"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/nodes/index.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Custom Node
 
 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).
@@ -11,9 +6,5 @@ You can display any content and functionality inside a custom node. More documen
 up a custom node can be found on the [custom nodes page](/guide/node.html#custom-nodes).
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="customNode"></Repl>
-    <Suspense>
-      <Repl example="customNode"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/nodes/nesting.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Nested Nodes
 
 Another key feature is nested nodes (or even nested flows).
@@ -12,9 +7,5 @@ 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">
-  <ClientOnly>
+  <Repl example="nested"></Repl>
-    <Suspense>
-      <Repl example="nested"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/nodes/update-node.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Update Node
 
 Updating internal node data is simple.
@@ -14,9 +9,5 @@ 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">
-  <ClientOnly>
+  <Repl example="updateNode"></Repl> 
-    <Suspense>
-      <Repl example="updateNode"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/pinia.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Pinia
 
 Using your existing storage implementation is not an issue. 

docs/src/examples/save.md

@@ -1,8 +1,3 @@
----
-layout: page
-
----
-
 # Save & Restore
 
 There is no built-in persistent storage feature, however you can use your own storage implementation.
@@ -17,9 +12,5 @@ You can extend on this basic idea however you like, i.e. fetch data that you tra
 some other business logic you would like to handle.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="saveRestore"></Repl>
-    <Suspense>
-      <Repl example="saveRestore"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>

docs/src/examples/stress.md

@@ -1,7 +1,3 @@
----
-layout: page
-
----
 
 # Stress
 

docs/src/examples/teleport.md

@@ -1,7 +1,3 @@
----
-layout: page
-
----
 
 # Teleport
 

docs/src/examples/transition.md

@@ -1,17 +1,8 @@
----
-layout: page
-
----
-
 # Transition
 
 Vue Flow allows you to use transitions while zooming and panning around the Viewport.
 This example shows you how to use these transitions to animate actions on your graph.
 
 <div class="mt-6">
-  <ClientOnly>
+  <Repl example="transition"></Repl>
-    <Suspense>
-      <Repl example="transition"></Repl>
-    </Suspense>
-  </ClientOnly>
 </div>