From fe0d33e3025857c3db9ada7f66d834a6fc36f076 Mon Sep 17 00:00:00 2001
From: Jeroen Claassens <support@favware.tech>
Date: Fri, 27 Jan 2023 11:34:03 +0100
Subject: [PATCH] feat: properly configure monaco editors

---
 docs/.vuepress/components/Demo/Demo.vue       | 140 +++++++-----------
 .../components/Demo/MonacoEditor.vue          |  68 ++++++++-
 .../SuspensefulDemo/SuspensefulDemo.vue       |  10 ++
 docs/.vuepress/config.ts                      |   1 +
 docs/demo.md                                  |   2 +-
 package-lock.json                             |  34 +++++
 package.json                                  |   1 +
 7 files changed, 161 insertions(+), 95 deletions(-)
 create mode 100644 docs/.vuepress/components/SuspensefulDemo/SuspensefulDemo.vue

diff --git a/docs/.vuepress/components/Demo/Demo.vue b/docs/.vuepress/components/Demo/Demo.vue
index ba7c3101c..67e92db3d 100644
--- a/docs/.vuepress/components/Demo/Demo.vue
+++ b/docs/.vuepress/components/Demo/Demo.vue
@@ -2,7 +2,7 @@
   <section>
     <MonacoEditor
       language="json"
-      :value="jsonData"
+      v-model="state.jsonData"
       id="json-list-monaco-editor"
       file-name="list.json"
       file-description="list of items to search"
@@ -13,7 +13,7 @@
     <input
       type="text"
       class="search-section-input"
-      v-model="searchPattern"
+      v-model="state.searchPattern"
       @keyup="onSearchPatternKeyUp"
       placeholder="Search..."
     />
@@ -21,8 +21,8 @@
 
   <section>
     <MonacoEditor
-      language="typescript"
-      :value="mainJsData"
+      language="javascript"
+      v-model="state.mainJsData"
       id="main-monaco-editor"
       file-name="main.js"
       file-description="entry module"
@@ -32,13 +32,13 @@
   <section class="monaco-editor-results">
     <MonacoEditor
       language="json"
-      :value="resultsData"
+      v-model="state.resultsData"
       id="main-monaco-editor"
       file-name="Results:"
       :file-description="
-        isNullish(count) || isNullish(searchTime)
+        isNullish(state.count) || isNullish(state.searchTime)
           ? ''
-          : 'found ' + count + ' in ' + searchTime + 'ms'
+          : 'found ' + state.count + ' in ' + state.searchTime + 'ms'
       "
       readonly
     ></MonacoEditor>
@@ -47,13 +47,23 @@
 
 <script setup lang="ts">
 import { Stopwatch } from '@sapphire/stopwatch'
-import { ref } from 'vue'
+import { reactive } from 'vue'
+import type FuseTypes from '../../../../dist/fuse'
 import Fuse from '../../../../dist/fuse.esm.js'
 import Books from './books.js'
 import MonacoEditor from './MonacoEditor.vue'
 
