From 8531ee3ad52246587783dfc9e9c76ea7fecc89b2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 29 Dec 2022 17:51:50 +0100
Subject: [PATCH] chore(docs): update repl

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/DocsRepl.vue | 52 ++++++++++++++++++------------------
 docs/components/Repl.vue     |  5 ++--
 docs/package.json            |  2 +-
 pnpm-lock.yaml               |  8 +++---
 4 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/docs/components/DocsRepl.vue b/docs/components/DocsRepl.vue
index cecca396..eac2cbfe 100644
--- a/docs/components/DocsRepl.vue
+++ b/docs/components/DocsRepl.vue
@@ -49,7 +49,7 @@ watchEffect(() => {
   vh.value = `${window.innerHeight}px`
 })
 
-const files: any = {}
+const files: Record<string, typeof imports[keyof typeof imports]> = {}
 const imports = exampleImports[props.example]
 const additionalImports = 'additionalImports' in imports ? imports.additionalImports : {}
 
@@ -61,33 +61,27 @@ for (const example of Object.keys(imports).filter((i) => i !== 'additionalImport
   }
 }
 
-onMounted(async () => {
-  await store.setVueVersion('3.2.37')
+await store.setVueVersion('3.2.37')
 
-  await store.setFiles(
-    {
-      ...files,
-      'main.css': css,
-    },
-    props.mainFile ?? 'App.vue',
-  )
+await store.setFiles(
+  {
+    ...files,
+    'main.css': css,
+  },
+  props.mainFile ?? 'App.vue',
+)
 
-  // pre-set import map
-  await store.setImportMap({
-    imports: {
-      '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
-      '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
-      '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
-      '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
-      '@vue-flow/node-resizer': `${location.origin}/vue-flow-node-resizer.mjs`,
-      '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
-      ...additionalImports,
-    },
-  })
-
-  if (isClient) {
-    document.body.className = 'examples'
-  }
+// pre-set import map
+store.setImportMap({
+  imports: {
+    '@vue-flow/background': `${location.origin}/vue-flow-background.mjs`,
+    '@vue-flow/controls': `${location.origin}/vue-flow-controls.mjs`,
+    '@vue-flow/minimap': `${location.origin}/vue-flow-minimap.mjs`,
+    '@vue-flow/core': `${location.origin}/vue-flow-core.mjs`,
+    '@vue-flow/node-resizer': `${location.origin}/vue-flow-node-resizer.mjs`,
+    '@vue-flow/node-toolbar': `${location.origin}/vue-flow-node-toolbar.mjs`,
+    ...additionalImports,
+  },
 })
 
 const sfcOptions = {
@@ -95,6 +89,12 @@ const sfcOptions = {
     reactivityTransform: true,
   },
 } as SFCOptions
+
+onMounted(() => {
+  if (isClient) {
+    document.body.className = 'examples'
+  }
+})
 </script>
 
 <template>
diff --git a/docs/components/Repl.vue b/docs/components/Repl.vue
index 02015e0f..c8d116e9 100644
--- a/docs/components/Repl.vue
+++ b/docs/components/Repl.vue
@@ -1,5 +1,6 @@
-<script>
+<script lang="ts">
 import { isClient } from '@vueuse/core'
+import { Suspense } from 'vue'
 import DocsRepl from './DocsRepl.vue'
 
 export default defineComponent({
@@ -8,7 +9,7 @@ export default defineComponent({
     return () => {
       if (!isClient) return null
 
-      return h(DocsRepl, props)
+      return h(Suspense, h(DocsRepl, props))
     }
   },
 })
diff --git a/docs/package.json b/docs/package.json
index 239f8b13..4d24a99a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -22,7 +22,7 @@
     "@vue-flow/minimap": "workspace:*",
     "@vue-flow/node-resizer": "workspace:*",
     "@vue-flow/node-toolbar": "workspace:*",
-    "@vue/repl": "1.1.2",
+    "@vue/repl": "1.3.2",
     "blobity": "^0.2.1",
     "canvas-confetti": "^1.6.0",
     "vite": "^2.9.15",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72c1e200..a085f211 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,7 +44,7 @@ importers:
       '@vue-flow/minimap': workspace:*
       '@vue-flow/node-resizer': workspace:*
       '@vue-flow/node-toolbar': workspace:*
-      '@vue/repl': 1.1.2
+      '@vue/repl': 1.3.2
       '@windicss/plugin-scrollbar': ^1.2.3
       blobity: ^0.2.1
       canvas-confetti: ^1.6.0
@@ -74,7 +74,7 @@ importers:
       '@vue-flow/minimap': link:../packages/minimap
       '@vue-flow/node-resizer': link:../packages/node-resizer
       '@vue-flow/node-toolbar': link:../packages/node-toolbar
-      '@vue/repl': 1.1.2_vue@3.2.37
+      '@vue/repl': 1.3.2_vue@3.2.37
       blobity: 0.2.1_react@18.2.0+vue@3.2.37
       canvas-confetti: 1.6.0
       vite: 2.9.15
@@ -2925,8 +2925,8 @@ packages:
       '@vue/shared': 3.2.45
     dev: true
 
-  /@vue/repl/1.1.2_vue@3.2.37:
-    resolution: {integrity: sha512-IYcoKZgwdn6spiVwGuWeXAbqAv3Nhjc/0dKEJ3BT5U6kV7KLLCwnuizjOvV8P+yFmtsfNkWbmWv9/56Pv5rH/w==}
+  /@vue/repl/1.3.2_vue@3.2.37:
+    resolution: {integrity: sha512-5joGOuTFmjaugG3E1h/oP1EXSMcVXRUwLIoo8xvYQnqDrCT6g1SfsH1pfei5PpC5DUxMX1584CekZu6REgGYkQ==}
     peerDependencies:
       vue: ^3.2.13
     dependencies: