fix: upgrade vueleton, deprecate vue-code

package.json

@@ -17,40 +17,40 @@
   },
   "description": "Violentmonkey",
   "devDependencies": {
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.1.0",
+    "babel-loader": "^7.1.2",
     "babel-plugin-transform-export-extensions": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.0",
     "babili-webpack-plugin": "^0.1.2",
-    "css-loader": "^0.28.4",
+    "css-loader": "^0.28.5",
     "del": "^3.0.0",
-    "eslint": "^4.2.0",
-    "eslint-config-airbnb-base": "^11.2.0",
+    "eslint": "^4.5.0",
+    "eslint-config-airbnb-base": "^11.3.1",
     "eslint-import-resolver-webpack": "^0.8.3",
-    "eslint-plugin-html": "^3.1.0",
+    "eslint-plugin-html": "^3.2.0",
     "eslint-plugin-import": "^2.7.0",
     "extract-text-webpack-plugin": "^3.0.0",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "gulp": "^3.9.1",
-    "gulp-filter": "^5.0.0",
+    "gulp-filter": "^5.0.1",
     "gulp-svg-sprite": "^1.3.7",
     "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.7",
-    "html-webpack-plugin": "^2.29.0",
+    "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
-    "js-yaml": "^3.9.0",
+    "js-yaml": "^3.9.1",
     "postcss-loader": "^2.0.6",
     "postcss-scss": "^1.0.2",
     "precss": "^2.0.0",
     "svgo": "^0.7.2",
-    "tape": "^4.7.0",
+    "tape": "^4.8.0",
     "through2": "^2.0.3",
-    "vue-loader": "^13.0.2",
+    "vue-loader": "^13.0.4",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.4.1",
-    "webpack": "^3.3.0",
+    "vue-template-compiler": "^2.4.2",
+    "webpack": "^3.5.5",
     "webpack-bundle-size-analyzer": "^2.7.0",
     "wrapper-webpack-plugin": "^1.0.0"
   },
@@ -65,10 +65,9 @@
   "homepage": "https://github.com/violentmonkey/violentmonkey",
   "license": "MIT",
   "dependencies": {
-    "codemirror": "^5.27.4",
-    "core-js": "^2.4.1",
-    "vue": "^2.4.1",
-    "vue-code": "^1.2.2",
-    "vueleton": "^0.1.0"
+    "codemirror": "^5.28.0",
+    "core-js": "^2.5.0",
+    "vue": "^2.4.2",
+    "vueleton": "^0.3.2"
   }
 }

scripts/webpack.base.conf.js

