feat: properly configure monaco editors

Author: favna

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,16 +13,16 @@
     <input
       type="text"
       class="search-section-input"
-      v-model="searchPattern"
+      v-model="state.searchPattern"
       @keyup="onSearchPatternKeyUp"
       placeholder="Search..."
     />
   </section>
 
   <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">

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>

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>

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'),

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 />