init

9f0d5174 · rockyl · 9f0d5174 · 9f0d5174 · 9f0d5174 · 9f0d5174
Commit 9f0d5174 authored Feb 19, 2020 by rockyl
16 changed files
--- a/.editorconfig
+++ b/.editorconfig
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file
--- a/.gitattributes
+++ b/.gitattributes
+* text=auto
--- a/.gitignore
+++ b/.gitignore
+node_modules
+dist/
--- a/.prettierrc
+++ b/.prettierrc
+{
+  "semi": false,
+  "singleQuote": true
+}
--- a/LICENSE
+++ b/LICENSE
+The MIT License (MIT)
+
+Copyright (c) egoist <0x142857@gmail.com> (https://egoist.moe)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
--- a/README.md
+++ b/README.md
+# vue-monaco
+
+[![NPM version](https://img.shields.io/npm/v/vue-monaco.svg?style=flat)](https://npmjs.com/package/vue-monaco) [![NPM downloads](https://img.shields.io/npm/dm/vue-monaco.svg?style=flat)](https://npmjs.com/package/vue-monaco) [![CircleCI](https://circleci.com/gh/egoist/vue-monaco/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/vue-monaco/tree/master) [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)
+
+[Monaco Editor](https://github.com/Microsoft/monaco-editor) is the code editor that powers VS Code, now it's available as a Vue component `<MonacoEditor>` thanks to this project.
+
+## Install
+
+```bash
+npm install vue-monaco
+```
+
+Or
+
+```bash
+yarn add vue-monaco
+```
+
+## Usage
+
+### Use ESM version with webpack
+
+Use [monaco-editor-webpack-plugin](https://github.com/Microsoft/monaco-editor-webpack-plugin):
+
+```js
+// webpack.config.js
+const MonacoEditorPlugin = require('monaco-editor-webpack-plugin')
+
+module.exports = {
+  plugins: [
+    new MonacoEditorPlugin({
+      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
+      // Include a subset of languages support
+      // Some language extensions like typescript are so huge that may impact build performance
+      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
+      // Languages are loaded on demand at runtime
+      languages: ['javascript', 'css', 'html', 'typescript']
+    })
+  ]
+}
+```
+
+Then use the component:
+
+```vue
+<template>
+  <MonacoEditor class="editor" v-model="code" language="javascript" />
+</template>
+
+<script>
+import MonacoEditor from 'vue-monaco'
+
+export default {
+  components: {
+    MonacoEditor
+  },
+
+  data() {
+    return {
+      code: 'const noop = () => {}'
+    }
+  }
+}
+</script>
+
+<style>
+.editor {
+  width: 600px;
+  height: 800px;
+}
+</style>
+```
+
+### Use AMD version
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <script src="monaco-editor/min/vs/loader.js"></script>
+    <script src="https://unpkg.com/vue"></script>
+    <script src="https://unpkg.com/vue-monaco"></script>
+    <script>
+      require.config({ paths: { vs: 'monaco-editor/min/vs' } })
+
+      new Vue({
+        el: '#app',
+        template: `
+          <monaco-editor
+            style="width:800px;height:600px;border:1px solid grey"
+            v-model="code" 
+            language="javascript" 
+            :amdRequire="amdRequire"
+          />`,
+        data: {
+          code: 'const noop = () => {}'
+        },
+        methods: {
+          amdRequire: require
+        }
+      })
+    </script>
+  </body>
+</html>
+```
+
+When loading monaco-editor from a CDN, you need to change `require.config` to look like this:
+
+```js
+require.config({ paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' } })
+
+// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
+// the default worker url location (used when creating WebWorkers). The problem here is that
+// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
+// a web worker through a same-domain script
+window.MonacoEnvironment = {
+  getWorkerUrl: function(workerId, label) {
+    return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
+        self.MonacoEnvironment = {
+          baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
+        };
+        importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`
+  }
+}
+```
+
+### Props
+
+- `options`: The [second argument](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) of [`monaco.editor.create`](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#create).
+- `value`: A shortcut to set `options.value`.
+- `theme`: A shortcut to set `options.theme`.
+- `language`: A shortcut to set `options.language`.
+- `amdRequire`: Load monaco-editor using given amd-style require function.
+- `diffEditor`: `boolean` Indicate that this is a DiffEditor, `false` by default.
+
+### Component Events
+
+#### `editorWillMount`
+
+- Params:
+  - `monaco`: [`monaco module`](https://microsoft.github.io/monaco-editor/api/index.html)
+
+Called before mounting the editor.
+
+#### `editorDidMount`
+
+- Params:
+  - `editor`: [`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) for normal editor, [`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonediffeditor.html) for diff editor.
+
+Called when the editor is mounted.
+
+#### `change`
+
+Editor value is updated.
+
+- Params:
+  - `value`: New editor value.
+  - `event`: The `event` from [`onDidChangeModelContent`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#ondidchangemodelcontent).
+
+#### Editor Events
+
+You can listen to the editor events directly like this:
+
+```vue
+<template>
+  <MonacoEditor v-model="code" @editorDidMount="editorDidMount" />
+</template>
+
+<script>
+export default {
+  methods: {
+    editorDidMount(editor) {
+      // Listen to `scroll` event
+      editor.onDidScrollChange(e => {
+        console.log(e)
+      })
+    }
+  },
+
+  data() {
+    return {
+      code: '...'
+    }
+  }
+}
+</script>
+```
+
+Refer to [this page](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) for all editor events.
+
+### Methods
+
+- `getEditor(): IStandaloneCodeEditor`: Return the [editor instance](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html).
+
+Use `ref` to interact with the `MonacoEditor` component in order to access methods: `<MonacoEditor ref="editor" />`, then `this.$refs.editor.getEditor()` will be available.
+
+### Use the DiffEditor
+
+Use `diffEditor` prop to indicate that this is a DiffEditor, use `original` prop to set the content for the original editor, use `value` prop to set the content for the modified editor.
+
+```vue
+<MonacoEditor
+  language="javascript"
+  :diffEditor="true"
+  :value="code"
+  :original="originalCode"
+/>
+```
+
+In this case, the component's `getEditor()` returns the [`IStandaloneDiffEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonediffeditor.html) instance, while you can use `getModifiedEditor()` to get the modified editor which is an [`IStandaloneCodeEditor`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html) instance.
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## Author
+
+**vue-monaco** © [egoist](https://github.com/egoist), Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by egoist with help from contributors ([list](https://github.com/egoist/vue-monaco/contributors)).
+
+> [Website](https://egoist.sh) · GitHub [@egoist](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)
--- a/bili.config.ts
+++ b/bili.config.ts
+import { Config } from 'bili'
+
+const config: Config = {
+  input: 'src/index.js',
+  output: {
+    format: ['esm', 'umd'],
+    moduleName: 'VueMonaco',
+    fileName({ format }) {
+      if (format === 'esm') {
+        return 'vue-monaco.es.js'
+      }
+      return 'vue-monaco.js'
+    }
+  },
+  externals: ['monaco-editor']
+}
+
+export default config
--- a/circle.yml
+++ b/circle.yml
+version: 2
+jobs:
+  build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/node:latest
+    branches:
+      ignore:
+        - gh-pages # list of branches to ignore
+        - /release\/.*/ # or ignore regexes
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: install dependences
+          command: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: release
+          command: npx semantic-release
--- a/example/index.js
+++ b/example/index.js
+import Vue from 'vue'
+import MonacoEditor from '../src'
+import './style.css'
+
+const code = `
+function foo() {
+  return 'foo'
+}
+`.trim()
+
+const markdownCode = `
+<template>
+  <div id="app">hello</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      foo: 'foo'
+    }
+  }
+}
+</script>
+`
+
+new Vue({
+  el: '#app',
+
+  data: {
+    code,
+    language: 'javascript',
+    theme: 'vs',
+    options: {
+      lineNumbers: true
+    }
+  },
+
+  methods: {
+    updateCode() {
+      this.language = 'html'
+      this.code = markdownCode
+      this.options.tabSize = 8
+      this.options.lineNumbers = false
+      this.theme = 'vs-dark'
+    }
+  },
+
+  render() {
+    return (
+      <div id="app">
+        <button onClick={this.updateCode}>update</button>
+        <MonacoEditor
+          class="editor"
+          value={this.code}
+          language={this.language}
+          theme={this.theme}
+          options={this.options}
+          onChange={newValue => (this.code = newValue)}
+        />
+        <MonacoEditor
+          class="editor"
+          diffEditor={true}
+          original={`original value`}
+          value={this.code}
+          language={this.language}
+          theme={this.theme}
+          options={this.options}
+          onChange={newValue => (this.code = newValue)}
+        />
+      </div>
+    )
+  }
+})
--- a/example/style.css
+++ b/example/style.css
+body {
+  margin: 0;
+}
+
+.editor {
+  height: 100vh;
+}
--- a/package.json
+++ b/package.json
+{
+  "name": "vue-monaco",
+  "version": "0.3.1",
+  "description": "MonacoEditor component for Vue.js",
+  "repository": {
+    "url": "egoist/vue-monaco",
+    "type": "git"
+  },
+  "main": "dist/vue-monaco.js",
+  "module": "dist/vue-monaco.es.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "test": "npm run lint && echo 'no tests!'",
+    "lint": "xo",
+    "prepublishOnly": "npm run build",
+    "build": "bili",
+    "example": "poi --serve",
+    "build:example": "poi --prod"
+  },
+  "author": "egoist <0x142857@gmail.com>",
+  "license": "MIT",
+  "dependencies": {
+    "monaco-editor": "^0.20.0",
+    "nano-assign": "^1.0.0"
+  },
+  "devDependencies": {
+    "bili": "^4.8.0",
+    "eslint-config-rem": "^4.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "monaco-editor-webpack-plugin": "^1.7.0",
+    "poi": "^12.2.14",
+    "prettier": "^1.18.2",
+    "vue": "^2.5.21",
+    "vue-template-compiler": "^2.5.21",
+    "xo": "^0.24.0"
+  },
+  "xo": {
+    "extends": [
+      "rem",
+      "plugin:prettier/recommended"
+    ],
+    "ignores": [
+      "example/**"
+    ],
+    "envs": [
+      "browser"
+    ],
+    "rules": {
+      "unicorn/filename-case": 0
+    }
+  }
+}
--- a/poi.config.js
+++ b/poi.config.js
+module.exports = {
+  entry: 'example/index.js',
+  output: {
+    dir: 'example/dist'
+  },
+  chainWebpack(config) {
+    config.plugin('monaco').use(require('monaco-editor-webpack-plugin'))
+  },
+  babel: {
+    jsx: 'vue'
+  }
+}
--- a/src/MonacoEditor.js
+++ b/src/MonacoEditor.js
+import assign from 'nano-assign'
+
+export default {
+  name: 'MonacoEditor',
+
+  props: {
+    original: String,
+    value: {
+      type: String,
+      required: true
+    },
+    theme: {
+      type: String,
+      default: 'vs'
+    },
+    language: String,
+    options: Object,
+    amdRequire: {
+      type: Function
+    },
+    diffEditor: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  model: {
+    event: 'change'
+  },
+
+  watch: {
+    options: {
+      deep: true,
+      handler(options) {
+        if (this.editor) {
+          const editor = this.getModifiedEditor()
+          editor.updateOptions(options)
+        }
+      }
+    },
+
+    value(newValue) {
+      if (this.editor) {
+        const editor = this.getModifiedEditor()
+        if (newValue !== editor.getValue()) {
+          editor.setValue(newValue)
+        }
+      }
+    },
+
+    language(newVal) {
+      if (this.editor) {
+        const editor = this.getModifiedEditor()
+        this.monaco.editor.setModelLanguage(editor.getModel(), newVal)
+      }
+    },
+
+    theme(newVal) {
+      if (this.editor) {
+        this.monaco.editor.setTheme(newVal)
+      }
+    }
+  },
+
+  mounted() {
+    if (this.amdRequire) {
+      this.amdRequire(['vs/editor/editor.main'], () => {
+        this.monaco = window.monaco
+        this.initMonaco(window.monaco)
+      })
+    } else {
+      // ESM format so it can't be resolved by commonjs `require` in eslint
+      // eslint-disable-next-line import/no-unresolved
+      const monaco = require('monaco-editor')
+      this.monaco = monaco
+      this.initMonaco(monaco)
+    }
+  },
+
+  beforeDestroy() {
+    this.editor && this.editor.dispose()
+  },
+
+  methods: {
+    initMonaco(monaco) {
+      this.$emit('editorWillMount', this.monaco)
+
+      const options = assign(
+        {
+          value: this.value,
+          theme: this.theme,
+          language: this.language
+        },
+        this.options
+      )
+
+      if (this.diffEditor) {
+        this.editor = monaco.editor.createDiffEditor(this.$el, options)
+        const originalModel = monaco.editor.createModel(
+          this.original,
+          this.language
+        )
+        const modifiedModel = monaco.editor.createModel(
+          this.value,
+          this.language
+        )
+        this.editor.setModel({
+          original: originalModel,
+          modified: modifiedModel
+        })
+      } else {
+        this.editor = monaco.editor.create(this.$el, options)
+      }
+
+      // @event `change`
+      const editor = this.getModifiedEditor()
+      editor.onDidChangeModelContent(event => {
+        const value = editor.getValue()
+        if (this.value !== value) {
+          this.$emit('change', value, event)
+        }
+      })
+
+      this.$emit('editorDidMount', this.editor)
+    },
+
+    /** @deprecated */
+    getMonaco() {
+      return this.editor
+    },
+
+    getEditor() {
+      return this.editor
+    },
+
+    getModifiedEditor() {
+      return this.diffEditor ? this.editor.getModifiedEditor() : this.editor
+    },
+
+    focus() {
+      this.editor.focus()
+    }
+  },
+
+  render(h) {
+    return h('div')
+  }
+}
--- a/src/index.js
+++ b/src/index.js
+import MonacoEditor from './MonacoEditor'
+
+export default MonacoEditor
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.component(MonacoEditor.name, MonacoEditor)
+}
--- a/vue-monaco.iml
+++ b/vue-monaco.iml
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
--- a/yarn.lock
+++ b/yarn.lock