vue-monaco - npm Package Compare versions

Comparing version 0.1.6 to 0.2.0

dist/vue-monaco.js

 (function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global.VueMonaco = factory());
-}(this, (function () { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('monaco-editor')) :
+  typeof define === 'function' && define.amd ? define(['monaco-editor'], factory) :
+  (global.VueMonaco = factory(global.monaco));
+}(this, (function (monaco) { 'use strict';
 
-/*!
- * nano-assign v1.0.0
- * (c) 2017-present egoist <[e-mail]>
- * Released under the MIT License.
- */
-var index = function(obj) {
-  var arguments$1 = arguments;
+  /*!
+   * nano-assign v1.0.0
+   * (c) 2017-present egoist <[e-mail]>
+   * Released under the MIT License.
+   */
 
-  for (var i = 1; i < arguments.length; i++) {
-    // eslint-disable-next-line guard-for-in, prefer-rest-params
-    for (var p in arguments[i]) { obj[p] = arguments$1[i][p]; }
-  }
-  return obj
-};
+  var index = function(obj) {
+    var arguments$1 = arguments;
 
-var nanoAssign_common = index;
+    for (var i = 1; i < arguments.length; i++) {
+      // eslint-disable-next-line guard-for-in, prefer-rest-params
+      for (var p in arguments[i]) { obj[p] = arguments$1[i][p]; }
+    }
+    return obj
+  };
 
-// eslint-disable-next-line no-unused-vars
-var MonacoEditor$1 = {
-  name: 'MonacoEditor',
+  var nanoAssign_common = index;
 
-  props: {
-    value: String,
-    theme: {
-      type: String,
-      default: 'vs'
+  var MonacoEditor = {
+    name: 'MonacoEditor',
+    props: {
+      value: String,
+      theme: {
+        type: String,
+        default: 'vs'
+      },
+      language: String,
+      options: Object,
+      amd: {
+        type: Boolean,
+        default: false
+      },
+      require: {
+        type: Function,
+        default: window.require
+      }
     },
-    language: String,
-    options: Object,
-    placeholder: null,
-    require: {
-      type: Function,
-      default: window.require
-    }
-  },
+    model: {
+      event: 'change'
+    },
+    watch: {
+      options: {
+        deep: true,
 
-  model: {
-    event: 'change'
-  },
+        handler: function handler(options) {
+          if (this.editor) {
+            this.editor.updateOptions(options);
+          }
+        }
 
-  data: function data() {
-    return {
-      editorLoaded: false
-    }
-  },
+      },
 
-  watch: {
-    options: {
-      deep: true,
-      handler: function handler(options) {
+      value: function value(newValue) {
         if (this.editor) {
-          this.editor.updateOptions(options);
+          if (newValue !== this.editor.getValue()) {
+            this.editor.setValue(newValue);
+          }
         }
-      }
-    },
+      },
 
-    value: function value(newValue) {
-      if (this.editor) {
-        if (newValue !== this.editor.getValue()) {
-          this.editor.setValue(newValue);
+      language: function language(newVal) {
+        if (this.editor) {
+          window.monaco.editor.setModelLanguage(this.editor.getModel(), newVal);
         }
+      },
+
+      theme: function theme(newVal) {
+        if (this.editor) {
+          window.monaco.editor.setTheme(newVal);
+        }
       }
+
     },
 
-    language: function language(newVal) {
-      if (this.editor) {
-        window.monaco.editor.setModelLanguage(this.editor.getModel(), newVal);
+    mounted: function mounted() {
+      var this$1 = this;
+
+      if (this.amd) {
+        this.require(['vs/editor/editor.main'], function () {
+          this$1.initMonaco(window.monaco);
+        });
+      } else {
+        this.initMonaco(monaco);
       }
     },
 
-    theme: function theme(newVal) {
-      if (this.editor) {
-        window.monaco.editor.setTheme(newVal);
-      }
-    }
-  },
+    beforeDestroy: function beforeDestroy() {
+      this.editor && this.editor.dispose();
+    },
 
-  mounted: function mounted() {
-    var this$1 = this;
+    methods: {
+      initMonaco: function initMonaco(monaco$$1) {
+        var this$1 = this;
 
-    var options = nanoAssign_common({}, {value: this.value,
-      theme: this.theme,
-      language: this.language},
-      this.options);
+        var options = nanoAssign_common({
+          value: this.value,
+          theme: this.theme,
+          language: this.language
+        }, this.options);
+        this.editor = monaco$$1.editor.create(this.$el, options);
+        this.$emit('editorDidMount', this.editor);
+        this.editor.onContextMenu(function (event) { return this$1.$emit('contextMenu', event); });
+        this.editor.onDidBlurEditor(function () { return this$1.$emit('blur'); });
+        this.editor.onDidBlurEditorText(function () { return this$1.$emit('blurText'); });
+        this.editor.onDidChangeConfiguration(function (event) { return this$1.$emit('configuration', event); });
+        this.editor.onDidChangeCursorPosition(function (event) { return this$1.$emit('position', event); });
+        this.editor.onDidChangeCursorSelection(function (event) { return this$1.$emit('selection', event); });
+        this.editor.onDidChangeModel(function (event) { return this$1.$emit('model', event); });
+        this.editor.onDidChangeModelContent(function (event) {
+          var value = this$1.editor.getValue();
 
-    this.require(['vs/editor/editor.main'], function () {
-      this$1.editorLoaded = true;
-      this$1.editor = window.monaco.editor.create(this$1.$el, options);
-      this$1.$emit('editorMount', this$1.editor);
-      this$1.editor.onContextMenu(function (event) { return this$1.$emit('contextMenu', event); });
-      this$1.editor.onDidBlurEditor(function () { return this$1.$emit('blur'); });
-      this$1.editor.onDidBlurEditorText(function () { return this$1.$emit('blurText'); });
-      this$1.editor.onDidChangeConfiguration(function (event) { return this$1.$emit('configuration', event); }
-      );
-      this$1.editor.onDidChangeCursorPosition(function (event) { return this$1.$emit('position', event); }
-      );
-      this$1.editor.onDidChangeCursorSelection(function (event) { return this$1.$emit('selection', event); }
-      );
-      this$1.editor.onDidChangeModel(function (event) { return this$1.$emit('model', event); });
-      this$1.editor.onDidChangeModelContent(function (event) {
-        var value = this$1.editor.getValue();
-        if (this$1.value !== value) {
-          this$1.$emit('change', value, event);
-        }
-      });
-      this$1.editor.onDidChangeModelDecorations(function (event) { return this$1.$emit('modelDecorations', event); }
-      );
-      this$1.editor.onDidChangeModelLanguage(function (event) { return this$1.$emit('modelLanguage', event); }
-      );
-      this$1.editor.onDidChangeModelOptions(function (event) { return this$1.$emit('modelOptions', event); }
-      );
-      this$1.editor.onDidDispose(function (event) { return this$1.$emit('afterDispose', event); });
-      this$1.editor.onDidFocusEditor(function () { return this$1.$emit('focus'); });
-      this$1.editor.onDidFocusEditorText(function () { return this$1.$emit('focusText'); });
-      this$1.editor.onDidLayoutChange(function (event) { return this$1.$emit('layout', event); });
-      this$1.editor.onDidScrollChange(function (event) { return this$1.$emit('scroll', event); });
-      this$1.editor.onKeyDown(function (event) { return this$1.$emit('keydown', event); });
-      this$1.editor.onKeyUp(function (event) { return this$1.$emit('keyup', event); });
-      this$1.editor.onMouseDown(function (event) { return this$1.$emit('mouseDown', event); });
-      this$1.editor.onMouseLeave(function (event) { return this$1.$emit('mouseLeave', event); });
-      this$1.editor.onMouseMove(function (event) { return this$1.$emit('mouseMove', event); });
-      this$1.editor.onMouseUp(function (event) { return this$1.$emit('mouseUp', event); });
-    });
-  },
+          if (this$1.value !== value) {
+            this$1.$emit('change', value, event);
+          }
+        });
+        this.editor.onDidChangeModelDecorations(function (event) { return this$1.$emit('modelDecorations', event); });
+        this.editor.onDidChangeModelLanguage(function (event) { return this$1.$emit('modelLanguage', event); });
+        this.editor.onDidChangeModelOptions(function (event) { return this$1.$emit('modelOptions', event); });
+        this.editor.onDidDispose(function (event) { return this$1.$emit('afterDispose', event); });
+        this.editor.onDidFocusEditor(function () { return this$1.$emit('focus'); });
+        this.editor.onDidFocusEditorText(function () { return this$1.$emit('focusText'); });
+        this.editor.onDidLayoutChange(function (event) { return this$1.$emit('layout', event); });
+        this.editor.onDidScrollChange(function (event) { return this$1.$emit('scroll', event); });
+        this.editor.onKeyDown(function (event) { return this$1.$emit('keydown', event); });
+        this.editor.onKeyUp(function (event) { return this$1.$emit('keyup', event); });
+        this.editor.onMouseDown(function (event) { return this$1.$emit('mouseDown', event); });
+        this.editor.onMouseLeave(function (event) { return this$1.$emit('mouseLeave', event); });
+        this.editor.onMouseMove(function (event) { return this$1.$emit('mouseMove', event); });
+        this.editor.onMouseUp(function (event) { return this$1.$emit('mouseUp', event); });
+      },
 
-  beforeDestroy: function beforeDestroy() {
-    this.editor && this.editor.dispose();
-  },
+      getMonaco: function getMonaco() {
+        return this.editor;
+      },
 
-  methods: {
-    getMonaco: function getMonaco() {
-      return this.editor
+      focus: function focus() {
+        this.editor.focus();
+      }
+
     },
 
-    focus: function focus() {
-      this.editor.focus();
+    render: function render(h) {
+      return h('div');
     }
-  },
 
-  render: function render(h) {
-    return h('div', null, [this.editorLoaded ? null : this.placeholder])
+  };
+
+  if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.component(MonacoEditor.name, MonacoEditor);
   }
-};
 
-if (typeof window !== 'undefined' && window.Vue) {
-  window.Vue.component(MonacoEditor$1.name, MonacoEditor$1);
-}
+  return MonacoEditor;
 
-return MonacoEditor$1;
-
 })));

package.json

 {
   "name": "vue-monaco",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "MonacoEditor component for Vue.js",
@@ -9,3 +9,3 @@ "repository": {
   },
-  "main": "dist/vue-monaco.common.js",
+  "main": "dist/vue-monaco.es.js",
   "unpkg": "dist/vue-monaco.js",
@@ -20,3 +20,3 @@ "cdn": "dist/vue-monaco.js",
     "prepublish": "npm run build",
-    "build": "bili --buble.objectAssign assign --format umd,cjs --module-name VueMonaco",
+    "build": "bili --js buble --format umd,es --module-name VueMonaco --globals.monaco-editor monaco",
     "example": "poi",
@@ -27,25 +27,11 @@ "build:example": "poi build"
   "license": "MIT",
-  "poi": {
-    "entry": "example/index.js",
-    "dist": "example/dist",
-    "homepage": "/",
-    "html": {
-      "title": "vue-monaco",
-      "template": "example/template.ejs"
-    },
-    "copy": [
-      {
-        "from": "node_modules/monaco-editor/min/vs",
-        "to": "vs"
-      }
-    ]
-  },
   "dependencies": {
+    "monaco-editor": "^0.13.1",
     "nano-assign": "^1.0.0"
   },
   "devDependencies": {
-    "bili": "^0.17.0",
+    "bili": "^3.1.2",
     "eslint-config-rem": "^3.0.0",
-    "monaco-editor": "^0.9.0",
-    "poi": "^9.1.4",
+    "monaco-editor-webpack-plugin": "^1.4.0",
+    "poi": "^10.2.9",
     "xo": "^0.18.0"
@@ -52,0 +38,0 @@ },

README.md

@@ -15,19 +15,17 @@ # vue-monaco
 
-<details><summary>You need to include monaco-editor first.</summary>
+To use with webpack:
 
-```html
-<script src="/path/to/monaco-editor/min/vs/loader.js"></script>
-<script>
-  require.config({ 
-    paths: { 
-      vs: '/path/to/monaco-editor/min/vs'
-    }
-  })
-</script>
+```js
+// webpack.config.js
+const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')
+
+module.exports = {
+  plugins: [
+    new MonocoEditorPlugin()
+  ]
+}
 ```
-</details><br>
 
 Then use the component:
 
-
 ```vue
@@ -72,4 +70,2 @@ <template>
 - `options`
-- `placeholder`: Display a placeholder until the monaco editor is loaded. Could a string or vNode.
-- `require`: Cutomize `require`. Sometimes, `window.require` is not the one wanted (eg. Electron). Check here https://github.com/Microsoft/monaco-editor-samples/tree/master/sample-electron
 
@@ -76,0 +72,0 @@ ### Events

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

16654

decreased by-2.99%

Dependency count

2

increased by100%

Lines of code

252

decreased by-1.18%

Number of lines in readme file

120

decreased by-3.23%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedmonaco-editor@^0.13.1

• + Addedmonaco-editor@0.13.1(transitive)