@@ -25,6 +25,9 @@ module.exports = {
     filename: '[name].js',
   },
   resolve: {
+    // Tell webpack to look for peer dependencies in `node_modules`
+    // when packages are linked from outside directories
+    modules: [resolve('node_modules')],
     extensions: ['.js', '.vue'],
     alias: {
       src: resolve('src'),
@@ -50,6 +53,10 @@ module.exports = {
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test')]
       },
+      {
+        test: /\.esm\.js$/,
+        loader: 'babel-loader',
+      },
       styleRule({
         fallback: 'vue-style-loader',
         loaders: ['postcss-loader'],

src/common/ui/code.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <vue-code class="editor-code flex-auto"
+    <vl-code class="editor-code flex-auto"
       :options="cmOptions" v-model="content" @ready="onReady"
     />
     <div class="frame-block" v-show="search.show">
@@ -36,7 +36,6 @@
 </template>
 
 <script>
-import VueCode from 'vue-code';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/eclipse.css';
 import 'codemirror/mode/javascript/javascript';
@@ -51,6 +50,7 @@ import 'codemirror/addon/search/match-highlighter';
 import 'codemirror/addon/search/searchcursor';
 import 'codemirror/addon/selection/active-line';
 import CodeMirror from 'codemirror';
+import { Code as VlCode } from 'vueleton';
 import { debounce } from 'src/common';
 import Tooltip from './tooltip';
 
@@ -143,7 +143,7 @@ export default {
     },
   },
   components: {
-    VueCode,
+    VlCode,
     Tooltip,
   },
   data() {

src/common/ui/style/style.css

@@ -191,3 +191,9 @@ button {
 .CodeMirror-foldgutter-folded:after {
   content: "\25B8";
 }
+
+.vl-dropdown-menu {
+  padding: .5rem;
+  border: 1px solid #bbb;
+  background: white;
+}

src/common/ui/vueleton.js

@@ -1,3 +0,0 @@
-import 'vueleton/lib/dropdown.css';
-
-export Dropdown from 'vueleton/lib/dropdown';

src/confirm/views/app.vue

@@ -2,7 +2,7 @@
   <div class="page-confirm frame flex flex-col h-100">
     <div class="frame-block">
       <div class="buttons pull-right">
-        <vm-dropdown class="confirm-options" align="right">
+        <vl-dropdown class="confirm-options" align="right">
           <button slot="toggle" v-text="i18n('buttonInstallOptions')"></button>
           <label>
             <setting-check name="closeAfterInstall" @change="checkClose" />
@@ -12,7 +12,7 @@
             <setting-check name="trackLocalFile" :disabled="closeAfterInstall" />
             <span v-text="i18n('installOptionTrack')"></span>
           </label>
-        </vm-dropdown>
+        </vl-dropdown>
         <button v-text="i18n('buttonConfirmInstallation')"
         :disabled="!installable" @click="installScript"></button>
         <button v-text="i18n('buttonClose')" @click="close"></button>
@@ -28,11 +28,11 @@
 </template>
 
 <script>
+import { Dropdown as VlDropdown } from 'vueleton';
 import { sendMessage, zfill, request, buffer2string, isRemote, getFullUrl } from 'src/common';
 import options from 'src/common/options';
 import initCache from 'src/common/cache';
 import VmCode from 'src/common/ui/code';
-import { Dropdown as VmDropdown } from 'src/common/ui/vueleton';
 import SettingCheck from 'src/common/ui/setting-check';
 import getPathInfo from 'src/common/pathinfo';
 
@@ -41,7 +41,7 @@ const { query } = getPathInfo();
 
 export default {
   components: {
-    VmDropdown,
+    VlDropdown,
     VmCode,
     SettingCheck,
   },

src/options/views/tab-installed.vue

@@ -2,7 +2,7 @@
   <div class="tab-installed">
     <header class="flex">
       <div class="flex-auto">
-        <vm-dropdown :closeAfterClick="true">
+        <vl-dropdown :closeAfterClick="true">
           <span class="btn-ghost" slot="toggle">
             <icon name="plus"></icon>
           </span>
@@ -10,7 +10,7 @@
           <a v-text="i18n('installFrom', 'OpenUserJS')" href="https://openuserjs.org/" target="_blank"></a>
           <a v-text="i18n('installFrom', 'GreasyFork')" href="https://greasyfork.org/scripts" target="_blank"></a>
           <a href="#" v-text="i18n('buttonInstallFromURL')" @click.prevent="installFromURL"></a>
-        </vm-dropdown>
+        </vl-dropdown>
         <tooltip :title="i18n('buttonUpdateAll')" placement="down">
           <span class="btn-ghost" @click="updateAll">
             <icon name="refresh"></icon>
@@ -34,8 +34,8 @@
 </template>
 
 <script>
+import { Dropdown as VlDropdown } from 'vueleton';
 import { i18n, sendMessage, noop, debounce } from 'src/common';
-import { Dropdown as VmDropdown } from 'src/common/ui/vueleton';
 import Icon from 'src/common/ui/icon';
 import Tooltip from 'src/common/ui/tooltip';
 import Item from './script-item';
@@ -47,7 +47,7 @@ export default {
     Item,
     Edit,
     Tooltip,
-    VmDropdown,
+    VlDropdown,
     Icon,
   },
   data() {
@@ -171,7 +171,6 @@ $header-height: 4rem;
     border-bottom: 1px solid darkgray;
   }
   .vl-dropdown-menu {
-    padding: .5rem;
     white-space: nowrap;
     > a {
       display: block;