-const searchPattern = ref('')
-const fuseSearchOptions = ref({
+interface State {
+  searchPattern: string
+  jsonData: string
+  mainJsData: string
+  resultsData: string
+  count: number | null
+  searchTime: number | null
+  fuseSearchOptions: FuseTypes.IFuseOptions<never>
+}
+
+const defaultFuseSearchOptions: FuseTypes.IFuseOptions<never> = {
   isCaseSensitive: false,
   includeScore: false,
   shouldSort: true,
@@ -66,15 +76,21 @@ const fuseSearchOptions = ref({
   useExtendedSearch: false,
   ignoreLocation: false,
   ignoreFieldNorm: false,
-  fieldNormWeight: 1
-})
+  fieldNormWeight: 1,
+  keys: ['title', 'author.firstName']
+}
 
-let codify = () => {
+let codify = (
+  searchPattern: string,
+  fuseSearchOptions: FuseTypes.IFuseOptions<never> = defaultFuseSearchOptions
+): string => {
   return `
 const Fuse = require('fuse.js');
 
 const fuseOptions = {
-${Object.entries(fuseSearchOptions).map(([key, value]) => `\t// ${key}: ${value},`).join('\n')}
+${Object.entries(fuseSearchOptions)
+  .map(([key, value]) => `\t// ${key}: ${value},`)
+  .join('\n')}
 \tkeys: [
 \t\t"title",
 \t\t"author.firstName"
@@ -84,105 +100,55 @@ ${Object.entries(fuseSearchOptions).map(([key, value]) => `\t// ${key}: ${value}
 const fuse = new Fuse(list, fuseOptions);
 
 // Change the pattern
-const pattern = "${searchPattern.value}"
+const searchPattern = "${searchPattern}"
 
-return fuse.search(pattern)`
+return fuse.search(searchPattern)`
 }
 
+const state = reactive<State>({
+  searchPattern: '',
+  jsonData: JSON.stringify(Books, null, 2),
+  mainJsData: codify(''),
+  resultsData: JSON.stringify({}, null, 2),
+  count: null,
+  searchTime: null,
+  fuseSearchOptions: defaultFuseSearchOptions
+})
+
 const isNullish = <T>(
   value: null | undefined | T
 ): value is null | undefined => {
   return value === null || value === undefined
 }
 
-const jsonData = ref(JSON.stringify(Books, null, 2))
-const mainJsData = ref(codify())
-const resultsData = ref(JSON.stringify({}, null, 2))
-const count = ref<number | null>(null)
-const searchTime = ref<number | null>(null)
-
-console.log('>>>>', resultsData.value)
-
 function onSearchPatternKeyUp() {
-  mainJsData.value = codify()
+  state.mainJsData = codify(state.searchPattern, state.fuseSearchOptions)
 
   doFuseSearch()
 }
 
 function doFuseSearch() {
   try {
-    const fuseOptions = {
-      // isCaseSensitive: false,
-      // includeScore: false,
-      // shouldSort: true,
-      // includeMatches: false,
-      // findAllMatches: false,
-      // minMatchCharLength: 1,
-      // location: 0,
-      // threshold: 0.6,
-      // distance: 100,
-      // useExtendedSearch: false,
-      // ignoreLocation: false,
-      // ignoreFieldNorm: false,
-      // fieldNormWeight: 1,
+    const fuseOptions: FuseTypes.IFuseOptions<never> = {
+      ...state.fuseSearchOptions,
       keys: ['title', 'author.firstName']
     }
 
-    const fuse = new Fuse(JSON.parse(jsonData.value), fuseOptions)
+    const fuse = new Fuse(JSON.parse(state.jsonData), state.fuseSearchOptions)
 
     const stopwatch = new Stopwatch()
 
-    const result = fuse.search(searchPattern.value)
+    const result = fuse.search(state.searchPattern)
 
-    count.value = result.length
-    searchTime.value = Math.floor(stopwatch.stop().duration)
-    resultsData.value = JSON.stringify(result, null, 2)
+    state.count = result.length
+    state.searchTime = Math.floor(stopwatch.stop().duration)
+    state.resultsData = JSON.stringify(result, null, 2)
   } catch {
-    count.value = null
-    searchTime.value = null
-    resultsData.value = JSON.stringify({}, null, 2)
+    state.count = null
+    state.searchTime = null
+    state.resultsData = JSON.stringify({}, null, 2)
   }
 }
-
-// function onCmCodeChange(newCode) {
-//   code.value = newCode
-//   try {
-//     parse()
-//     update()
-//   } catch (err) {}
-// }
-
-// function onCmListChange(newCode) {
-//   try {
-//     list.value = eval(newCode)
-//     listErrorMessage.value = null
-//     hasErrors.value = !!codeErrorMessage.value
-//     update()
-//   } catch (err) {
-//     listErrorMessage.value = err
-//     hasErrors.value = true
-//     outputHtml.value = ''
-//     throw err
-//   }
-// }
-
-// function update() {
-//   if (hasErrors.value) {
-//     return
-//   }
-//   const html = Prism.highlight(
-//     JSON.stringify(result.value, null, 2),
-//     Prism.languages.json,
-//     'json'
-//   )
-//   count.value = result.value.length
-//   outputHtml.value = html
-// }
-
-// onMounted(() => {
-//   // parse()
-//   // update()
-// })
 </script>
 
 <style scoped lang="css">
diff --git a/docs/.vuepress/components/Demo/MonacoEditor.vue b/docs/.vuepress/components/Demo/MonacoEditor.vue
index 8a3c263c3..5ce41ae3b 100644
--- a/docs/.vuepress/components/Demo/MonacoEditor.vue
+++ b/docs/.vuepress/components/Demo/MonacoEditor.vue
@@ -1,20 +1,63 @@
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
-import { defineProps, onMounted, ref } from 'vue'
+import * as Monaco from 'monaco-editor'
+import { computed, defineProps, onMounted, ref, watch } from 'vue'
+import loader from '@monaco-editor/loader';
+
+interface Emits {
+  (event: 'update:modelValue', value: string): void
+  (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
+}
 
-const editorRef = ref()
 const props = defineProps<{
   language: string
-  value: any
+  modelValue: string
   id: string
   fileName: string
   fileDescription: string
   readonly?: boolean
 }>()
 
+const loadedMonaco = await loader.init();
+
+const emit = defineEmits<Emits>()
+const isLoading = ref(true)
+const lang = computed(() => props.language)
+const editorElement = ref<HTMLDivElement>()
+const monaco = ref(loadedMonaco)
+
+let editor: Monaco.editor.IStandaloneCodeEditor
+let model: Monaco.editor.ITextModel
+const editorRef = ref()
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (editor?.getValue() !== props.modelValue) {
+      editor?.setValue(props.modelValue)
+    }
+  }
+)
+
+watch(
+  () => props.language,
+  () => {
+    if (model) {
+      model.dispose()
+    }
+    model = monaco.value.editor.createModel(props.modelValue, lang.value)
+    editor?.setModel(model)
+  }
+)
+
+defineExpose({
+  /**
+   * Monaco editor instance
+   */
+  $editor: editorRef
+})
+
 onMounted(() => {
-  monaco.editor.create(editorRef.value, {
-    value: props.value,
+  editor = monaco.value.editor.create(editorElement.value, {
     language: props.language,
     automaticLayout: true,
     selectOnLineNumbers: true,
@@ -49,6 +92,15 @@ onMounted(() => {
       contextmenu: false
     })
   })
+
+  editorRef.value = editor
+  model = monaco.value.editor.createModel(props.modelValue, lang.value)
+  editor.setModel(model)
+  editor.onDidChangeModelContent(() => {
+    emit('update:modelValue', editor.getValue())
+  })
+  isLoading.value = false
+  emit('load', editor)
 })
 </script>
 
@@ -57,7 +109,9 @@ onMounted(() => {
     <div>{{ props.fileName }}</div>
     <div>{{ props.fileDescription }}</div>
   </div>
-  <div :id="props.id" class="editor" ref="editorRef"></div>
+  <div :id="props.id" class="editor" ref="editorElement">
+    <slot v-if="isLoading" />
+  </div>
 </template>
 
 <style scoped>
diff --git a/docs/.vuepress/components/SuspensefulDemo/SuspensefulDemo.vue b/docs/.vuepress/components/SuspensefulDemo/SuspensefulDemo.vue
new file mode 100644
index 000000000..3549649c2
--- /dev/null
+++ b/docs/.vuepress/components/SuspensefulDemo/SuspensefulDemo.vue
@@ -0,0 +1,10 @@
+<template>
+  <Suspense>
+    <Demo />
+    <template #fallback>Loading demo...</template>
+  </Suspense>
+</template>
+
+<script setup lang="ts">
+import Demo from '../Demo/Demo.vue'
+</script>
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index af43d3a63..af6b5d652 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -106,6 +106,7 @@ function getPlugins(): PluginConfig {
         ...getComponent('Stories'),
         ...getComponent('Sponsors'),
         ...getComponent('Demo'),
+        ...getComponent('SuspensefulDemo'),
         ...getComponent('Team'),
         ...getComponent('Jobs'),
         ...getComponent('Donate'),
diff --git a/docs/demo.md b/docs/demo.md
index eabdb735d..bf07f97e3 100644
--- a/docs/demo.md
+++ b/docs/demo.md
@@ -4,6 +4,6 @@
 
 Play around with a live demo of Fuse.js. Have a look at the [options](api/options.html) to understand what they mean.
 
-<Demo />
+<SuspensefulDemo />
 
 <Donate />
diff --git a/package-lock.json b/package-lock.json
index 740fe383a..9e3361083 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@babel/preset-typescript": "7.18.6",
         "@commitlint/cli": "^17.4.2",
         "@commitlint/config-conventional": "^17.4.2",
+        "@monaco-editor/loader": "^1.3.2",
         "@rollup/plugin-babel": "^6.0.3",
         "@rollup/plugin-node-resolve": "^15.0.1",
         "@rollup/plugin-replace": "^5.0.2",
@@ -2557,6 +2558,18 @@
       "integrity": "sha512-ygCGP7vFpqS02hpZwEe1uz8cfImWX06+zRs08J+tCZRKb6k+easIaIHFtY9ZSxt7j9L/gAPLDo/5RmOT6z0DPQ==",
       "dev": true
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz",
+      "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "dev": true,
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
     "node_modules/@nicolo-ribaudo/chokidar-2": {
       "version": "2.1.8-no-fsevents.3",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@@ -9599,6 +9612,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "dev": true
+    },
     "node_modules/std-env": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.1.tgz",
@@ -12995,6 +13014,15 @@
       "integrity": "sha512-ygCGP7vFpqS02hpZwEe1uz8cfImWX06+zRs08J+tCZRKb6k+easIaIHFtY9ZSxt7j9L/gAPLDo/5RmOT6z0DPQ==",
       "dev": true
     },
+    "@monaco-editor/loader": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.3.2.tgz",
+      "integrity": "sha512-BTDbpHl3e47r3AAtpfVFTlAi7WXv4UQ/xZmz8atKl4q7epQV5e7+JbigFDViWF71VBi4IIBdcWP57Hj+OWuc9g==",
+      "dev": true,
+      "requires": {
+        "state-local": "^1.0.6"
+      }
+    },
     "@nicolo-ribaudo/chokidar-2": {
       "version": "2.1.8-no-fsevents.3",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz",
@@ -18306,6 +18334,12 @@
         }
       }
     },
+    "state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "dev": true
+    },
     "std-env": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.3.1.tgz",
diff --git a/package.json b/package.json
index 2707a24bf..a5d7c3720 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "@babel/preset-typescript": "7.18.6",
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
+    "@monaco-editor/loader": "^1.3.2",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",