@guolao/vue-monaco-editor - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lib/cjs/components/editor/Editor.js

@@ -91,7 +91,9 @@ 'use strict';
   vue.onMounted(() => {
-    const stop = vue.watchEffect(() => {
-      if (monacoRef.value) {
+    const stop = vue.watch(monacoRef, () => {
+      if (containerRef.value && monacoRef.value) {
         vue.nextTick(() => stop());
         createEditor();
       }
+    }, {
+      immediate: true
     });
@@ -141,3 +143,3 @@ });
   const disposeValidator = vue.ref(null);
-  const stop = vue.watchEffect(() => {
+  const stop = vue.watch([monacoRef, editorRef], () => {
     if (monacoRef.value && editorRef.value) {
@@ -144,0 +146,0 @@ vue.nextTick(() => stop());

lib/es/components/editor/Editor.js

@@ -1,2 +0,2 @@
-import { defineComponent, shallowRef, computed, onUnmounted, watch, createVNode, onMounted, watchEffect, nextTick, ref } from 'vue';
+import { defineComponent, shallowRef, computed, onUnmounted, watch, createVNode, onMounted, nextTick, ref } from 'vue';
 import useMonaco from '../../hooks/useMonaco.js';
@@ -87,7 +87,9 @@ import { editorProps } from './types.js';
   onMounted(() => {
-    const stop = watchEffect(() => {
-      if (monacoRef.value) {
+    const stop = watch(monacoRef, () => {
+      if (containerRef.value && monacoRef.value) {
         nextTick(() => stop());
         createEditor();
       }
+    }, {
+      immediate: true
     });
@@ -137,3 +139,3 @@ });
   const disposeValidator = ref(null);
-  const stop = watchEffect(() => {
+  const stop = watch([monacoRef, editorRef], () => {
     if (monacoRef.value && editorRef.value) {
@@ -140,0 +142,0 @@ nextTick(() => stop());

lib/umd/monaco-vue.js

@@ -268,7 +268,9 @@ (function (global, factory) {
     vue.onMounted(() => {
-      const stop = vue.watchEffect(() => {
-        if (monacoRef.value) {
+      const stop = vue.watch(monacoRef, () => {
+        if (containerRef.value && monacoRef.value) {
           vue.nextTick(() => stop());
           createEditor();
         }
+      }, {
+        immediate: true
       });
@@ -318,3 +320,3 @@ });
     const disposeValidator = vue.ref(null);
-    const stop = vue.watchEffect(() => {
+    const stop = vue.watch([monacoRef, editorRef], () => {
       if (monacoRef.value && editorRef.value) {
@@ -321,0 +323,0 @@ vue.nextTick(() => stop());

lib/umd/monaco-vue.min.js

@@ -1,1 +0,1 @@
-!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("vue")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.Vue)}(this,(function(exports,loader,vue){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader);function useMonaco(){const monacoRef=vue.shallowRef(null),monacoLoader=loader__default.default.init();return monacoLoader.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})),{monacoRef:monacoRef,unload:()=>monacoLoader.cancel()}}const editorProps={defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"light"},line:Number,options:{type:Object,default:()=>({})},overrideServices:{type:Object,default:()=>({})},saveViewState:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String,"onUpdate:value":Function,onBeforeMount:Function,onMount:Function,onChange:Function,onValidate:Function};function getOrCreateModel(monaco,value,language,path){return function(monaco,path){return monaco.editor.getModel(createModelUri(monaco,path))}(monaco,path)||function(monaco,value,language,path){return monaco.editor.createModel(value,language,path?createModelUri(monaco,path):void 0)}(monaco,value,language,path)}function createModelUri(monaco,path){return monaco.Uri.parse(path)}const monacoContainerProps={width:{type:[Number,String],required:!0},height:{type:[Number,String],required:!0},isEditorReady:{type:Boolean,required:!0},className:String,setContainerRef:Function},styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"},loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var Loading=vue.defineComponent(((props,_ref)=>{let{slots:slots}=_ref;return()=>{var _slots$default;return vue.createVNode("div",{style:vue.normalizeStyle(loadingStyles)},[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)])}})),MonacoContainer=vue.defineComponent({props:monacoContainerProps,setup(props,_ref){let{slots:slots}=_ref;const wrapperStyle=vue.computed((()=>{const{width:width,height:height}=props;return vue.normalizeStyle({...styles_wrapper,width:width,height:height})})),containerStyle=vue.computed((()=>vue.normalizeStyle({...styles_fullWidth,...!props.isEditorReady&&styles_hide})));return()=>{var _slots$default;return vue.createVNode("div",{style:wrapperStyle.value},[!props.isEditorReady&&vue.createVNode(Loading,null,{default:()=>[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)]}),vue.createVNode("div",{ref:props.setContainerRef,style:containerStyle.value,class:props.className},null)])}}}),Editor=vue.defineComponent({props:editorProps,setup(props,_ref){let{slots:slots}=_ref;const viewStates=new Map,containerRef=vue.shallowRef(null),setContainerRef=el=>containerRef.value=el,{monacoRef:monacoRef,unload:unload}=useMonaco(),{editorRef:editorRef}=function(props,monacoRef,containerRef){const editorRef=vue.shallowRef(null);function createEditor(){var _props$onBeforeMount,_editorRef$value2,_props$onMount;if(!containerRef.value||!monacoRef.value||editorRef.value)return;null===(_props$onBeforeMount=props.onBeforeMount)||void 0===_props$onBeforeMount||_props$onBeforeMount.call(props,monacoRef.value);const autoCreatedModelPath=props.path||props.defaultPath,defaultModel=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,autoCreatedModelPath);editorRef.value=monacoRef.value.editor.create(containerRef.value,{model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0,...props.options},props.overrideServices),null===(_editorRef$value2=editorRef.value)||void 0===_editorRef$value2||_editorRef$value2.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();var _props$onUpdateValue,_props$onChange;value!==props.value&&(null===(_props$onUpdateValue=props["onUpdate:value"])||void 0===_props$onUpdateValue||_props$onUpdateValue.call(props,value),null===(_props$onChange=props.onChange)||void 0===_props$onChange||_props$onChange.call(props,value,event))})),null===(_props$onMount=props.onMount)||void 0===_props$onMount||_props$onMount.call(props,editorRef.value,monacoRef.value)}return vue.onMounted((()=>{const stop=vue.watchEffect((()=>{monacoRef.value&&(vue.nextTick((()=>stop())),createEditor())}))})),{editorRef:editorRef}}(props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function(props,monacoRef,editorRef){const disposeValidator=vue.ref(null),stop=vue.watchEffect((()=>{if(monacoRef.value&&editorRef.value){vue.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _editorRef$value3,_editorRef$value3$get;const editorUri=null===(_editorRef$value3=editorRef.value)||void 0===_editorRef$value3||null===(_editorRef$value3$get=_editorRef$value3.getModel())||void 0===_editorRef$value3$get?void 0:_editorRef$value3$get.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){var _props$onValidate;const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});null===(_props$onValidate=props.onValidate)||void 0===_props$onValidate||_props$onValidate.call(props,markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(props,monacoRef,editorRef),isEditorReady=vue.computed((()=>!!monacoRef.value&&!!editorRef.value));return vue.onUnmounted((()=>{var _disposeValidator$val,_getModel,_editorRef$value;null===(_disposeValidator$val=disposeValidator.value)||void 0===_disposeValidator$val||_disposeValidator$val.call(disposeValidator),null===(_getModel=editorRef.value.getModel())||void 0===_getModel||_getModel.dispose(),(null===(_editorRef$value=editorRef.value)||void 0===_editorRef$value?void 0:_editorRef$value.dispose())??unload()})),vue.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),vue.watch((()=>props.path),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,newPath);model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vue.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vue.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),vue.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vue.watch((()=>props.line),(line=>{editorRef.value&&void 0!==line&&editorRef.value.revealLine(line)})),()=>{var _slots$default;return vue.createVNode(MonacoContainer,{setContainerRef:setContainerRef,width:props.width,height:props.height,isEditorReady:isEditorReady.value},{default:()=>[(null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots))??"loading..."]})}}});Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.MonacoContainer=MonacoContainer,exports.default=Editor,exports.useMonaco=useMonaco,Object.defineProperty(exports,"__esModule",{value:!0})}));
+!function(global,factory){"object"==typeof exports&&"undefined"!=typeof module?factory(exports,require("@monaco-editor/loader"),require("vue")):"function"==typeof define&&define.amd?define(["exports","@monaco-editor/loader","vue"],factory):factory((global="undefined"!=typeof globalThis?globalThis:global||self).monaco_vue={},global.monaco_loader,global.Vue)}(this,(function(exports,loader,vue){"use strict";function _interopDefaultLegacy(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var loader__default=_interopDefaultLegacy(loader);function useMonaco(){const monacoRef=vue.shallowRef(null),monacoLoader=loader__default.default.init();return monacoLoader.then((monacoInstance=>monacoRef.value=monacoInstance)).catch((error=>{"cancelation"!==(null==error?void 0:error.type)&&console.error("Monaco initialization error:",error)})),{monacoRef:monacoRef,unload:()=>monacoLoader.cancel()}}const editorProps={defaultValue:String,defaultPath:String,defaultLanguage:String,value:String,language:String,path:String,theme:{type:String,default:"light"},line:Number,options:{type:Object,default:()=>({})},overrideServices:{type:Object,default:()=>({})},saveViewState:{type:Boolean,default:!0},width:{type:[Number,String],default:"100%"},height:{type:[Number,String],default:"100%"},className:String,"onUpdate:value":Function,onBeforeMount:Function,onMount:Function,onChange:Function,onValidate:Function};function getOrCreateModel(monaco,value,language,path){return function(monaco,path){return monaco.editor.getModel(createModelUri(monaco,path))}(monaco,path)||function(monaco,value,language,path){return monaco.editor.createModel(value,language,path?createModelUri(monaco,path):void 0)}(monaco,value,language,path)}function createModelUri(monaco,path){return monaco.Uri.parse(path)}const monacoContainerProps={width:{type:[Number,String],required:!0},height:{type:[Number,String],required:!0},isEditorReady:{type:Boolean,required:!0},className:String,setContainerRef:Function},styles_wrapper={display:"flex",position:"relative",textAlign:"initial"},styles_fullWidth={width:"100%"},styles_hide={display:"none"},loadingStyles={display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"};var Loading=vue.defineComponent(((props,_ref)=>{let{slots:slots}=_ref;return()=>{var _slots$default;return vue.createVNode("div",{style:vue.normalizeStyle(loadingStyles)},[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)])}})),MonacoContainer=vue.defineComponent({props:monacoContainerProps,setup(props,_ref){let{slots:slots}=_ref;const wrapperStyle=vue.computed((()=>{const{width:width,height:height}=props;return vue.normalizeStyle({...styles_wrapper,width:width,height:height})})),containerStyle=vue.computed((()=>vue.normalizeStyle({...styles_fullWidth,...!props.isEditorReady&&styles_hide})));return()=>{var _slots$default;return vue.createVNode("div",{style:wrapperStyle.value},[!props.isEditorReady&&vue.createVNode(Loading,null,{default:()=>[null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots)]}),vue.createVNode("div",{ref:props.setContainerRef,style:containerStyle.value,class:props.className},null)])}}}),Editor=vue.defineComponent({props:editorProps,setup(props,_ref){let{slots:slots}=_ref;const viewStates=new Map,containerRef=vue.shallowRef(null),setContainerRef=el=>containerRef.value=el,{monacoRef:monacoRef,unload:unload}=useMonaco(),{editorRef:editorRef}=function(props,monacoRef,containerRef){const editorRef=vue.shallowRef(null);function createEditor(){var _props$onBeforeMount,_editorRef$value2,_props$onMount;if(!containerRef.value||!monacoRef.value||editorRef.value)return;null===(_props$onBeforeMount=props.onBeforeMount)||void 0===_props$onBeforeMount||_props$onBeforeMount.call(props,monacoRef.value);const autoCreatedModelPath=props.path||props.defaultPath,defaultModel=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,autoCreatedModelPath);editorRef.value=monacoRef.value.editor.create(containerRef.value,{model:defaultModel,theme:props.theme,automaticLayout:!0,autoIndent:"brackets",formatOnPaste:!0,formatOnType:!0,...props.options},props.overrideServices),null===(_editorRef$value2=editorRef.value)||void 0===_editorRef$value2||_editorRef$value2.onDidChangeModelContent((event=>{const value=editorRef.value.getValue();var _props$onUpdateValue,_props$onChange;value!==props.value&&(null===(_props$onUpdateValue=props["onUpdate:value"])||void 0===_props$onUpdateValue||_props$onUpdateValue.call(props,value),null===(_props$onChange=props.onChange)||void 0===_props$onChange||_props$onChange.call(props,value,event))})),null===(_props$onMount=props.onMount)||void 0===_props$onMount||_props$onMount.call(props,editorRef.value,monacoRef.value)}return vue.onMounted((()=>{const stop=vue.watch(monacoRef,(()=>{containerRef.value&&monacoRef.value&&(vue.nextTick((()=>stop())),createEditor())}),{immediate:!0})})),{editorRef:editorRef}}(props,monacoRef,containerRef),{disposeValidator:disposeValidator}=function(props,monacoRef,editorRef){const disposeValidator=vue.ref(null),stop=vue.watch([monacoRef,editorRef],(()=>{if(monacoRef.value&&editorRef.value){vue.nextTick((()=>stop()));const changeMarkersListener=monacoRef.value.editor.onDidChangeMarkers((uris=>{var _editorRef$value3,_editorRef$value3$get;const editorUri=null===(_editorRef$value3=editorRef.value)||void 0===_editorRef$value3||null===(_editorRef$value3$get=_editorRef$value3.getModel())||void 0===_editorRef$value3$get?void 0:_editorRef$value3$get.uri;if(editorUri){if(uris.find((uri=>uri.path===editorUri.path))){var _props$onValidate;const markers=monacoRef.value.editor.getModelMarkers({resource:editorUri});null===(_props$onValidate=props.onValidate)||void 0===_props$onValidate||_props$onValidate.call(props,markers)}}}));disposeValidator.value=()=>null==changeMarkersListener?void 0:changeMarkersListener.dispose()}}));return{disposeValidator:disposeValidator}}(props,monacoRef,editorRef),isEditorReady=vue.computed((()=>!!monacoRef.value&&!!editorRef.value));return vue.onUnmounted((()=>{var _disposeValidator$val,_getModel,_editorRef$value;null===(_disposeValidator$val=disposeValidator.value)||void 0===_disposeValidator$val||_disposeValidator$val.call(disposeValidator),null===(_getModel=editorRef.value.getModel())||void 0===_getModel||_getModel.dispose(),(null===(_editorRef$value=editorRef.value)||void 0===_editorRef$value?void 0:_editorRef$value.dispose())??unload()})),vue.watch((()=>props.value),(newValue=>{editorRef.value&&editorRef.value.getValue()!==newValue&&editorRef.value.setValue(newValue)})),vue.watch((()=>props.path),((newPath,oldPath)=>{const model=getOrCreateModel(monacoRef.value,props.value||props.defaultValue,props.language||props.defaultLanguage,newPath);model!==editorRef.value.getModel()&&(props.saveViewState&&viewStates.set(oldPath,editorRef.value.saveViewState()),editorRef.value.setModel(model),props.saveViewState&&editorRef.value.restoreViewState(viewStates.get(newPath)))})),vue.watch((()=>props.options),(options=>editorRef.value&&editorRef.value.updateOptions(options)),{deep:!0}),vue.watch((()=>props.theme),(theme=>monacoRef.value&&monacoRef.value.editor.setTheme(theme))),vue.watch((()=>props.language),(language=>isEditorReady.value&&monacoRef.value.editor.setModelLanguage(editorRef.value.getModel(),language))),vue.watch((()=>props.line),(line=>{editorRef.value&&void 0!==line&&editorRef.value.revealLine(line)})),()=>{var _slots$default;return vue.createVNode(MonacoContainer,{setContainerRef:setContainerRef,width:props.width,height:props.height,isEditorReady:isEditorReady.value},{default:()=>[(null===(_slots$default=slots.default)||void 0===_slots$default?void 0:_slots$default.call(slots))??"loading..."]})}}});Object.defineProperty(exports,"loader",{enumerable:!0,get:function(){return loader__default.default}}),exports.MonacoContainer=MonacoContainer,exports.default=Editor,exports.useMonaco=useMonaco,Object.defineProperty(exports,"__esModule",{value:!0})}));

package.json

 {
   "name": "@guolao/vue-monaco-editor",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Monaco Editor for Vue - use the monaco-editor in any Vue application without needing to use webpack (or rollup/vite) configuration files / plugins",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74027

increased by0.37%

Lines of code

1190

increased by0.51%

No dependency changes