nuxt-monaco-editor 1.2.6 → 1.2.7

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.2.7](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.6...v1.2.7) (2024-01-20)
+
+
+### Bug Fixes
+
+* restore explicit imports ([d44ab28](https://github.com/e-chan1007/nuxt-monaco-editor/commit/d44ab28ca35c79edbefd69ea45161b8f51632d29))
+* use `watch` for the target element ([878d3e7](https://github.com/e-chan1007/nuxt-monaco-editor/commit/878d3e735819bbbae245af3db7520a3a00a4237b))
+* use `watch` instead of `onMounted` ([6e48fd1](https://github.com/e-chan1007/nuxt-monaco-editor/commit/6e48fd1672517719917d47a3012feb019d46530d))
+
 ### [1.2.6](https://github.com/e-chan1007/nuxt-monaco-editor/compare/v1.2.5...v1.2.6) (2023-12-10)
 
 

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.1.0"
   },
-  "version": "1.2.6"
+  "version": "1.2.7"
 }

package/dist/runtime/MonacoDiffEditor.client.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
 import { defu } from 'defu'
 import { useMonaco } from './composables'
 
@@ -44,8 +44,8 @@ const monaco = useMonaco()!
 let editor: Monaco.editor.IStandaloneDiffEditor
 let originalModel: Monaco.editor.ITextModel
 let modifiedModel: Monaco.editor.ITextModel
-const editorRef = shallowRef<Monaco.editor.IStandaloneDiffEditor>()
 
+const editorRef = shallowRef<Monaco.editor.IStandaloneDiffEditor>()
 const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true
 }
@@ -81,7 +81,8 @@ defineExpose({
   $editor: editorRef
 })
 
-onMounted(() => {
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
   editor = monaco.editor.createDiffEditor(editorElement.value!, defu(props.options, defaultOptions))
   editorRef.value = editor
   originalModel = monaco.editor.createModel(props.original, props.lang)
@@ -99,7 +100,7 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+onBeforeUnmount(() => {
   editor?.dispose()
   originalModel?.dispose()
   modifiedModel?.dispose()

package/dist/runtime/MonacoEditor.client.vue

@@ -6,26 +6,26 @@
 
 <script lang="ts" setup>
 import type * as Monaco from 'monaco-editor'
-import { computed, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+import { computed, ref, shallowRef, watch, onBeforeUnmount } from 'vue'
 import { defu } from 'defu'
 import { useMonaco } from './composables'
 
 interface Props {
-  /**
-   * Programming Language (Not a locale for UI);
-   * overrides `options.language`
-   */
-  lang?: string;
-  /**
-   * Options passed to the second argument of `monaco.editor.create`
-   */
-  options?: Monaco.editor.IStandaloneEditorConstructionOptions;
-  modelValue?: string;
+    /**
+     * Programming Language (Not a locale for UI);
+     * overrides `options.language`
+     */
+    lang?: string;
+    /**
+     * Options passed to the second argument of `monaco.editor.create`
+     */
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
+    modelValue?: string;
 }
 
 interface Emits {
-  (event: 'update:modelValue', value: string): void
-  (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
+    (event: 'update:modelValue', value: string): void
+    (event: 'load', editor: Monaco.editor.IStandaloneCodeEditor): void
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -33,28 +33,30 @@ const props = withDefaults(defineProps<Props>(), {
   options: () => ({}),
   modelValue: () => ''
 })
+
 const emit = defineEmits<Emits>()
 const isLoading = ref(true)
-
 const lang = computed(() => props.lang || props.options.language)
-
-const editorElement = shallowRef<HTMLDivElement>()
-const monaco = useMonaco()!
-
-let editor: Monaco.editor.IStandaloneCodeEditor
-let model: Monaco.editor.ITextModel
 const editorRef = shallowRef<Monaco.editor.IStandaloneCodeEditor>()
-
+const editorElement = ref<HTMLDivElement>()
+const monaco = useMonaco()!
 const defaultOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
   automaticLayout: true
 }
 
+let editor: Monaco.editor.IStandaloneCodeEditor
+let model: Monaco.editor.ITextModel
+
 watch(() => props.modelValue, () => {
-  if (editor?.getValue() !== props.modelValue) { editor?.setValue(props.modelValue) }
+  if (editor?.getValue() !== props.modelValue) {
+    editor?.setValue(props.modelValue)
+  }
 })
 
 watch(() => props.lang, () => {
-  if (model) { model.dispose() }
+  if (model) {
+    model.dispose()
+  }
   model = monaco.editor.createModel(props.modelValue, lang.value)
   editor?.setModel(model)
 })
@@ -63,17 +65,12 @@ watch(() => props.options, () => {
   editor?.updateOptions(defu(props.options, defaultOptions))
 })
 
-defineExpose({
-  /**
-   * Monaco editor instance
-   */
-  $editor: editorRef
-})
-
-onMounted(() => {
+watch(editorElement, (newValue, oldValue) => {
+  if (!editorElement.value || oldValue) { return }
   editor = monaco.editor.create(editorElement.value!, defu(props.options, defaultOptions))
-  editorRef.value = editor
   model = monaco.editor.createModel(props.modelValue, lang.value)
+  editorRef.value = editor
+  editor.layout()
   editor.setModel(model)
   editor.onDidChangeModelContent(() => {
     emit('update:modelValue', editor.getValue())
@@ -82,7 +79,14 @@ onMounted(() => {
   emit('load', editor)
 })
 
-onUnmounted(() => {
+defineExpose({
+  /**
+     * Monaco editor instance
+     */
+  $editor: editorRef
+})
+
+onBeforeUnmount(() => {
   editor?.dispose()
   model?.dispose()
 })

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "https://github.com/e-chan1007/nuxt-monaco-editor.git"
   },
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "license": "MIT",
   "exports": {