From 898eaa1029293cc9f3a33a8bfd4f5707802a7510 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 15:25:11 +0800
Subject: [PATCH 01/47] fix pretty print

---
 packages/cli/commands/parse.js | 79 +++++++++++++++-------------------
 1 file changed, 35 insertions(+), 44 deletions(-)

diff --git a/packages/cli/commands/parse.js b/packages/cli/commands/parse.js
index c182286..27020e1 100644
--- a/packages/cli/commands/parse.js
+++ b/packages/cli/commands/parse.js
@@ -4,46 +4,42 @@ const yaml = require('js-yaml')
 const chalk = require('chalk')
 const parser = require('@marklet/parser')
 
-function printNode(node, indent = 2, back = 1) {
-  const space = ' '.repeat(indent - 2 * back)
-  const prefix = '- '.repeat(back)
-  if (typeof node === 'string') {
-    return console.log(prefix + chalk.yellow(node))
+function isObject(node) {
+  return node === null || typeof node !== 'object'
+}
+
+function prettyPrint(node, indent = 0) {
+  const space = '  '.repeat(indent)
+  if (isObject(node)) {
+    if (typeof node === 'string') {
+      console.log(chalk.yellowBright(node))
+    } else {
+      console.log(chalk.cyanBright(node))
+    }
   } else if (node instanceof Array) {
-    return node.forEach((node, index) => {
-      if (node instanceof Array) {
-        printNode(node, indent + 2, back + 1)
-      } else {
-        process.stdout.write(space + '  '.repeat(index ? back : 1))
-        printNode(node, indent + 2, index ? 1 : back)
-      }
+    node.forEach((node, index) => {
+      if (index) process.stdout.write(space)
+      process.stdout.write('- ')
+      prettyPrint(node, indent + 1)
     })
-  }
-  let firstLine = !node.type
-  if (node.type) {
-    console.log(chalk.greenBright('# ' + node.type))
-  }
-  for (const key in node) {
-    if (key === 'type') continue
-    if (firstLine) {
-      process.stdout.write(prefix)
-      firstLine = false
-    } else {
-      process.stdout.write(space + '  ')
+  } else {
+    let firstLine = !node.type
+    if (node.type) {
+      console.log(chalk.redBright('\b\b# ' + node.type))
     }
-    process.stdout.write(chalk`{cyanBright ${key}}: `)
-    if (typeof node[key] === 'string') {
-      console.log(chalk.yellow(node[key]))
-    } else if (typeof node[key] !== 'object') {
-      console.log(chalk.magentaBright(node[key]))
-    } else {
-      process.stdout.write('\n')
-      if (node[key] instanceof Array) {
-        printNode(node[key], indent + 2 * back, 1)
+    for (const key in node) {
+      if (key === 'type') continue
+      if (!firstLine) {
+        process.stdout.write(space)
       } else {
-        process.stdout.write(space + '    ')
-        printNode(node[key], indent + 2 * back - 2, 0)
+        firstLine = false
       }
+      process.stdout.write(chalk.magentaBright(key) + ': ')
+      if (!isObject(node[key])) {
+        process.stdout.write('\n' + space)
+        if (node[key] instanceof Array) process.stdout.write('  ')
+      }
+      prettyPrint(node[key], indent + 1)
     }
   }
 }
@@ -69,17 +65,12 @@ module.exports = program => program
       },
     })
     if (this.pretty) {
-      result.forEach(node => printNode(node))
-      return
-    }
-    switch (this.format || 'json') {
-    case 'json':
+      prettyPrint(result)
+    } else if (this.format === 'json' || !this.format) {
       console.log(JSON.stringify(result, null, indent))
-      break
-    case 'yaml':
+    } else if (this.format === 'yaml') {
       console.log(yaml.safeDump(result, { indent }))
-      break
-    default:
+    } else {
       util.handleError(this.format + ' is not a supported format.')
     }
   })

From 82300b12fd568cd8d2cbce9fb4a3fb8e1de57ac8 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 15:47:30 +0800
Subject: [PATCH 02/47] add some bindings

---
 packages/dev-server/comp/menu/command.json  |  3 +++
 packages/dev-server/comp/menu/menu-item.vue | 10 ++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/menu/command.json
index 04bf83c..7b3d065 100644
--- a/packages/dev-server/comp/menu/command.json
+++ b/packages/dev-server/comp/menu/command.json
@@ -24,6 +24,7 @@
     "arguments": "explorer",
     "key": "trigger-explorer",
     "name": "资源管理器",
+    "bind": "ctrl+k ctrl+r",
     "checked": "$display.explorer.show"
   },
   {
@@ -31,6 +32,7 @@
     "arguments": "editor",
     "key": "trigger-editor",
     "name": "编辑器视图",
+    "bind": "ctrl+k ctrl+e",
     "checked": "$display.editor.show"
   },
   {
@@ -38,6 +40,7 @@
     "arguments": "document",
     "key": "trigger-document",
     "name": "预览视图",
+    "bind": "ctrl+k ctrl+d",
     "checked": "$display.document.show"
   },
   {
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 2305989..1479015 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -31,20 +31,22 @@ module.exports = {
 
 <template>
   <div :class="['menu-item', { disabled }]" @click="handleClick">
-    <span class="label">{{ command.name }}</span>
-    <span class="binding">
+    <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
         :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
-      <template v-else>{{ binding }}</template>
+      {{ command.name }}
     </span>
+    <span class="binding">{{ binding }}</span>
   </div>
 </template>
 
 <style lang="scss" scoped>
 
-> .binding {
+> .label {
   .marklet-checkbox {
     font-size: 12px;
+    margin-right: 4px;
+    vertical-align: .5px;
   }
 }
 

From 8c1cf2c8a1defa8b54a0661606ddf9e39ea07512 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 21:40:18 +0800
Subject: [PATCH 03/47] merge edit and watch into marklet.env

---
 build/build.js                                |  7 +++----
 packages/dev-server/package.json              |  3 ++-
 packages/dev-server/src/client.ts             | 15 +++++++++-----
 .../dev-server/src/{edit.html => index.html}  | 19 ++++++++++--------
 packages/dev-server/src/server.ts             |  9 +++++++--
 packages/dev-server/src/watch.html            | 20 -------------------
 6 files changed, 33 insertions(+), 40 deletions(-)
 rename packages/dev-server/src/{edit.html => index.html} (61%)
 delete mode 100644 packages/dev-server/src/watch.html

diff --git a/build/build.js b/build/build.js
index 682d6a5..0afa797 100644
--- a/build/build.js
+++ b/build/build.js
@@ -43,7 +43,7 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
     output: {
       path: util.resolve(name, 'dist'),
       filename: options.output,
-      library: 'Marklet',
+      library: 'marklet',
       libraryTarget: 'umd',
       libraryExport: options.libraryExport,
       globalObject: 'typeof self !== \'undefined\' ? self : this'
@@ -125,8 +125,7 @@ Promise.resolve().then(() => {
     }
   }
 
-  minifyHTML('edit')
-  minifyHTML('watch')
+  minifyHTML('index')
 
   let css = ''
   themes.forEach(({ key }) => {
@@ -178,7 +177,7 @@ Promise.resolve().then(() => {
   }).then(() => bundle('dev-server', {
     entry: 'dist/client.js',
     output: 'client.min.js',
-    libraryExport: 'Marklet',
+    libraryExport: 'default',
   }))
 }).catch((error) => {
   console.log(error)
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index e4b48cd..d884980 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -16,7 +16,8 @@
     "dist/client.min.js",
     "dist/client.min.css",
     "dist/themes.min.css",
-    "dist/monaco.min.css"
+    "dist/monaco.min.css",
+    "dist/index.html"
   ],
   "repository": {
     "type": "git",
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 82c9ff6..2a74bdb 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -97,10 +97,15 @@ const typeMap = {
   watch: '监视',
 }
 
-export const Marklet = {
-  app: require('@/app.vue'),
-  start(type: keyof typeof typeMap) {
-    document.title = 'Marklet - ' + typeMap[type]
-    return new Vue(this.app)
+const MarkletApp = Vue.extend(require('@/app.vue'))
+const marklet = Vue.prototype.$marklet = new class Marklet {
+  vm: VueConstructor
+  env: keyof typeof typeMap
+
+  create(el: string) {
+    document.title = 'Marklet - ' + typeMap[this.env]
+    return this.vm = new MarkletApp().$mount(el)
   }
 }
+
+export default marklet
diff --git a/packages/dev-server/src/edit.html b/packages/dev-server/src/index.html
similarity index 61%
rename from packages/dev-server/src/edit.html
rename to packages/dev-server/src/index.html
index 350a7f8..56b41d6 100644
--- a/packages/dev-server/src/edit.html
+++ b/packages/dev-server/src/index.html
@@ -11,19 +11,22 @@
     <link href="themes.min.css" rel="stylesheet">
     <link href="monaco.min.css" rel="stylesheet">
     <script src="client.min.js"></script>
+    <script src="initialize.js"></script>
     <script src="~/monaco-editor/min/vs/loader.js"></script>
   </head>
   <body>
     <div id="app"></div>
     <script>
-      Marklet.start('edit').$mount('#app')
-      require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
-      require(['vs/editor/editor.main'], () => {
-        Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
-        if (!Vue.prototype.$colorize) {
-          Vue.prototype.$colorize = (code, lang) => monaco.editor.colorize(code, lang)
-        }
-      })
+      marklet.create('#app')
+      if (marklet.env === 'edit') {
+        require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
+        require(['vs/editor/editor.main'], () => {
+          Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
+          if (!Vue.prototype.$colorize) {
+            Vue.prototype.$colorize = (code, lang) => monaco.editor.colorize(code, lang)
+          }
+        })
+      }
     </script>
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 7bf48c2..2b9862f 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -57,7 +57,7 @@ class MarkletServer<T extends ServerType> {
         response.end()
       }
       
-      function handleData(data: any, type: string) {
+      function handleData(data: any, type: string = 'text/javascript') {
         response.writeHead(200, { 'Content-Type': type })
         response.write(data)
         response.end()
@@ -72,8 +72,13 @@ class MarkletServer<T extends ServerType> {
           handleError(error)
           return
         }
+      } else if (pathname === 'initialize.js') {
+        handleData(`
+          marklet.env = '${type}'
+        `)
+        return
       } else {
-        filepath = path.join(__dirname, pathname || type + '.html')
+        filepath = path.join(__dirname, pathname || 'index.html')
       }
       fs.readFile(filepath, (error, data) => {
         if (error) {
diff --git a/packages/dev-server/src/watch.html b/packages/dev-server/src/watch.html
deleted file mode 100644
index 8772b2d..0000000
--- a/packages/dev-server/src/watch.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Marklet</title>
-    <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
-    <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
-    <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
-    <script src="~/vue/dist/vue.runtime.min.js"></script>
-    <link href="client.min.css" rel="stylesheet">
-    <link href="themes.min.css" rel="stylesheet">
-    <script src="client.min.js"></script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script>
-      Marklet.start('edit').$mount('#app')
-    </script>
-  </body>
-</html>
\ No newline at end of file

From 7138b391a2e963221e191fbfc36ba16ea46092cb Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 21:42:25 +0800
Subject: [PATCH 04/47] bump version

---
 packages/app/package.json        | 6 +++---
 packages/cli/package.json        | 6 +++---
 packages/core/package.json       | 2 +-
 packages/detok/package.json      | 6 +++---
 packages/dev-server/package.json | 6 +++---
 packages/marklet/package.json    | 8 ++++----
 packages/parser/package.json     | 4 ++--
 packages/renderer/package.json   | 4 ++--
 packages/syntax/package.json     | 4 ++--
 packages/test/package.json       | 6 +++---
 10 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/app/package.json b/packages/app/package.json
index 558d4ca..7ee9c79 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/app",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "private": true,
   "main": "main.js",
   "author": "shigma <1700011071@pku.edu.cn>",
@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@marklet/monaco": "^1.3.0",
-    "@marklet/parser": "^1.5.1",
-    "@marklet/renderer": "^1.3.1",
+    "@marklet/parser": "^1.5.2",
+    "@marklet/renderer": "^1.3.2",
     "js-yaml": "^3.12.0",
     "neat-scroll": "^2.0.1",
     "vue": "^2.5.17"
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 1e639c2..96a53d4 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/cli",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A command line interface for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -19,8 +19,8 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/dev-server": "^1.1.2",
-    "@marklet/parser": "^1.5.1",
+    "@marklet/dev-server": "^1.1.3",
+    "@marklet/parser": "^1.5.2",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
     "js-yaml": "^3.12.0",
diff --git a/packages/core/package.json b/packages/core/package.json
index 391ede9..f7a2ab2 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/core",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Some core conceptions of marklet.",
   "author": "shigma <1700011071@pku.edu.cn>",
   "contributors": [
diff --git a/packages/detok/package.json b/packages/detok/package.json
index a155548..6c8a7d3 100644
--- a/packages/detok/package.json
+++ b/packages/detok/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/detok",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "A detokenizer for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -25,7 +25,7 @@
     "cheerio": "^1.0.0-rc.2"
   },
   "devDependencies": {
-    "@marklet/core": "^3.2.2",
-    "@marklet/parser": "^1.5.1"
+    "@marklet/core": "^3.2.3",
+    "@marklet/parser": "^1.5.2"
   }
 }
\ No newline at end of file
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index d884980..641c719 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/dev-server",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A develop server for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -27,8 +27,8 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/parser": "^1.5.1",
-    "@marklet/renderer": "^1.3.1",
+    "@marklet/parser": "^1.5.2",
+    "@marklet/renderer": "^1.3.2",
     "monaco-editor": "^0.14.3",
     "mousetrap": "^1.6.2",
     "vue": "^2.5.17",
diff --git a/packages/marklet/package.json b/packages/marklet/package.json
index 437fc02..55cfcb8 100644
--- a/packages/marklet/package.json
+++ b/packages/marklet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "markletjs",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A markup language designed for API manual pages.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -28,8 +28,8 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/cli": "^2.0.1",
-    "@marklet/parser": "^1.5.1",
-    "@marklet/renderer": "^1.3.1"
+    "@marklet/cli": "^2.0.2",
+    "@marklet/parser": "^1.5.2",
+    "@marklet/renderer": "^1.3.2"
   }
 }
\ No newline at end of file
diff --git a/packages/parser/package.json b/packages/parser/package.json
index 0a3149b..8e0a9c6 100644
--- a/packages/parser/package.json
+++ b/packages/parser/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/parser",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "A document lexer for marklet.",
   "author": "shigma <1700011071@pku.edu.cn>",
   "contributors": [
@@ -21,6 +21,6 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/core": "^3.2.2"
+    "@marklet/core": "^3.2.3"
   }
 }
\ No newline at end of file
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index cbf0bf5..7ac9926 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/renderer",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "A html renderer for marklet.",
   "author": "jjyyxx <1449843302@qq.com>",
   "contributors": [
@@ -21,7 +21,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/core": "^3.2.2",
+    "@marklet/core": "^3.2.3",
     "neat-scroll": "^2.0.1"
   },
   "devDependencies": {
diff --git a/packages/syntax/package.json b/packages/syntax/package.json
index 03caee6..710c6f9 100644
--- a/packages/syntax/package.json
+++ b/packages/syntax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/syntax",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "A common language lexer for marklet.",
   "author": "shigma <1700011071@pku.edu.cn>",
   "homepage": "https://github.com/obstudio/Marklet/tree/dev/packages/syntax",
@@ -18,7 +18,7 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/core": "^3.2.2",
+    "@marklet/core": "^3.2.3",
     "js-yaml": "^3.12.0"
   }
 }
\ No newline at end of file
diff --git a/packages/test/package.json b/packages/test/package.json
index faccb99..1f99788 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/test",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "main": "index.js",
   "author": "jjyyxx <1449843302@qq.com>",
@@ -20,8 +20,8 @@
     "url": "https://github.com/obstudio/Marklet/issues"
   },
   "dependencies": {
-    "@marklet/detok": "^1.1.3",
-    "@marklet/parser": "^1.5.1",
+    "@marklet/detok": "^1.1.4",
+    "@marklet/parser": "^1.5.2",
     "chalk": "^2.4.1"
   }
 }
\ No newline at end of file

From 3d603a228709a85e5827f8ba107cfe04d255bf63 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 22:16:16 +0800
Subject: [PATCH 05/47] initialize values
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在 client 中暴露了一个全局变量 marklet，拥有 type, sourceType, config, vm 等属性，会通过 initialize.js 进行初始化
---
 packages/cli/program.js                | 15 ++++++++-------
 packages/dev-server/comp/.eslintrc.yml |  4 +++-
 packages/dev-server/comp/editor.js     | 11 +++++------
 packages/dev-server/src/client.ts      | 19 +++++++++++--------
 packages/dev-server/src/index.html     |  2 +-
 packages/dev-server/src/server.ts      | 19 +++++++++++--------
 6 files changed, 39 insertions(+), 31 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 699b6ef..7dee589 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -14,16 +14,19 @@ const ALL_TYPES = [
 ]
 
 function loadFromFile(filepath) {
+  let options
   const ext = path.extname(filepath)
   if (YAML_TYPES.includes(ext)) {
-    return yaml.safeLoad(fs.readFileSync(filepath).toString())
+    options = yaml.safeLoad(fs.readFileSync(filepath).toString())
   } else if (JS_TYPES.includes(ext)) {
-    return require(filepath)
+    options = require(filepath)
   } else if (ext) {
     throw new Error(`error: cannot recognize file extension '${ext}'.`)
   } else {
     throw new Error('error: cannot recognize file with no extenstion.')
   }
+  options.sourceType = 'folder'
+  return options
 }
 
 Object.assign(Object.getPrototypeOf(program), {
@@ -54,14 +57,12 @@ Object.assign(Object.getPrototypeOf(program), {
   getOptions(filepath = '', forced = true) {
     filepath = path.resolve(filepath)
     let basePath = path.resolve(process.cwd(), filepath)
-    let options = { sourceType: 'project' }
+    let options = { sourceType: 'file' }
     try {
       util.tryFindFile(filepath)
       if (fs.statSync(basePath).isFile()) {
         if (!MARK_TYPES.includes(path.extname(basePath))) {
-          Object.assign(options, loadFromFile(basePath))
-        } else {
-          options.sourceType = 'file'
+          options = loadFromFile(basePath)
         }
       } else {
         let matchFound = false
@@ -70,7 +71,7 @@ Object.assign(Object.getPrototypeOf(program), {
           const filename = basePath + type
           if (!fs.existsSync(filename)) continue
           if (fs.statSync(filename).isFile()) {
-            Object.assign(options, loadFromFile(filename))
+            options = loadFromFile(basePath)
             matchFound = true
             break
           }
diff --git a/packages/dev-server/comp/.eslintrc.yml b/packages/dev-server/comp/.eslintrc.yml
index c3d454b..21af863 100644
--- a/packages/dev-server/comp/.eslintrc.yml
+++ b/packages/dev-server/comp/.eslintrc.yml
@@ -1,3 +1,5 @@
 extends:
   - plugin:vue/essential
-  
\ No newline at end of file
+
+globals:
+  marklet: true
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 2dc2aa2..31a3f01 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -7,7 +7,10 @@ module.exports = {
     source: '',
     loading: 1,
     changed: false,
-    config: defaultConfig,
+    config: {
+      ...defaultConfig,
+      ...marklet.config,
+    },
   }),
 
   watch: {
@@ -30,14 +33,10 @@ module.exports = {
   },
 
   created() {
-    this._lexer = new DocumentLexer(defaultConfig)
+    this._lexer = new DocumentLexer(this.config)
 
     const source = localStorage.getItem('source')
     if (typeof source === 'string') this.source = source
-
-    this.$eventBus.$on('server.config', (config) => {
-      this.config = Object.assign(defaultConfig, config)
-    })
   },
 
   mounted() {
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 2a74bdb..cd31cd7 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -1,6 +1,8 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
 import * as renderer from '@marklet/renderer'
+import { LexerConfig } from '@marklet/parser'
+import { SourceType, ServerType } from './server'
 
 declare global {
   export const Vue: typeof VueConstructor
@@ -97,15 +99,16 @@ const typeMap = {
   watch: '监视',
 }
 
-const MarkletApp = Vue.extend(require('@/app.vue'))
-const marklet = Vue.prototype.$marklet = new class Marklet {
+const App = Vue.extend(require('@/app.vue'))
+
+export default new class Marklet {
   vm: VueConstructor
-  env: keyof typeof typeMap
+  type: ServerType
+  config: LexerConfig
+  sourceType: SourceType
 
-  create(el: string) {
-    document.title = 'Marklet - ' + typeMap[this.env]
-    return this.vm = new MarkletApp().$mount(el)
+  create(el: string | HTMLElement) {
+    document.title = 'Marklet - ' + typeMap[this.type]
+    return this.vm = new App().$mount(el)
   }
 }
-
-export default marklet
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
index 56b41d6..a426ef3 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/index.html
@@ -18,7 +18,7 @@
     <div id="app"></div>
     <script>
       marklet.create('#app')
-      if (marklet.env === 'edit') {
+      if (marklet.type === 'edit') {
         require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
         require(['vs/editor/editor.main'], () => {
           Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 2b9862f..57390bc 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -34,21 +34,27 @@ function toDocMessage(filename: string) {
 }
 
 export type ServerType = 'watch' | 'edit'
+export type SourceType = 'file' | 'folder'
 
 interface ServerOptions {
   port?: number
   config?: LexerConfig
+  sourceType?: SourceType
 }
 
 class MarkletServer<T extends ServerType> {
   type: T
   port: number
+  sourceType: SourceType
+  config: LexerConfig
   wsServer: ws.Server
   httpServer: http.Server
 
   constructor(type: T, options: ServerOptions = {}) {
     this.type = type
+    this.config = options.config || {}
     this.port = options.port || DEFAULT_PORT
+    this.sourceType = options.sourceType || 'file'
 
     this.httpServer = http.createServer((request, response) => {
       function handleError(error: Error) {
@@ -74,7 +80,9 @@ class MarkletServer<T extends ServerType> {
         }
       } else if (pathname === 'initialize.js') {
         handleData(`
-          marklet.env = '${type}'
+          marklet.type = '${type}'
+          marklet.sourceType = '${this.sourceType}'
+          marklet.config = ${JSON.stringify(this.config)}
         `)
         return
       } else {
@@ -99,10 +107,7 @@ class MarkletServer<T extends ServerType> {
     }).listen(this.port)
 
     this.wsServer = new ws.Server({ server: this.httpServer })
-    this.wsServer.on('connection', (ws) => {
-      sendMsg.call(ws, 'config', options.config)
-    })
-
+    
     console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
@@ -124,9 +129,7 @@ export function watch(options: WatchOptions): MarkletServer<'watch'> {
   return server
 }
 
-export interface EditOptions extends ServerOptions {
-  source?: string
-}
+export interface EditOptions extends ServerOptions {}
 
 export function edit(options: EditOptions): MarkletServer<'edit'> {
   const server = new MarkletServer('edit', options)

From 9c6324c5cb8d64f63123f2a8b0e24bee2cc32909 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 22 Oct 2018 22:40:25 +0800
Subject: [PATCH 06/47] marklet handling event bus

---
 packages/dev-server/comp/editor.js | 10 +++++-----
 packages/dev-server/src/client.ts  | 24 +++++++++++++++++++++---
 packages/dev-server/src/index.html |  5 +----
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 31a3f01..4bc4fa3 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -40,15 +40,15 @@ module.exports = {
   },
 
   mounted() {
-    this.$eventBus.$on('server.document', (doc) => {
+    marklet.$on('server.document', (doc) => {
       this.openFile(doc)
     })
 
-    this.$eventBus.$on('monaco.theme.loaded', (monaco) => {
+    marklet.$on('monaco.theme.loaded', (monaco) => {
       monaco.editor.setTheme(this.theme)
     })
 
-    this.$eventBus.$on('monaco.loaded', (monaco) => {
+    marklet.$on('monaco.loaded', (monaco) => {
       const model = monaco.editor.createModel(this.source, 'marklet')
       model.onDidChangeContent(() => this.checkChange())
       const nodes = this.nodes
@@ -89,10 +89,10 @@ module.exports = {
       }
     },
     save() {
-      this.$eventBus.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
+      marklet.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
     },
     saveAs() {
-      this.$eventBus.$emit('client.message', 'saveAs', {
+      marklet.$emit('client.message', 'saveAs', {
         source: this.source,
         name: '' // TODO: read file name
       })
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index cd31cd7..8fa615f 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -12,12 +12,16 @@ Vue.use(renderer)
 Vue.component('mkl-checkbox', require('@/checkbox.vue'))
 
 const eventBus = new Vue()
-Vue.prototype.$eventBus = eventBus
 
 eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
   monaco.editor.defineTheme('dark', require('../themes/dark'))
   monaco.editor.defineTheme('simple', require('../themes/simple'))
   eventBus.$emit('monaco.theme.loaded', monaco)
+  if (!Vue.prototype.$colorize) {
+    Vue.prototype.$colorize = function(code: string, lang: string) {
+      return monaco.editor.colorize(code, lang, {})
+    }
+  }
 })
 
 const client = new class MarkletClient {
@@ -102,13 +106,27 @@ const typeMap = {
 const App = Vue.extend(require('@/app.vue'))
 
 export default new class Marklet {
-  vm: VueConstructor
+  app: VueConstructor
   type: ServerType
   config: LexerConfig
   sourceType: SourceType
+  events = eventBus
+  client = client
 
   create(el: string | HTMLElement) {
     document.title = 'Marklet - ' + typeMap[this.type]
-    return this.vm = new App().$mount(el)
+    return this.app = new App().$mount(el)
+  }
+
+  $on(event: string | string[], callback: Function) {
+    this.events.$on(event, callback)
+  }
+
+  $once(event: string, callback: Function) {
+    this.events.$once(event, callback)
+  }
+
+  $emit(event: string, ...args: any[]) {
+    this.events.$emit(event, ...args)
   }
 }
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/src/index.html
index a426ef3..61576ed 100644
--- a/packages/dev-server/src/index.html
+++ b/packages/dev-server/src/index.html
@@ -21,10 +21,7 @@
       if (marklet.type === 'edit') {
         require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
         require(['vs/editor/editor.main'], () => {
-          Vue.prototype.$eventBus.$emit('monaco.loaded', monaco)
-          if (!Vue.prototype.$colorize) {
-            Vue.prototype.$colorize = (code, lang) => monaco.editor.colorize(code, lang)
-          }
+          marklet.$emit('monaco.loaded', monaco)
         })
       }
     </script>

From b325aaa1eab3dc544f4beca33cebe10a7b3fc4fc Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Tue, 23 Oct 2018 02:35:21 +0800
Subject: [PATCH 07/47] server framework

---
 packages/dev-server/src/server.ts | 73 ++++++++++++++++++++++---------
 1 file changed, 53 insertions(+), 20 deletions(-)

diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 57390bc..c344ebd 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -22,22 +22,12 @@ ws.Server.prototype.broadcast = function (data) {
   })
 }
 
-function sendMsg(this: ws, type: string, data: object) {
-  this.send(JSON.stringify({ type, data }))
-}
-
-function toDocMessage(filename: string) {
-  return JSON.stringify({
-    type: 'document',
-    data: fs.readFileSync(filename).toString()
-  })
-}
-
 export type ServerType = 'watch' | 'edit'
 export type SourceType = 'file' | 'folder'
 
 interface ServerOptions {
   port?: number
+  filepath?: string
   config?: LexerConfig
   sourceType?: SourceType
 }
@@ -45,6 +35,7 @@ interface ServerOptions {
 class MarkletServer<T extends ServerType> {
   type: T
   port: number
+  filepath: string
   sourceType: SourceType
   config: LexerConfig
   wsServer: ws.Server
@@ -52,6 +43,7 @@ class MarkletServer<T extends ServerType> {
 
   constructor(type: T, options: ServerOptions = {}) {
     this.type = type
+    this.filepath = options.filepath
     this.config = options.config || {}
     this.port = options.port || DEFAULT_PORT
     this.sourceType = options.sourceType || 'file'
@@ -81,6 +73,7 @@ class MarkletServer<T extends ServerType> {
       } else if (pathname === 'initialize.js') {
         handleData(`
           marklet.type = '${type}'
+          marklet.filepath = '${this.filepath}'
           marklet.sourceType = '${this.sourceType}'
           marklet.config = ${JSON.stringify(this.config)}
         `)
@@ -107,31 +100,71 @@ class MarkletServer<T extends ServerType> {
     }).listen(this.port)
 
     this.wsServer = new ws.Server({ server: this.httpServer })
+    if (this.sourceType === 'file') {
+      this.wsServer.on('connection', (ws) => {
+        ws.send(FileMessage(this.filepath))
+      })
+      fs.watch(this.filepath, (eventType) => {
+        // FIXME: any need to check eventType?
+        this.wsServer.broadcast(FileMessage(this.filepath))
+      })
+    } else {
+      this.wsServer.on('connection', (ws) => {
+        for (const message in ProjectMessages(this.filepath)) {
+          ws.send(message)
+        }
+      })
+      fs.watch(this.filepath, () => {
+        // FIXME: only watching the index file is far from enough
+        // you need to watch the basedir and every files in it
+        for (const message in ProjectMessages(this.filepath)) {
+          this.wsServer.broadcast(message)
+        }
+      })
+    }
     
     console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
 
+type FileTree = IterableIterator<string | Directory>
+interface Directory { name: string, children: FileTree }
+
+function* traverse(filepath: string): FileTree {
+  // FIXME: get all files in a directory
+}
+
+function* ProjectMessages(filepath: string): IterableIterator<string> {
+  const source = fs.readFileSync(filepath).toString()
+  const options = JSON.parse(source) // FIXME: support for yaml
+  yield JSON.stringify({ type: 'project', data: options })
+  const basedir = options.basedir || path.dirname(filepath)
+  yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
+  // FIXME: add inner messages, for example file contents
+}
+
+function FileMessage(filepath: string, type = 'document') {
+  return JSON.stringify({
+    type,
+    filepath,
+    data: fs.readFileSync(filepath).toString(),
+  })
+}
+
 export { MarkletServer as Server }
 
 export interface WatchOptions extends ServerOptions {
-  source: string
+  filepath: string // required
 }
 
 export function watch(options: WatchOptions): MarkletServer<'watch'> {
-  const server = new MarkletServer('watch', options)
-  server.wsServer.on('connection', (ws) => {
-    ws.send(toDocMessage(options.source))
-  })
-  fs.watch(options.source, () => {
-    server.wsServer.broadcast(toDocMessage(options.source))
-  })
-  return server
+  return new MarkletServer('watch', options)
 }
 
 export interface EditOptions extends ServerOptions {}
 
 export function edit(options: EditOptions): MarkletServer<'edit'> {
   const server = new MarkletServer('edit', options)
+  // handle saving files and changing config and so on
   return server
 }

From f36253377cddee4fc9d826023982ce880335c160 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Tue, 23 Oct 2018 15:11:41 +0800
Subject: [PATCH 08/47] tiny improvement

---
 packages/dev-server/src/server.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index c344ebd..bea8120 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -24,6 +24,7 @@ ws.Server.prototype.broadcast = function (data) {
 
 export type ServerType = 'watch' | 'edit'
 export type SourceType = 'file' | 'folder'
+export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
@@ -104,9 +105,16 @@ class MarkletServer<T extends ServerType> {
       this.wsServer.on('connection', (ws) => {
         ws.send(FileMessage(this.filepath))
       })
-      fs.watch(this.filepath, (eventType) => {
-        // FIXME: any need to check eventType?
-        this.wsServer.broadcast(FileMessage(this.filepath))
+      fs.watch(this.filepath, (eventType: WatchEventType, filename) => {
+        if (eventType === 'rename') {
+          if (fs.existsSync(filename)) {
+            this.filepath = filename // got new name
+          } else {
+            // TODO: gracefully exit since source file gone
+          }
+        } else {
+          this.wsServer.broadcast(FileMessage(this.filepath))
+        }
       })
     } else {
       this.wsServer.on('connection', (ws) => {
@@ -114,7 +122,7 @@ class MarkletServer<T extends ServerType> {
           ws.send(message)
         }
       })
-      fs.watch(this.filepath, () => {
+      fs.watch(this.filepath, { recursive: true }, (eventType: WatchEventType, filename) => {
         // FIXME: only watching the index file is far from enough
         // you need to watch the basedir and every files in it
         for (const message in ProjectMessages(this.filepath)) {

From cc73038d039f8748640329cffd4d6e651f2087b2 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Tue, 23 Oct 2018 16:48:15 +0800
Subject: [PATCH 09/47] add some adjustments

1. core updated to v3.2.4
2. update cli readme file
3. disallow server-client communication when filepath is absent
---
 packages/cli/README.md            |  3 +++
 packages/cli/program.js           |  2 +-
 packages/core/package.json        |  2 +-
 packages/core/src/lexer.ts        | 21 +++++++++++++++------
 packages/dev-server/src/server.ts |  5 +++--
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/cli/README.md b/packages/cli/README.md
index dc2b1ea..a9fa284 100644
--- a/packages/cli/README.md
+++ b/packages/cli/README.md
@@ -50,7 +50,10 @@ Parse a marklet file into marklet AST.
 
 Options:
   (support config options)
+  -B, --no-bound         prevent from recording token bounds
   -f, --format [format]  the output format (default: "json")
+  -i, --indent [length]  set the indent length (default: 2)
+  -p, --pretty           pretty printed (it overrides all other options)
 ```
 
 ### edit
diff --git a/packages/cli/program.js b/packages/cli/program.js
index 7dee589..0b8cdef 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -44,7 +44,7 @@ Object.assign(Object.getPrototypeOf(program), {
   allowPort() {
     this._allowPort = true
     return this
-      .option('-o, --open', 'open in the default browser')
+      .option('-o, --open', 'show in browser when connection is established')
       .option('-p, --port [port]', 'port for the development server', parseInt, DEFAULT_PORT)
   },
   getConfig() {
diff --git a/packages/core/package.json b/packages/core/package.json
index f7a2ab2..a52140c 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marklet/core",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Some core conceptions of marklet.",
   "author": "shigma <1700011071@pku.edu.cn>",
   "contributors": [
diff --git a/packages/core/src/lexer.ts b/packages/core/src/lexer.ts
index eba9603..113c8a3 100644
--- a/packages/core/src/lexer.ts
+++ b/packages/core/src/lexer.ts
@@ -69,23 +69,27 @@ export interface LexerRegexRule<
   eol?: boolean
 }
 
+interface MacroRegExp extends RegExp {
+  target?: RegExp
+  macro?: string
+}
+
 export class MacroMap {
-  private data: Record<string, { regex: RegExp, macro: string }> = {}
+  private data: Record<string, MacroRegExp> = {}
 
   constructor(macros: LexerMacros = {}, config: LexerConfig = {}) {
     if (typeof macros === 'function') macros = macros(config)
     for (const key in macros) {
-      this.data[key] = {
-        regex: new RegExp(`{{${key}}}`, 'g'),
-        macro: `(?:${getString(macros[key])})`,
-      }
+      this.data[key] = getRegExp(macros[key])
+      this.data[key].target = new RegExp(`{{${key}}}`, 'g')
+      this.data[key].macro = `(?:${getString(macros[key])})`
     }
   }
 
   resolve(source: StringLike): string {
     source = getString(source)
     for (const key in this.data) {
-      source = source.replace(this.data[key].regex, this.data[key].macro)
+      source = source.replace(this.data[key].target, this.data[key].macro)
     }
     return source
   }
@@ -98,6 +102,11 @@ export function getString(source: StringLike): string {
   return source instanceof RegExp ? source.source : source
 }
 
+/** transform a string-like object into a raw regexp */
+export function getRegExp(source: StringLike): RegExp {
+  return source instanceof RegExp ? source : new RegExp(source)
+}
+
 export function isStringLike(source: any): boolean {
   return typeof source === 'string' || source instanceof RegExp
 }
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index bea8120..2701b36 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -101,6 +101,9 @@ class MarkletServer<T extends ServerType> {
     }).listen(this.port)
 
     this.wsServer = new ws.Server({ server: this.httpServer })
+    console.log(`Server running at http://localhost:${this.port}/`)
+
+    if (!this.filepath) return
     if (this.sourceType === 'file') {
       this.wsServer.on('connection', (ws) => {
         ws.send(FileMessage(this.filepath))
@@ -130,8 +133,6 @@ class MarkletServer<T extends ServerType> {
         }
       })
     }
-    
-    console.log(`Server running at http://localhost:${this.port}/`)
   }
 }
 

From 3a78f1545e7f9e3286e652b9eda775d61161520b Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 01:55:01 +0800
Subject: [PATCH 10/47] fix no editor error when watching

---
 packages/dev-server/comp/editor.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 4bc4fa3..1541b11 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -33,6 +33,8 @@ module.exports = {
   },
 
   created() {
+    this._enableEdit = marklet.type === 'edit'
+    this._isProject = marklet.sourceType !== 'file'
     this._lexer = new DocumentLexer(this.config)
 
     const source = localStorage.getItem('source')
@@ -106,6 +108,7 @@ module.exports = {
       this.changed = this.origin !== this.source
     },
     layout(deltaTime = 0) {
+      if (!this._editor) return
       const now = performance.now(), self = this
       this._editor._configuration.observeReferenceElement()
       this._editor._view._actualRender()

From a7428b143b01f350bf4db296b232866027ca2982 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 01:55:37 +0800
Subject: [PATCH 11/47] mnemonic

---
 packages/dev-server/comp/app.vue            | 10 ++++-
 packages/dev-server/comp/menu/command.json  |  8 +++-
 packages/dev-server/comp/menu/index.js      |  5 ++-
 packages/dev-server/comp/menu/menu-item.vue |  4 +-
 packages/dev-server/comp/menu/menu-view.vue | 16 +++++--
 packages/dev-server/comp/menu/menus.json    | 48 ++++++++++-----------
 packages/dev-server/src/server.ts           |  2 +-
 7 files changed, 60 insertions(+), 33 deletions(-)

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index 7a7932b..337d710 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -135,6 +135,11 @@ module.exports = {
     },
   },
 
+  created() {
+    this.$set(this.display.editor, 'show', this._enableEdit)
+    this.$set(this.display.explorer, 'show', this._isProject)
+  },
+
   mounted() {
     window.vm = this
 
@@ -195,6 +200,9 @@ module.exports = {
       window.open(url)
     },
     triggerArea(area) {
+      if (area === 'explorer' && !this._isProject) return
+      if (area === 'editor' && !this._enableEdit) return
+      
       this.display[area].show = !this.display[area].show
       if (this.display.editor.show) {
         this.$nextTick(() => this.layout(300))
@@ -224,7 +232,7 @@ module.exports = {
       <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
         @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
         :class="{ active: menuData.menubar.embed[index] }" @contextmenu.stop>
-        {{ menu.name }} (<span>{{ menu.bind }}</span>)&nbsp;
+        {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
       </div>
     </div>
     <div class="view explorer" :style="explorerStyle"/>
diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/menu/command.json
index 7b3d065..951aafa 100644
--- a/packages/dev-server/comp/menu/command.json
+++ b/packages/dev-server/comp/menu/command.json
@@ -2,7 +2,8 @@
   {
     "method": "openFile",
     "bind": "ctrl+o",
-    "name": "打开 ..."
+    "name": "打开",
+    "ellipsis": true
   },
   {
     "method": "save",
@@ -12,7 +13,8 @@
   {
     "method": "saveAs",
     "bind": "ctrl+shift+s",
-    "name": "另存为 ..."
+    "name": "另存为",
+    "ellipsis": true
   },
   {
     "method": "saveAll",
@@ -24,6 +26,7 @@
     "arguments": "explorer",
     "key": "trigger-explorer",
     "name": "资源管理器",
+    "enabled": "$_isProject",
     "bind": "ctrl+k ctrl+r",
     "checked": "$display.explorer.show"
   },
@@ -32,6 +35,7 @@
     "arguments": "editor",
     "key": "trigger-editor",
     "name": "编辑器视图",
+    "enabled": "$_enableEdit",
     "bind": "ctrl+k ctrl+e",
     "checked": "$display.editor.show"
   },
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 9fe9b7a..0424e19 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -79,7 +79,10 @@ module.exports = {
       method(...args.map(arg => this.parseArgument(arg)))
     },
     parseArgument(arg) {
-      if (typeof arg === 'string' && arg.startsWith('$')) {
+      if (typeof arg !== 'string') return arg
+      if (arg.startsWith('!$')) {
+        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], this)
+      } else if (arg.startsWith('$')) {
         return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this)
       } else {
         return arg
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 1479015..9751539 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -2,7 +2,7 @@
 
 module.exports = {
   inject: ['$menu'],
-  props: ['command'],
+  props: ['command', 'mnemonic'],
 
   computed: {
     disabled() {
@@ -35,6 +35,8 @@ module.exports = {
       <mkl-checkbox v-if="command.checked !== undefined"
         :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
       {{ command.name }}
+      <template v-if="mnemonic"> ({{ mnemonic }})</template>
+      <template v-if="command.ellipsis"> ...</template>
     </span>
     <span class="binding">{{ binding }}</span>
   </div>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 6ce7275..5f87ae8 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -8,6 +8,10 @@ module.exports = {
     MarkletMenuList: require('./menu-list.vue'),
     MarkletMenuItem: require('./menu-item.vue'),
   },
+
+  created() {
+    console.log(this.data)
+  }
 }
 
 </script>
@@ -16,12 +20,15 @@ module.exports = {
   <div>
     <template v-for="(item, index) in data">
       <template v-if="(item instanceof Object)">
-        <marklet-menu-view :key="index" v-show="embed[index]" :data="item.content"/>
+        <template v-if="item.content">
+          <marklet-menu-view :key="index" v-show="embed[index]" :data="item.content"/>
+        </template>
+        <marklet-menu-item :key="index" v-else
+          :command="commands[item.command]" :mnemonic="item.mnemonic"/>
       </template>
       <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
       </div>
-      <marklet-menu-item :key="index" v-else-if="!item.startsWith('@')" :command="commands[item]"/>
       <marklet-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
     </template>
   </div>
@@ -69,7 +76,10 @@ module.exports = {
     text-align: right;
   }
 
-  &.disabled { cursor: default }
+  &.disabled {
+    pointer-events: none;
+    cursor: default !important;
+  }
 }
 
 </style>
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
index f27d715..766412e 100644
--- a/packages/dev-server/comp/menu/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -2,51 +2,51 @@
   "menubar": [
     {
       "key": "file",
-      "name": "文件",
-      "bind": "F",
+      "caption": "文件",
+      "mnemonic": "F",
       "content": [
-        "open-file",
+        { "command": "open-file", "mnemonic": "O" },
         "@separator",
-        "save",
-        "save-as",
-        "save-all"
+        { "command": "save", "mnemonic": "S" },
+        { "command": "save-as", "mnemonic": "" },
+        { "command": "save-all", "mnemonic": "" }
       ]
     },
     {
       "key": "edit",
-      "name": "编辑",
-      "bind": "E",
+      "caption": "编辑",
+      "mnemonic": "E",
       "content": [
-        "undo",
-        "redo",
+        { "command": "undo", "mnemonic": "" },
+        { "command": "redo", "mnemonic": "" },
         "@separator",
-        "cut",
-        "copy",
-        "paste",
+        { "command": "cut", "mnemonic": "" },
+        { "command": "copy", "mnemonic": "" },
+        { "command": "paste", "mnemonic": "" },
         "@separator",
-        "find",
-        "find-next",
-        "find-previous"
+        { "command": "find", "mnemonic": "" },
+        { "command": "find-next", "mnemonic": "" },
+        { "command": "find-previous", "mnemonic": "" }
       ]
     },
     {
       "key": "view",
-      "name": "视图",
-      "bind": "V",
+      "caption": "视图",
+      "mnemonic": "V",
       "content": [
-        "trigger-explorer",
-        "trigger-editor",
-        "trigger-document",
+        { "command": "trigger-explorer", "mnemonic": "" },
+        { "command": "trigger-editor", "mnemonic": "" },
+        { "command": "trigger-document", "mnemonic": "" },
         "@separator",
         "@themes"
       ]
     },
     {
       "key": "link",
-      "name": "链接",
-      "bind": "L",
+      "caption": "链接",
+      "mnemonic": "L",
       "content": [
-        "open-repository"
+        { "command": "open-repository", "mnemonic": "" }
       ]
     }
   ]
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 2701b36..f5ebdb7 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -44,8 +44,8 @@ class MarkletServer<T extends ServerType> {
 
   constructor(type: T, options: ServerOptions = {}) {
     this.type = type
-    this.filepath = options.filepath
     this.config = options.config || {}
+    this.filepath = options.filepath || ''
     this.port = options.port || DEFAULT_PORT
     this.sourceType = options.sourceType || 'file'
 

From c271c7e35f748d12b0425b26e3de1365c0a96051 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 16:14:30 +0800
Subject: [PATCH 12/47] structure change to menus.json

---
 packages/dev-server/comp/app.vue              |  4 +-
 packages/dev-server/comp/menu/index.js        | 33 +++++------
 .../dev-server/comp/menu/menu-manager.vue     |  2 +-
 packages/dev-server/comp/menu/menu-view.vue   | 10 +---
 packages/dev-server/comp/menu/menus.json      | 55 ++++++++++---------
 5 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index 337d710..d57a4e5 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -229,9 +229,9 @@ module.exports = {
   <div :class="[theme, { dragging }]" class="marklet"
     @click="hideContextMenus" @contextmenu="hideContextMenus">
     <div class="menubar">
-      <div v-for="(menu, index) in menuData.menubar.content" :key="index" class="item"
+      <div v-for="(menu, index) in menuData.menubar.children" :key="index" class="item"
         @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-        :class="{ active: menuData.menubar.embed[index] }" @contextmenu.stop>
+        :class="{ active: menuData.menubar.current === index }" @contextmenu.stop>
         {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
       </div>
     </div>
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 0424e19..a6e9153 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -14,16 +14,15 @@ for (const command of require('./command.json')) {
   commands[key] = command
 }
 
-const menus = require('./menus.json')
 const menuData = {}
-const menuKeys = Object.keys(menus)
-for (const key of menuKeys) {
-  menuData[key] = {
-    show: false,
-    content: menus[key],
-    embed: new Array(menus[key].length).fill(false)
+require('./menus.json').forEach(function traverse(menu) {
+  if (menu.children) {
+    menuData[menu.key] = menu
+    menuData[menu.key].show = false
+    menuData[menu.key].current = null
   }
-}
+})
+const menuKeys = Object.keys(menuData)
 
 module.exports = {
   components: {
@@ -57,9 +56,9 @@ module.exports = {
       })
     }
     this.menuReference = {}
-    for (let index = 0; index < menuKeys.length; index++) {
-      this.menuReference[menuKeys[index]] = this.$refs.menus.$el.children[index]
-    }
+    menuKeys.forEach((key, index) => {
+      this.menuReference[key] = this.$refs.menus.$el.children[index]
+    })
   },
 
   methods: {
@@ -92,9 +91,7 @@ module.exports = {
       this.menubarActive = false
       for (const key in this.menuData) {
         this.menuData[key].show = false
-        for (let index = 0; index < this.menuData[key].embed.length; index++) {
-          this.menuData[key].embed.splice(index, 1, false)
-        }
+        this.menuData[key].current = null
       }
     },
     showContextMenu(key, event) {
@@ -118,7 +115,7 @@ module.exports = {
       }
     },
     hoverMenu(index, event) {
-      if (this.menubarActive && !this.menuData.menubar.embed[index]) {
+      if (this.menubarActive && this.menuData.menubar.current !== index) {
         this.showMenu(index, event)
       }
     },
@@ -130,11 +127,11 @@ module.exports = {
     },
     showMenu(index, event) {
       const style = this.menuReference.menubar.style
-      const last = this.menuData.menubar.embed.indexOf(true)
+      const last = this.menuData.menubar.current
       if (last === index) {
         this.menubarActive = false
         this.menuData.menubar.show = false
-        this.menuData.menubar.embed.splice(index, 1, false)
+        this.menuData.menubar.current = null
         return
       } else if (last === -1) {
         this.menubarMove = 0
@@ -145,7 +142,7 @@ module.exports = {
       this.locateMenuAtButton(event, style)
       this.menubarActive = true
       this.menuData.menubar.show = true
-      this.menuData.menubar.embed.splice(index, 1, true)
+      this.menuData.menubar.current = index
     },
     locateMenuAtButton(event, style) {
       const rect = event.currentTarget.getBoundingClientRect()
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/menu-manager.vue
index 0d3c409..432e38a 100644
--- a/packages/dev-server/comp/menu/menu-manager.vue
+++ b/packages/dev-server/comp/menu/menu-manager.vue
@@ -14,7 +14,7 @@ module.exports = {
   <div class="marklet-menu-manager">
     <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
       <marklet-menu-view class="marklet-menu" v-show="data[key].show"
-        :data="data[key].content" :embed="data[key].embed"/>
+        :data="data[key].children" :current="data[key].current"/>
     </transition>
   </div>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 5f87ae8..8056b45 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -3,15 +3,11 @@
 module.exports = {
   name: 'marklet-menu-view',
   inject: ['commands', '$menu'],
-  props: ['data', 'embed'],
+  props: ['data', 'current'],
   components: {
     MarkletMenuList: require('./menu-list.vue'),
     MarkletMenuItem: require('./menu-item.vue'),
   },
-
-  created() {
-    console.log(this.data)
-  }
 }
 
 </script>
@@ -20,8 +16,8 @@ module.exports = {
   <div>
     <template v-for="(item, index) in data">
       <template v-if="(item instanceof Object)">
-        <template v-if="item.content">
-          <marklet-menu-view :key="index" v-show="embed[index]" :data="item.content"/>
+        <template v-if="item.children">
+          <marklet-menu-view :key="index" v-show="current === index" :data="item.children"/>
         </template>
         <marklet-menu-item :key="index" v-else
           :command="commands[item.command]" :mnemonic="item.mnemonic"/>
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
index 766412e..0ead432 100644
--- a/packages/dev-server/comp/menu/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -1,53 +1,56 @@
-{
-  "menubar": [
+[{
+  "key": "menubar",
+  "children": [
     {
-      "key": "file",
       "caption": "文件",
       "mnemonic": "F",
-      "content": [
+      "children": [
         { "command": "open-file", "mnemonic": "O" },
         "@separator",
         { "command": "save", "mnemonic": "S" },
-        { "command": "save-as", "mnemonic": "" },
-        { "command": "save-all", "mnemonic": "" }
+        { "command": "save-as", "mnemonic": "A" },
+        { "command": "save-all", "mnemonic": "L" }
       ]
     },
     {
-      "key": "edit",
       "caption": "编辑",
       "mnemonic": "E",
-      "content": [
-        { "command": "undo", "mnemonic": "" },
-        { "command": "redo", "mnemonic": "" },
+      "children": [
+        { "command": "undo", "mnemonic": "U" },
+        { "command": "redo", "mnemonic": "R" },
         "@separator",
-        { "command": "cut", "mnemonic": "" },
-        { "command": "copy", "mnemonic": "" },
-        { "command": "paste", "mnemonic": "" },
+        { "command": "cut", "mnemonic": "T" },
+        { "command": "copy", "mnemonic": "C" },
+        { "command": "paste", "mnemonic": "P" },
         "@separator",
-        { "command": "find", "mnemonic": "" },
-        { "command": "find-next", "mnemonic": "" },
-        { "command": "find-previous", "mnemonic": "" }
+        { "command": "find", "mnemonic": "F" },
+        { "command": "find-next" },
+        { "command": "find-previous" }
       ]
     },
     {
-      "key": "view",
       "caption": "视图",
       "mnemonic": "V",
-      "content": [
-        { "command": "trigger-explorer", "mnemonic": "" },
-        { "command": "trigger-editor", "mnemonic": "" },
-        { "command": "trigger-document", "mnemonic": "" },
+      "children": [
+        { "command": "trigger-explorer", "mnemonic": "R" },
+        { "command": "trigger-editor", "mnemonic": "E" },
+        { "command": "trigger-document", "mnemonic": "D" },
         "@separator",
-        "@themes"
+        {
+          "caption": "主题",
+          "mnemonic": "T",
+          "children": [
+            "@themes"
+          ]
+        }
       ]
     },
     {
-      "key": "link",
       "caption": "链接",
       "mnemonic": "L",
-      "content": [
-        { "command": "open-repository", "mnemonic": "" }
+      "children": [
+        { "command": "open-repository", "mnemonic": "R" }
       ]
     }
   ]
-}
+}]

From d0c8a250efd143059a8cbc1ddd1ca006b05d835d Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 18:15:56 +0800
Subject: [PATCH 13/47] add some adjustments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

尝试增加了对层叠式菜单的支持
---
 packages/dev-server/comp/menu/command.json  |  3 +-
 packages/dev-server/comp/menu/index.js      | 37 +++++++++++++++------
 packages/dev-server/comp/menu/menu-item.vue | 27 ++++++++++++---
 packages/dev-server/comp/menu/menu-view.vue | 24 ++++++++++++-
 packages/dev-server/comp/menu/menus.json    |  5 ++-
 5 files changed, 77 insertions(+), 19 deletions(-)

diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/menu/command.json
index 951aafa..b047142 100644
--- a/packages/dev-server/comp/menu/command.json
+++ b/packages/dev-server/comp/menu/command.json
@@ -93,7 +93,8 @@
     "arguments": "editor.action.quickCommand",
     "key": "command-palette",
     "bind": "!f1",
-    "name": "命令面板"
+    "name": "命令面板",
+    "enabled": "$display.editor.show"
   },
   {
     "method": "executeAction",
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index a6e9153..64c9e2a 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -9,17 +9,20 @@ function toKebab(camel) {
 }
 
 const commands = {}
-for (const command of require('./command.json')) {
+require('./command.json').forEach((command) => {
   const key = command.key ? command.key : toKebab(command.method)
   commands[key] = command
-}
+})
 
 const menuData = {}
-require('./menus.json').forEach(function traverse(menu) {
+require('./menus.json').forEach(function walk(menu) {
+  if (menu.ref) {
+    menuData[menu.ref] = menu
+    menuData[menu.ref].show = false
+    menuData[menu.ref].current = null
+  }
   if (menu.children) {
-    menuData[menu.key] = menu
-    menuData[menu.key].show = false
-    menuData[menu.key].current = null
+    menu.children.forEach(walk)
   }
 })
 const menuKeys = Object.keys(menuData)
@@ -67,6 +70,7 @@ module.exports = {
       if (method instanceof Function) method(...args)
     },
     executeCommand(command) {
+      if (!command.method) return
       const method = this[command.method]
       if (!(method instanceof Function)) {
         console.error(`No method ${command.method} was found!`)
@@ -101,7 +105,7 @@ module.exports = {
       this.menuData[key].show = true
     },
     locateMenuAtClient(event, style) {
-      if (event.clientX + 200 > this.width) {
+      if (event.clientX + 200 > innerWidth) {
         style.left = event.clientX - 200 - this.left + 'px'
       } else {
         style.left = event.clientX - this.left + 'px'
@@ -122,7 +126,7 @@ module.exports = {
     showButtonMenu(key, event) {
       const style = this.menuReference[key].style
       this.hideContextMenus()
-      this.locateMenuAtButton(event, style)
+      this.locateAtTopBottom(event, style)
       this.menuData[key].show = true
     },
     showMenu(index, event) {
@@ -139,19 +143,30 @@ module.exports = {
         this.menubarMove = index - last
       }
       this.hideContextMenus()
-      this.locateMenuAtButton(event, style)
+      this.locateAtTopBottom(event, style)
       this.menubarActive = true
       this.menuData.menubar.show = true
       this.menuData.menubar.current = index
     },
-    locateMenuAtButton(event, style) {
+    locateAtTopBottom(event, style) {
       const rect = event.currentTarget.getBoundingClientRect()
-      if (rect.left + 200 > this.width) {
+      if (rect.left + 200 > innerWidth) {
         style.left = rect.left + rect.width - 200 + 'px'
       } else {
         style.left = rect.left + 'px'
       }
       style.top = rect.top + rect.height + 'px'
     },
+    locateAtLeftRight(event, style) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      if (rect.right + 200 > innerWidth) {
+        style.left = null
+        style.right = rect.left + 'px'
+      } else {
+        style.right = null
+        style.left = rect.right + 'px'
+      }
+      style.top = rect.top + 'px'
+    },
   },
 }
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 9751539..cda7c05 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -2,15 +2,32 @@
 
 module.exports = {
   inject: ['$menu'],
-  props: ['command', 'mnemonic'],
+  props: {
+    command: {
+      type: Object,
+      default: {},
+    },
+    mnemonic: {
+      type: String,
+      default: '',
+    },
+    binding: {
+      type: String,
+      default: '',
+    },
+    caption: {
+      type: String,
+      default: '',
+    },
+  },
 
   computed: {
     disabled() {
       if (!this.command.enabled) return
       return !this.$menu.parseArgument(this.command.enabled)
     },
-    binding() {
-      let binding = this.command.bind
+    keybinding() {
+      let binding = this.binding || this.command.bind
       if (!binding) return ''
       if (binding.charAt(0) === '!') binding = binding.slice(1)
       return binding.replace(/[a-z]+/g, word => {
@@ -34,11 +51,11 @@ module.exports = {
     <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
         :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
-      {{ command.name }}
+      {{ caption || command.name }}
       <template v-if="mnemonic"> ({{ mnemonic }})</template>
       <template v-if="command.ellipsis"> ...</template>
     </span>
-    <span class="binding">{{ binding }}</span>
+    <span class="binding">{{ keybinding }}</span>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 8056b45..82020c6 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -8,6 +8,22 @@ module.exports = {
     MarkletMenuList: require('./menu-list.vue'),
     MarkletMenuItem: require('./menu-item.vue'),
   },
+
+  methods: {
+    enterMenuItem(key, event) {
+      const style = this.$menu.menuReference[key].style
+      this.$menu.locateAtLeftRight(event, style)
+      this.$menu.menuData[key].show = true
+    },
+    leaveMenuItem(key, event) {
+      const x = event.clientX
+      const y = event.clientY
+      const rect = this.$el.getBoundingClientRect()
+      if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
+        this.$menu.menuData[key].show = false
+      }
+    },
+  },
 }
 
 </script>
@@ -15,7 +31,13 @@ module.exports = {
 <template>
   <div>
     <template v-for="(item, index) in data">
-      <template v-if="(item instanceof Object)">
+      <template v-if="typeof item === 'object'">
+        <template v-if="item.ref">
+          <marklet-menu-item :key="index" binding=">"
+            :caption="item.caption" :mnemonic="item.mnemonic"
+            @mouseenter.native="enterMenuItem(item.ref, $event)"
+            @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
+        </template>
         <template v-if="item.children">
           <marklet-menu-view :key="index" v-show="current === index" :data="item.children"/>
         </template>
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
index 0ead432..ab9da7b 100644
--- a/packages/dev-server/comp/menu/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -1,5 +1,5 @@
 [{
-  "key": "menubar",
+  "ref": "menubar",
   "children": [
     {
       "caption": "文件",
@@ -36,7 +36,10 @@
         { "command": "trigger-editor", "mnemonic": "E" },
         { "command": "trigger-document", "mnemonic": "D" },
         "@separator",
+        { "command": "command-palette", "mnemonic": "C" },
+        "@separator",
         {
+          "ref": "themes",
           "caption": "主题",
           "mnemonic": "T",
           "children": [

From 9c418729fd3c8a36b5218ac8d571391a928a22c7 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 18:22:25 +0800
Subject: [PATCH 14/47] cli options support filepath

---
 packages/cli/program.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 0b8cdef..880876a 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -64,6 +64,7 @@ Object.assign(Object.getPrototypeOf(program), {
         if (!MARK_TYPES.includes(path.extname(basePath))) {
           options = loadFromFile(basePath)
         }
+        options.filepath = basePath
       } else {
         let matchFound = false
         basePath = path.join(basePath, 'marklet')
@@ -72,6 +73,7 @@ Object.assign(Object.getPrototypeOf(program), {
           if (!fs.existsSync(filename)) continue
           if (fs.statSync(filename).isFile()) {
             options = loadFromFile(basePath)
+            options.filepath = basePath
             matchFound = true
             break
           }

From 7b775efe991eae07ea25271a4eb7ad3d9f05f7b3 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Wed, 24 Oct 2018 19:38:55 +0800
Subject: [PATCH 15/47] path fix

---
 packages/cli/program.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 880876a..18bcb71 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -67,12 +67,12 @@ Object.assign(Object.getPrototypeOf(program), {
         options.filepath = basePath
       } else {
         let matchFound = false
-        basePath = path.join(basePath, 'marklet')
+        const configPathWithoutExt = path.join(basePath, 'marklet')
         for (const type of ALL_TYPES) {
-          const filename = basePath + type
-          if (!fs.existsSync(filename)) continue
-          if (fs.statSync(filename).isFile()) {
-            options = loadFromFile(basePath)
+          const configPath = configPathWithoutExt + type
+          if (!fs.existsSync(configPath)) continue
+          if (fs.statSync(configPath).isFile()) {
+            options = loadFromFile(configPath)
             options.filepath = basePath
             matchFound = true
             break

From 5b77714642c6b46a01404081dd95b9806df6a1ba Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Wed, 24 Oct 2018 19:42:05 +0800
Subject: [PATCH 16/47] Relatively comprehensive file watch mode Focus on impl
 at present, code style issues (such as oop) shall be postponed.

---
 package.json                          |   1 +
 packages/dev-server/package.json      |   1 +
 packages/dev-server/src/server.ts     | 109 +++++++++++++++++---------
 packages/dev-server/src/serverUtil.ts |  13 +++
 packages/test/data/marklet.json       |   1 +
 5 files changed, 86 insertions(+), 39 deletions(-)
 create mode 100644 packages/dev-server/src/serverUtil.ts
 create mode 100644 packages/test/data/marklet.json

diff --git a/package.json b/package.json
index 8050427..a9c05c1 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@sfc2js/sass": "^2.0.0",
     "@types/cheerio": "^0.22.9",
     "@types/js-yaml": "^3.11.2",
+    "@types/lodash.debounce": "^4.0.4",
     "@types/node": "^10.12.0",
     "@types/ws": "^6.0.1",
     "ajv": "^6.5.4",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 641c719..3074a2b 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@marklet/parser": "^1.5.2",
     "@marklet/renderer": "^1.3.2",
+    "lodash.debounce": "^4.0.8",
     "monaco-editor": "^0.14.3",
     "mousetrap": "^1.6.2",
     "vue": "^2.5.17",
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 2701b36..632fa36 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -3,8 +3,10 @@ import * as http from 'http'
 import * as url from 'url'
 import * as fs from 'fs'
 import ws from 'ws'
+import debounce from 'lodash.debounce'
 
 import { LexerConfig } from '@marklet/parser'
+import { getContentType } from './serverUtil'
 
 export const DEFAULT_PORT = 10826
 
@@ -41,6 +43,7 @@ class MarkletServer<T extends ServerType> {
   config: LexerConfig
   wsServer: ws.Server
   httpServer: http.Server
+  watcher: fs.FSWatcher
 
   constructor(type: T, options: ServerOptions = {}) {
     this.type = type
@@ -48,7 +51,13 @@ class MarkletServer<T extends ServerType> {
     this.config = options.config || {}
     this.port = options.port || DEFAULT_PORT
     this.sourceType = options.sourceType || 'file'
+    this.createServer()
+    if (this.filepath) {
+      this.setupContentWatcher()
+    }
+  }
 
+  private createServer() {
     this.httpServer = http.createServer((request, response) => {
       function handleError(error: Error) {
         console.error(error)
@@ -73,8 +82,8 @@ class MarkletServer<T extends ServerType> {
         }
       } else if (pathname === 'initialize.js') {
         handleData(`
-          marklet.type = '${type}'
-          marklet.filepath = '${this.filepath}'
+          marklet.type = '${this.type}'
+          marklet.filepath = ${JSON.stringify(this.filepath)}
           marklet.sourceType = '${this.sourceType}'
           marklet.config = ${JSON.stringify(this.config)}
         `)
@@ -88,52 +97,74 @@ class MarkletServer<T extends ServerType> {
           return
         }
 
-        const ext = path.extname(filepath)
-        let contentType: string
-        switch (ext) {
-          case '.css': contentType = 'text/css'; break
-          case '.js': contentType = 'text/javascript'; break
-          case '.html': contentType = 'text/html'; break
-          default: contentType = 'application/octet-stream'
-        }
-        handleData(data.toString(), contentType)
+        handleData(data.toString(), getContentType(filepath))
       })
     }).listen(this.port)
-
     this.wsServer = new ws.Server({ server: this.httpServer })
     console.log(`Server running at http://localhost:${this.port}/`)
+  }
 
-    if (!this.filepath) return
+  private setupContentWatcher() {
     if (this.sourceType === 'file') {
-      this.wsServer.on('connection', (ws) => {
-        ws.send(FileMessage(this.filepath))
-      })
-      fs.watch(this.filepath, (eventType: WatchEventType, filename) => {
-        if (eventType === 'rename') {
-          if (fs.existsSync(filename)) {
-            this.filepath = filename // got new name
-          } else {
-            // TODO: gracefully exit since source file gone
-          }
-        } else {
-          this.wsServer.broadcast(FileMessage(this.filepath))
-        }
-      })
+      this.setupFileWatcher()
     } else {
-      this.wsServer.on('connection', (ws) => {
-        for (const message in ProjectMessages(this.filepath)) {
-          ws.send(message)
-        }
-      })
-      fs.watch(this.filepath, { recursive: true }, (eventType: WatchEventType, filename) => {
-        // FIXME: only watching the index file is far from enough
-        // you need to watch the basedir and every files in it
-        for (const message in ProjectMessages(this.filepath)) {
-          this.wsServer.broadcast(message)
-        }
-      })
+      this.setupProjectWatcher()
     }
   }
+
+  private setupFileWatcher() {
+    let content: string
+    let dirty: boolean
+    const updateContent = () => {
+      const temp = fs.readFileSync(this.filepath, 'utf8')
+      dirty = content !== temp
+      content = temp
+    }
+    updateContent()
+    const wrapDocumentMessage = () => JSON.stringify({
+      type: 'document',
+      filepath: this.filepath,
+      data: content,
+    })
+    this.wsServer.on('connection', (ws) => {
+      ws.send(wrapDocumentMessage())
+    })
+    const broadcast = debounce(() => {
+      updateContent()
+      if (dirty) {
+        this.wsServer.broadcast(wrapDocumentMessage())
+      }
+    }, 200)
+    this.watcher = fs.watch(this.filepath, (eventType: WatchEventType) => {
+      if (eventType === 'rename') {
+        this.dispose('Source file is gone.')
+      } else {
+        broadcast()
+      }
+    })
+  }
+
+  private setupProjectWatcher() {
+    this.wsServer.on('connection', (ws) => {
+      for (const message in ProjectMessages(this.filepath)) {
+        ws.send(message)
+      }
+    })
+    fs.watch(this.filepath, { recursive: true }, (eventType: WatchEventType, filename) => {
+      // FIXME: only watching the index file is far from enough
+      // you need to watch the basedir and every files in it
+      for (const message in ProjectMessages(this.filepath)) {
+        this.wsServer.broadcast(message)
+      }
+    })
+  }
+
+  public dispose(reason: string = '') {
+    this.wsServer.close()
+    this.httpServer.close()
+    this.watcher.close()
+    console.log(reason)
+  }
 }
 
 type FileTree = IterableIterator<string | Directory>
diff --git a/packages/dev-server/src/serverUtil.ts b/packages/dev-server/src/serverUtil.ts
new file mode 100644
index 0000000..da7ea54
--- /dev/null
+++ b/packages/dev-server/src/serverUtil.ts
@@ -0,0 +1,13 @@
+import { extname } from 'path'
+
+const mimeMap: Record<string, string> = {
+  '': 'application/octet-stream',
+  '.css': 'text/css',
+  '.js': 'text/javascript',
+  '.html': 'text/html'
+}
+
+export function getContentType(filepath: string): string {
+  const ext = extname(filepath)
+  return mimeMap[ext in mimeMap ? ext : '']
+}
\ No newline at end of file
diff --git a/packages/test/data/marklet.json b/packages/test/data/marklet.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/packages/test/data/marklet.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file

From 28a83a4b8a531788e8c9afb6f7cd5f18a8202eb3 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Wed, 24 Oct 2018 20:17:29 +0800
Subject: [PATCH 17/47] split code

---
 packages/dev-server/src/ContentManager.ts | 44 +++++++++++++++++++++++
 packages/dev-server/src/server.ts         | 40 ++++-----------------
 2 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 packages/dev-server/src/ContentManager.ts

diff --git a/packages/dev-server/src/ContentManager.ts b/packages/dev-server/src/ContentManager.ts
new file mode 100644
index 0000000..3bfc62c
--- /dev/null
+++ b/packages/dev-server/src/ContentManager.ts
@@ -0,0 +1,44 @@
+import { EventEmitter } from 'events'
+import { readFileSync, watch, FSWatcher } from 'fs'
+import debounce from 'lodash.debounce'
+
+type WatchEventType = 'rename' | 'change'
+
+export class FileManager extends EventEmitter {
+  private content: string
+  private dirty: boolean
+  private watcher: FSWatcher
+  private debouncedUpdate: () => void
+  public msg: string
+
+  constructor(private filepath: string) {
+    super()
+    this.update()
+    this.debouncedUpdate = debounce(() => this.update(), 200)
+    this.watcher = watch(this.filepath, (eventType: WatchEventType) => {
+      if (eventType === 'rename') {
+        this.dispose()
+      } else {
+        this.debouncedUpdate()
+      }
+    })
+  }
+
+  private update(): void {
+    const temp = readFileSync(this.filepath, 'utf8')
+    if (this.content !== temp) {
+      this.content = temp
+      this.msg = JSON.stringify({
+        type: 'document',
+        filepath: this.filepath,
+        data: this.content,
+      })
+      this.emit('update', this.msg)
+    }
+  }
+
+  public dispose(): void {
+    this.watcher.close()
+    this.emit('close')
+  }
+}
\ No newline at end of file
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/src/server.ts
index 632fa36..40dcb4c 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/src/server.ts
@@ -3,10 +3,10 @@ import * as http from 'http'
 import * as url from 'url'
 import * as fs from 'fs'
 import ws from 'ws'
-import debounce from 'lodash.debounce'
 
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './serverUtil'
+import { FileManager } from './ContentManager'
 
 export const DEFAULT_PORT = 10826
 
@@ -26,7 +26,6 @@ ws.Server.prototype.broadcast = function (data) {
 
 export type ServerType = 'watch' | 'edit'
 export type SourceType = 'file' | 'folder'
-export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
@@ -43,7 +42,6 @@ class MarkletServer<T extends ServerType> {
   config: LexerConfig
   wsServer: ws.Server
   httpServer: http.Server
-  watcher: fs.FSWatcher
 
   constructor(type: T, options: ServerOptions = {}) {
     this.type = type
@@ -113,35 +111,12 @@ class MarkletServer<T extends ServerType> {
   }
 
   private setupFileWatcher() {
-    let content: string
-    let dirty: boolean
-    const updateContent = () => {
-      const temp = fs.readFileSync(this.filepath, 'utf8')
-      dirty = content !== temp
-      content = temp
-    }
-    updateContent()
-    const wrapDocumentMessage = () => JSON.stringify({
-      type: 'document',
-      filepath: this.filepath,
-      data: content,
-    })
-    this.wsServer.on('connection', (ws) => {
-      ws.send(wrapDocumentMessage())
-    })
-    const broadcast = debounce(() => {
-      updateContent()
-      if (dirty) {
-        this.wsServer.broadcast(wrapDocumentMessage())
-      }
-    }, 200)
-    this.watcher = fs.watch(this.filepath, (eventType: WatchEventType) => {
-      if (eventType === 'rename') {
-        this.dispose('Source file is gone.')
-      } else {
-        broadcast()
-      }
+    const manager = new FileManager(this.filepath)
+    manager.once('close', () => {
+      this.dispose('Source file is gone.')
     })
+    this.wsServer.on('connection', ws => ws.send(manager.msg))
+    manager.on('update', msg => this.wsServer.broadcast(msg))
   }
 
   private setupProjectWatcher() {
@@ -150,7 +125,7 @@ class MarkletServer<T extends ServerType> {
         ws.send(message)
       }
     })
-    fs.watch(this.filepath, { recursive: true }, (eventType: WatchEventType, filename) => {
+    fs.watch(this.filepath, { recursive: true }, (eventType, filename) => {
       // FIXME: only watching the index file is far from enough
       // you need to watch the basedir and every files in it
       for (const message in ProjectMessages(this.filepath)) {
@@ -162,7 +137,6 @@ class MarkletServer<T extends ServerType> {
   public dispose(reason: string = '') {
     this.wsServer.close()
     this.httpServer.close()
-    this.watcher.close()
     console.log(reason)
   }
 }

From f75523328f7e8cd4d5fe2aec241365a7033c3990 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 20:27:57 +0800
Subject: [PATCH 18/47] menubar

---
 packages/dev-server/comp/app.vue              | 31 ++------
 packages/dev-server/comp/menu/index.js        | 29 +------
 .../menu/{menu-manager.vue => manager.vue}    |  0
 packages/dev-server/comp/menu/menubar.vue     | 79 +++++++++++++++++++
 packages/dev-server/src/client.ts             |  1 +
 5 files changed, 86 insertions(+), 54 deletions(-)
 rename packages/dev-server/comp/menu/{menu-manager.vue => manager.vue} (100%)
 create mode 100644 packages/dev-server/comp/menu/menubar.vue

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index d57a4e5..ea4e1af 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -228,13 +228,7 @@ module.exports = {
 <template>
   <div :class="[theme, { dragging }]" class="marklet"
     @click="hideContextMenus" @contextmenu="hideContextMenus">
-    <div class="menubar">
-      <div v-for="(menu, index) in menuData.menubar.children" :key="index" class="item"
-        @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-        :class="{ active: menuData.menubar.current === index }" @contextmenu.stop>
-        {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
-      </div>
-    </div>
+    <ob-menubar class="menubar" menu="menubar"/>
     <div class="view explorer" :style="explorerStyle"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
       @mousedown.stop="startDrag('left', $event)"/>
@@ -250,6 +244,8 @@ module.exports = {
 
 <style lang="scss" scoped>
 
+$-menubar-height: 32px;
+
 & {
   top: 0;
   left: 0;
@@ -260,29 +256,12 @@ module.exports = {
 }
 
 > .menubar {
-  overflow: hidden;
-  font-size: 14px;
-  left: 0;
-  height: 32px;
-  width: 100%;
-  float: left;
-  z-index: 11;
-  user-select: none;
-  position: relative;
-
-  .item {
-    line-height: 24px;
-    padding: 4px;
-    transition:
-      color 0.3s ease,
-      background-color 0.3s ease;
-    display: inline-block;
-  }
+  height: $-menubar-height;
 }
 
 > .view, > .border {
   position: absolute;
-  top: 32px;
+  top: $-menubar-height;
   bottom: 0;
   z-index: 0;
   height: auto;
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 64c9e2a..b95546a 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -29,14 +29,12 @@ const menuKeys = Object.keys(menuData)
 
 module.exports = {
   components: {
-    MarkletMenu: require('./menu-manager.vue'),
+    MarkletMenu: require('./manager.vue'),
   },
 
   data() {
     return {
       menuData,
-      menubarMove: 0,
-      menubarActive: false,
       altKey: false,
     }
   },
@@ -92,7 +90,6 @@ module.exports = {
       }
     },
     hideContextMenus() {
-      this.menubarActive = false
       for (const key in this.menuData) {
         this.menuData[key].show = false
         this.menuData[key].current = null
@@ -118,36 +115,12 @@ module.exports = {
         style.bottom = ''
       }
     },
-    hoverMenu(index, event) {
-      if (this.menubarActive && this.menuData.menubar.current !== index) {
-        this.showMenu(index, event)
-      }
-    },
     showButtonMenu(key, event) {
       const style = this.menuReference[key].style
       this.hideContextMenus()
       this.locateAtTopBottom(event, style)
       this.menuData[key].show = true
     },
-    showMenu(index, event) {
-      const style = this.menuReference.menubar.style
-      const last = this.menuData.menubar.current
-      if (last === index) {
-        this.menubarActive = false
-        this.menuData.menubar.show = false
-        this.menuData.menubar.current = null
-        return
-      } else if (last === -1) {
-        this.menubarMove = 0
-      } else {
-        this.menubarMove = index - last
-      }
-      this.hideContextMenus()
-      this.locateAtTopBottom(event, style)
-      this.menubarActive = true
-      this.menuData.menubar.show = true
-      this.menuData.menubar.current = index
-    },
     locateAtTopBottom(event, style) {
       const rect = event.currentTarget.getBoundingClientRect()
       if (rect.left + 200 > innerWidth) {
diff --git a/packages/dev-server/comp/menu/menu-manager.vue b/packages/dev-server/comp/menu/manager.vue
similarity index 100%
rename from packages/dev-server/comp/menu/menu-manager.vue
rename to packages/dev-server/comp/menu/manager.vue
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
new file mode 100644
index 0000000..512e52b
--- /dev/null
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -0,0 +1,79 @@
+<script>
+
+module.exports = {
+  inject: ['$menu'],
+
+  props: {
+    menu: {
+      type: String,
+      default: 'menubar',
+    }
+  },
+
+  computed: {
+    data() {
+      return this.$menu.menuData[this.menu]
+    },
+    element() {
+      return this.$menu.menuReference[this.menu]
+    },
+  },
+
+  methods: {
+    hoverMenu(index, event) {
+      const current = this.data.current
+      if (current !== null && current !== index) {
+        this.showMenu(index, event)
+      }
+    },
+    showMenu(index, event) {
+      const style = this.element.style
+      const last = this.data.current
+      if (last === index) {
+        this.data.show = false
+        this.data.current = null
+        return
+      }
+      this.$menu.hideContextMenus()
+      this.$menu.locateAtTopBottom(event, style)
+      this.data.show = true
+      this.data.current = index
+    },
+  }
+}
+
+</script>
+
+<template>
+  <div class="ob-menubar">
+    <div v-for="(menu, index) in data.children" :key="index" class="item"
+      @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
+      :class="{ active: data.current === index }" @contextmenu.stop>
+      {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  overflow: hidden;
+  font-size: 14px;
+  left: 0;
+  width: 100%;
+  float: left;
+  z-index: 11;
+  user-select: none;
+  position: relative;
+
+  .item {
+    line-height: 24px;
+    padding: 4px;
+    transition:
+      color 0.3s ease,
+      background-color 0.3s ease;
+    display: inline-block;
+  }
+}
+
+</style>
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 8fa615f..7d5e743 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -10,6 +10,7 @@ declare global {
 
 Vue.use(renderer)
 Vue.component('mkl-checkbox', require('@/checkbox.vue'))
+Vue.component('ob-menubar', require('@/menu/menubar.vue'))
 
 const eventBus = new Vue()
 

From c3b1038d77c00d780ec15a81196c0fa0b78e3cd4 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 22:55:31 +0800
Subject: [PATCH 19/47] almost done

---
 packages/dev-server/comp/.eslintrc.yml      |   1 +
 packages/dev-server/comp/app.vue            |  23 +--
 packages/dev-server/comp/menu/index.js      | 179 +++++++-------------
 packages/dev-server/comp/menu/manager.vue   |  96 ++++++++++-
 packages/dev-server/comp/menu/menu-list.vue |   6 +-
 packages/dev-server/comp/menu/menu-view.vue |   5 +-
 packages/dev-server/comp/menu/menubar.vue   |  22 ++-
 packages/dev-server/comp/menu/menus.json    |   7 +-
 packages/dev-server/src/client.ts           |   2 +-
 9 files changed, 186 insertions(+), 155 deletions(-)

diff --git a/packages/dev-server/comp/.eslintrc.yml b/packages/dev-server/comp/.eslintrc.yml
index 21af863..147b3ca 100644
--- a/packages/dev-server/comp/.eslintrc.yml
+++ b/packages/dev-server/comp/.eslintrc.yml
@@ -3,3 +3,4 @@ extends:
 
 globals:
   marklet: true
+  
\ No newline at end of file
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index ea4e1af..c150aef 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -1,16 +1,18 @@
 <script>
 
 const { themes } = require('@marklet/renderer')
+const commands = require('./menu/command')
+const menus = require('./menu/menus')
 
 const MIN_WIDTH = 0.1
 
 module.exports = {
   mixins: [
-    require('./menu'),
     require('./editor'),
   ],
 
   data: () => ({
+    themes,
     theme: 'dark',
     dragging: false,
     display: {
@@ -30,16 +32,6 @@ module.exports = {
   }),
 
   computed: {
-    lists() {
-      return {
-        themes: {
-          data: themes,
-          current: this.theme,
-          switch: 'setTheme',
-          prefix: '主题：',
-        },
-      }
-    },
     totalWidth() {
       return this.display.editor.width * this.display.editor.show
         + this.display.explorer.width * this.display.explorer.show
@@ -143,6 +135,9 @@ module.exports = {
   mounted() {
     window.vm = this
 
+    this.registerCommands(commands)
+    this.registerMenus(menus)
+
     addEventListener('resize', () => {
       this.dragging = true
       this.layout()
@@ -215,7 +210,7 @@ module.exports = {
       }
     },
     startDrag(position, event) {
-      this.hideContextMenus()
+      this.$menu.hideContextMenus()
       this.dragging = position
       this.$refs[position].classList.add('active')
       this.draggingLastX = event.clientX
@@ -226,8 +221,7 @@ module.exports = {
 </script>
 
 <template>
-  <div :class="[theme, { dragging }]" class="marklet"
-    @click="hideContextMenus" @contextmenu="hideContextMenus">
+  <div :class="[theme, { dragging }]" class="marklet">
     <ob-menubar class="menubar" menu="menubar"/>
     <div class="view explorer" :style="explorerStyle"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
@@ -238,7 +232,6 @@ module.exports = {
     <mkl-scroll class="view document" :style="documentStyle" :margin="4" :radius="6">
       <mkl-nodes ref="nodes" :content="nodes"/>
     </mkl-scroll>
-    <marklet-menu ref="menus" :data="menuData"/>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index b95546a..ea3b4fa 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -1,4 +1,6 @@
 const Mousetrap = require('mousetrap')
+const manager = require('./manager.vue')
+const menubar = require('./menubar.vue')
 
 // TODO: improve this pattern maybe. 
 // Cause: firing event inside textarea is blocked by mousetrap by default.
@@ -8,138 +10,71 @@ function toKebab(camel) {
   return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
 }
 
-const commands = {}
-require('./command.json').forEach((command) => {
-  const key = command.key ? command.key : toKebab(command.method)
-  commands[key] = command
-})
+module.exports = function(Vue) {
+  Vue.component('ob-menubar', menubar)
 
-const menuData = {}
-require('./menus.json').forEach(function walk(menu) {
-  if (menu.ref) {
-    menuData[menu.ref] = menu
-    menuData[menu.ref].show = false
-    menuData[menu.ref].current = null
-  }
-  if (menu.children) {
-    menu.children.forEach(walk)
-  }
-})
-const menuKeys = Object.keys(menuData)
+  let $menu = null, hooks = []
+  const commandData = {}, menuData = {}
+  const MenuManager = Vue.extend(manager)
 
-module.exports = {
-  components: {
-    MarkletMenu: require('./manager.vue'),
-  },
+  Object.defineProperty(Vue.prototype, '$menu', {
+    get: () => $menu
+  })
 
-  data() {
-    return {
-      menuData,
-      altKey: false,
+  Vue.prototype.onMenusLoad = function(callback) {
+    if ($menu) {
+      callback()
+    } else {
+      hooks.push(callback)
     }
-  },
-
-  provide() {
-    return {
-      menuKeys,
-      commands,
-      $menu: this,
-    }
-  },
+  }
 
-  mounted() {
-    for (const key in commands) {
-      const command = commands[key]
-      if (!command.bind || command.bind.startsWith('!')) continue
+  Vue.prototype.registerCommands = function(commands) {
+    commands.forEach((command) => {
+      const key = command.key ? command.key : toKebab(command.method)
+      commandData[key] = command
+      if (!command.bind || command.bind.startsWith('!')) return
       Mousetrap.bind(command.bind, () => {
-        this.executeCommand(command)
+        if (!$menu) return
+        $menu.executeCommand(command)
         return false
       })
-    }
-    this.menuReference = {}
-    menuKeys.forEach((key, index) => {
-      this.menuReference[key] = this.$refs.menus.$el.children[index]
     })
-  },
+  }
 
-  methods: {
-    executeMethod(key, ...args) {
-      const method = this[key]
-      if (method instanceof Function) method(...args)
-    },
-    executeCommand(command) {
-      if (!command.method) return
-      const method = this[command.method]
-      if (!(method instanceof Function)) {
-        console.error(`No method ${command.method} was found!`)
-        return
-      }
-      let args = command.arguments
-      if (args === undefined) args = []
-      if (!(args instanceof Array)) args = [args]
-      method(...args.map(arg => this.parseArgument(arg)))
-    },
-    parseArgument(arg) {
-      if (typeof arg !== 'string') return arg
-      if (arg.startsWith('!$')) {
-        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], this)
-      } else if (arg.startsWith('$')) {
-        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this)
-      } else {
-        return arg
-      }
-    },
-    hideContextMenus() {
-      for (const key in this.menuData) {
-        this.menuData[key].show = false
-        this.menuData[key].current = null
-      }
-    },
-    showContextMenu(key, event) {
-      const style = this.menuReference[key].style
-      this.hideContextMenus()
-      this.locateMenuAtClient(event, style)
-      this.menuData[key].show = true
-    },
-    locateMenuAtClient(event, style) {
-      if (event.clientX + 200 > innerWidth) {
-        style.left = event.clientX - 200 - this.left + 'px'
-      } else {
-        style.left = event.clientX - this.left + 'px'
+  Vue.prototype.registerMenus = function(menus) {
+    menus.forEach(function walk(menu) {
+      if (menu.ref) {
+        menuData[menu.ref] = menu
+        menuData[menu.ref].show = false
+        menuData[menu.ref].current = null
       }
-      if (event.clientY - this.top > this.height / 2) {
-        style.top = ''
-        style.bottom = this.top + this.height - event.clientY + 'px'
-      } else {
-        style.top = event.clientY - this.top + 'px'
-        style.bottom = ''
+      if (menu.children) {
+        menu.children.forEach(walk)
       }
-    },
-    showButtonMenu(key, event) {
-      const style = this.menuReference[key].style
-      this.hideContextMenus()
-      this.locateAtTopBottom(event, style)
-      this.menuData[key].show = true
-    },
-    locateAtTopBottom(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
-      if (rect.left + 200 > innerWidth) {
-        style.left = rect.left + rect.width - 200 + 'px'
-      } else {
-        style.left = rect.left + 'px'
-      }
-      style.top = rect.top + rect.height + 'px'
-    },
-    locateAtLeftRight(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
-      if (rect.right + 200 > innerWidth) {
-        style.left = null
-        style.right = rect.left + 'px'
-      } else {
-        style.right = null
-        style.left = rect.right + 'px'
-      }
-      style.top = rect.top + 'px'
-    },
-  },
+    })
+    const menuKeys = Object.keys(menuData)
+    const element = this.$el.appendChild(document.createElement('div'))
+    $menu = new MenuManager({
+      propsData: { menuData, menuKeys },
+      provide() {
+        return {
+          commands: commandData,
+          $menu: this,
+        }
+      },
+    })
+    $menu.$context = this
+    $menu.$mount(element)
+
+    hooks.forEach(callback => callback())
+
+    this.$el.addEventListener('click', () => {
+      $menu.hideContextMenus()
+    })
+
+    this.$el.addEventListener('contextmenu', () => {
+      $menu.hideContextMenus()
+    })
+  }
 }
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 432e38a..79e21d7 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -1,11 +1,99 @@
 <script>
 
 module.exports = {
-  props: ['data'],
-  inject: ['menuKeys'],
+  props: ['menuData', 'menuKeys'],
+
   components: {
     MarkletMenuView: require('./menu-view.vue'),
   },
+
+  mounted() {
+    this.menuReference = {}
+    this.menuKeys.forEach((key, index) => {
+      this.menuReference[key] = this.$el.children[index]
+    })
+  },
+
+  methods: {
+    executeMethod(key, ...args) {
+      const method = this.$context[key]
+      if (method instanceof Function) method(...args)
+    },
+    executeCommand(command) {
+      if (!command.method) return
+      const method = this.$context[command.method]
+      if (!(method instanceof Function)) {
+        console.error(`No method ${command.method} was found!`)
+        return
+      }
+      let args = command.arguments
+      if (args === undefined) args = []
+      if (!(args instanceof Array)) args = [args]
+      method(...args.map(arg => this.parseArgument(arg)))
+    },
+    parseArgument(arg) {
+      if (typeof arg !== 'string') return arg
+      if (arg.startsWith('!$')) {
+        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], this.$context)
+      } else if (arg.startsWith('$')) {
+        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this.$context)
+      } else {
+        return arg
+      }
+    },
+    hideContextMenus() {
+      for (const key in this.menuData) {
+        this.menuData[key].show = false
+        this.menuData[key].current = null
+      }
+    },
+    showContextMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateMenuAtClient(event, style)
+      this.menuData[key].show = true
+    },
+    locateMenuAtClient(event, style) {
+      if (event.clientX + 200 > innerWidth) {
+        style.left = event.clientX - 200 - this.left + 'px'
+      } else {
+        style.left = event.clientX - this.left + 'px'
+      }
+      if (event.clientY - this.top > this.height / 2) {
+        style.top = ''
+        style.bottom = this.top + this.height - event.clientY + 'px'
+      } else {
+        style.top = event.clientY - this.top + 'px'
+        style.bottom = ''
+      }
+    },
+    showButtonMenu(key, event) {
+      const style = this.menuReference[key].style
+      this.hideContextMenus()
+      this.locateAtTopBottom(event, style)
+      this.menuData[key].show = true
+    },
+    locateAtTopBottom(event, style) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      if (rect.left + 200 > innerWidth) {
+        style.left = rect.left + rect.width - 200 + 'px'
+      } else {
+        style.left = rect.left + 'px'
+      }
+      style.top = rect.top + rect.height + 'px'
+    },
+    locateAtLeftRight(event, style) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      if (rect.right + 200 > innerWidth) {
+        style.left = null
+        style.right = rect.left + 'px'
+      } else {
+        style.right = null
+        style.left = rect.right + 'px'
+      }
+      style.top = rect.top + 'px'
+    },
+  }
 }
 
 </script>
@@ -13,8 +101,8 @@ module.exports = {
 <template>
   <div class="marklet-menu-manager">
     <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <marklet-menu-view class="marklet-menu" v-show="data[key].show"
-        :data="data[key].children" :current="data[key].current"/>
+      <marklet-menu-view class="marklet-menu" v-show="menuData[key].show"
+        :data="menuData[key].children" :current="menuData[key].current"/>
     </transition>
   </div>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-list.vue b/packages/dev-server/comp/menu/menu-list.vue
index 2abfeff..84fa4ea 100644
--- a/packages/dev-server/comp/menu/menu-list.vue
+++ b/packages/dev-server/comp/menu/menu-list.vue
@@ -9,10 +9,10 @@ module.exports = {
 
 <template>
   <transition-group name="marklet-menu-list">
-    <div v-for="(item, index) in list.data" :key="index"
-      :class="['menu-item', { active: item.key === list.current }]"
+    <div v-for="(item, index) in $menu.parseArgument(list.data)" :key="index"
+      :class="['menu-item', { active: item.key === $menu.parseArgument(list.current) }]"
       @click="$menu.executeMethod(list.switch, item.key)">
-      <span class="label">{{ list.prefix }}{{ item.name }}{{ list.postfix }}</span>
+      <span class="label">{{ item.name }}</span>
     </div>
   </transition-group>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 82020c6..6fd41ac 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -33,7 +33,7 @@ module.exports = {
     <template v-for="(item, index) in data">
       <template v-if="typeof item === 'object'">
         <template v-if="item.ref">
-          <marklet-menu-item :key="index" binding=">"
+          <marklet-menu-item :key="index" @click.stop binding=">"
             :caption="item.caption" :mnemonic="item.mnemonic"
             @mouseenter.native="enterMenuItem(item.ref, $event)"
             @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
@@ -41,8 +41,9 @@ module.exports = {
         <template v-if="item.children">
           <marklet-menu-view :key="index" v-show="current === index" :data="item.children"/>
         </template>
-        <marklet-menu-item :key="index" v-else
+        <marklet-menu-item :key="index" v-else-if="item.command"
           :command="commands[item.command]" :mnemonic="item.mnemonic"/>
+        <marklet-menu-list :key="index" v-else :list="item"/>
       </template>
       <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 512e52b..18bf6d1 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -1,8 +1,6 @@
 <script>
 
 module.exports = {
-  inject: ['$menu'],
-
   props: {
     menu: {
       type: String,
@@ -10,6 +8,10 @@ module.exports = {
     }
   },
 
+  data: () => ({
+    loaded: false,
+  }),
+
   computed: {
     data() {
       return this.$menu.menuData[this.menu]
@@ -19,6 +21,10 @@ module.exports = {
     },
   },
 
+  created() {
+    this.onMenusLoad(() => this.loaded = true)
+  },
+
   methods: {
     hoverMenu(index, event) {
       const current = this.data.current
@@ -46,11 +52,13 @@ module.exports = {
 
 <template>
   <div class="ob-menubar">
-    <div v-for="(menu, index) in data.children" :key="index" class="item"
-      @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-      :class="{ active: data.current === index }" @contextmenu.stop>
-      {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
-    </div>
+    <template v-if="loaded">
+      <div v-for="(menu, index) in data.children" :key="index" class="item"
+        @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
+        :class="{ active: data.current === index }" @contextmenu.stop>
+        {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
+      </div>
+    </template>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menu/menus.json
index ab9da7b..8d44081 100644
--- a/packages/dev-server/comp/menu/menus.json
+++ b/packages/dev-server/comp/menu/menus.json
@@ -43,7 +43,12 @@
           "caption": "主题",
           "mnemonic": "T",
           "children": [
-            "@themes"
+            {
+              "role": "list",
+              "data": "$themes",
+              "current": "$theme",
+              "switch": "setTheme"
+            }
           ]
         }
       ]
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/src/client.ts
index 7d5e743..21c11d9 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/src/client.ts
@@ -9,8 +9,8 @@ declare global {
 }
 
 Vue.use(renderer)
+Vue.use(require('@/menu'))
 Vue.component('mkl-checkbox', require('@/checkbox.vue'))
-Vue.component('ob-menubar', require('@/menu/menubar.vue'))
 
 const eventBus = new Vue()
 

From 07ee5aecfa412bc14111888bd10fe174dfe5f1aa Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 24 Oct 2018 23:20:02 +0800
Subject: [PATCH 20/47] some structural change

---
 packages/dev-server/comp/app.vue              | 10 ++---
 .../dev-server/comp/{menu => }/command.json   |  0
 packages/dev-server/comp/menu/index.js        | 39 ++++++++++++-------
 packages/dev-server/comp/menu/manager.vue     |  4 +-
 .../comp/menu/{menu-view.vue => menu.vue}     |  0
 packages/dev-server/comp/menu/menubar.vue     | 20 +++-------
 .../dev-server/comp/{menu => }/menus.json     |  0
 7 files changed, 36 insertions(+), 37 deletions(-)
 rename packages/dev-server/comp/{menu => }/command.json (100%)
 rename packages/dev-server/comp/menu/{menu-view.vue => menu.vue} (100%)
 rename packages/dev-server/comp/{menu => }/menus.json (100%)

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index c150aef..ea2f00b 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -1,8 +1,6 @@
 <script>
 
 const { themes } = require('@marklet/renderer')
-const commands = require('./menu/command')
-const menus = require('./menu/menus')
 
 const MIN_WIDTH = 0.1
 
@@ -130,14 +128,16 @@ module.exports = {
   created() {
     this.$set(this.display.editor, 'show', this._enableEdit)
     this.$set(this.display.explorer, 'show', this._isProject)
+
+    this.registerCommands(require('./command'))
+    this.registerMenus(require('./menus'))
   },
 
+  updated() {},
+
   mounted() {
     window.vm = this
 
-    this.registerCommands(commands)
-    this.registerMenus(menus)
-
     addEventListener('resize', () => {
       this.dragging = true
       this.layout()
diff --git a/packages/dev-server/comp/menu/command.json b/packages/dev-server/comp/command.json
similarity index 100%
rename from packages/dev-server/comp/menu/command.json
rename to packages/dev-server/comp/command.json
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index ea3b4fa..9ed12f8 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -13,19 +13,15 @@ function toKebab(camel) {
 module.exports = function(Vue) {
   Vue.component('ob-menubar', menubar)
 
-  let $menu = null, hooks = []
+  let $menu = null, mountedHook = []
   const commandData = {}, menuData = {}
   const MenuManager = Vue.extend(manager)
 
-  Object.defineProperty(Vue.prototype, '$menu', {
-    get: () => $menu
-  })
-
   Vue.prototype.onMenusLoad = function(callback) {
     if ($menu) {
       callback()
     } else {
-      hooks.push(callback)
+      mountedHook.push(callback)
     }
   }
 
@@ -54,7 +50,9 @@ module.exports = function(Vue) {
       }
     })
     const menuKeys = Object.keys(menuData)
-    const element = this.$el.appendChild(document.createElement('div'))
+    const element = document.createElement('div')
+
+    
     $menu = new MenuManager({
       propsData: { menuData, menuKeys },
       provide() {
@@ -64,17 +62,28 @@ module.exports = function(Vue) {
         }
       },
     })
+
     $menu.$context = this
-    $menu.$mount(element)
+    Vue.prototype.$menu = $menu
 
-    hooks.forEach(callback => callback())
+    function mountMenu() {
+      this.$el.appendChild(element)
+      $menu.$mount(element)
+      mountedHook.forEach(callback => callback())
 
-    this.$el.addEventListener('click', () => {
-      $menu.hideContextMenus()
-    })
+      this.$el.addEventListener('click', () => {
+        $menu.hideContextMenus()
+      })
+  
+      this.$el.addEventListener('contextmenu', () => {
+        $menu.hideContextMenus()
+      })
+    }
 
-    this.$el.addEventListener('contextmenu', () => {
-      $menu.hideContextMenus()
-    })
+    if (this._isMounted) {
+      mountMenu()
+    } else {
+      this.$options.mounted.push(mountMenu)
+    }
   }
 }
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 79e21d7..1aaa107 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -4,7 +4,7 @@ module.exports = {
   props: ['menuData', 'menuKeys'],
 
   components: {
-    MarkletMenuView: require('./menu-view.vue'),
+    MarkletMenu: require('./menu.vue'),
   },
 
   mounted() {
@@ -101,7 +101,7 @@ module.exports = {
 <template>
   <div class="marklet-menu-manager">
     <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <marklet-menu-view class="marklet-menu" v-show="menuData[key].show"
+      <marklet-menu class="marklet-menu" v-show="menuData[key].show"
         :data="menuData[key].children" :current="menuData[key].current"/>
     </transition>
   </div>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu.vue
similarity index 100%
rename from packages/dev-server/comp/menu/menu-view.vue
rename to packages/dev-server/comp/menu/menu.vue
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 18bf6d1..0e9d1e6 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -8,10 +8,6 @@ module.exports = {
     }
   },
 
-  data: () => ({
-    loaded: false,
-  }),
-
   computed: {
     data() {
       return this.$menu.menuData[this.menu]
@@ -21,10 +17,6 @@ module.exports = {
     },
   },
 
-  created() {
-    this.onMenusLoad(() => this.loaded = true)
-  },
-
   methods: {
     hoverMenu(index, event) {
       const current = this.data.current
@@ -52,13 +44,11 @@ module.exports = {
 
 <template>
   <div class="ob-menubar">
-    <template v-if="loaded">
-      <div v-for="(menu, index) in data.children" :key="index" class="item"
-        @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-        :class="{ active: data.current === index }" @contextmenu.stop>
-        {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
-      </div>
-    </template>
+    <div v-for="(menu, index) in data.children" :key="index" class="item"
+      @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
+      :class="{ active: data.current === index }" @contextmenu.stop>
+      {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
+    </div>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/menu/menus.json b/packages/dev-server/comp/menus.json
similarity index 100%
rename from packages/dev-server/comp/menu/menus.json
rename to packages/dev-server/comp/menus.json

From fde21c8a6ecf8ba91ba138a320b39eb1fb80c756 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 00:24:35 +0800
Subject: [PATCH 21/47] add some adjustments

---
 packages/dev-server/comp/menu/index.js        | 16 ++------
 packages/dev-server/comp/menu/manager.vue     |  4 +-
 packages/dev-server/comp/menu/menu-item.vue   |  9 +++--
 packages/dev-server/comp/menu/menu-list.vue   | 26 -------------
 .../comp/menu/{menu.vue => menu-view.vue}     | 38 +++++++++----------
 5 files changed, 30 insertions(+), 63 deletions(-)
 delete mode 100644 packages/dev-server/comp/menu/menu-list.vue
 rename packages/dev-server/comp/menu/{menu.vue => menu-view.vue} (58%)

diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 9ed12f8..ad7be87 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -13,18 +13,10 @@ function toKebab(camel) {
 module.exports = function(Vue) {
   Vue.component('ob-menubar', menubar)
 
-  let $menu = null, mountedHook = []
+  let $menu = null
   const commandData = {}, menuData = {}
   const MenuManager = Vue.extend(manager)
 
-  Vue.prototype.onMenusLoad = function(callback) {
-    if ($menu) {
-      callback()
-    } else {
-      mountedHook.push(callback)
-    }
-  }
-
   Vue.prototype.registerCommands = function(commands) {
     commands.forEach((command) => {
       const key = command.key ? command.key : toKebab(command.method)
@@ -38,7 +30,7 @@ module.exports = function(Vue) {
     })
   }
 
-  Vue.prototype.registerMenus = function(menus) {
+  Vue.prototype.registerMenus = function(menus, parentNode) {
     menus.forEach(function walk(menu) {
       if (menu.ref) {
         menuData[menu.ref] = menu
@@ -67,9 +59,7 @@ module.exports = function(Vue) {
     Vue.prototype.$menu = $menu
 
     function mountMenu() {
-      this.$el.appendChild(element)
-      $menu.$mount(element)
-      mountedHook.forEach(callback => callback())
+      $menu.$mount((parentNode || this.$el).appendChild(element))
 
       this.$el.addEventListener('click', () => {
         $menu.hideContextMenus()
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 1aaa107..3936ff4 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -4,7 +4,7 @@ module.exports = {
   props: ['menuData', 'menuKeys'],
 
   components: {
-    MarkletMenu: require('./menu.vue'),
+    MenuView: require('./menu-view.vue'),
   },
 
   mounted() {
@@ -101,7 +101,7 @@ module.exports = {
 <template>
   <div class="marklet-menu-manager">
     <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <marklet-menu class="marklet-menu" v-show="menuData[key].show"
+      <menu-view class="marklet-menu" v-show="menuData[key].show"
         :data="menuData[key].children" :current="menuData[key].current"/>
     </transition>
   </div>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index cda7c05..93921d4 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -37,9 +37,12 @@ module.exports = {
   },
 
   methods: {
-    handleClick() {
-      if (this.disabled) return
-      this.$menu.executeCommand(this.command)
+    handleClick(event) {
+      if (this.disabled) {
+        event.stopPropagation()
+      } else {
+        this.$menu.executeCommand(this.command)
+      }
     }
   },
 }
diff --git a/packages/dev-server/comp/menu/menu-list.vue b/packages/dev-server/comp/menu/menu-list.vue
deleted file mode 100644
index 84fa4ea..0000000
--- a/packages/dev-server/comp/menu/menu-list.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-
-module.exports = {
-  inject: ['$menu'],
-  props: ['list'],
-}
-
-</script>
-
-<template>
-  <transition-group name="marklet-menu-list">
-    <div v-for="(item, index) in $menu.parseArgument(list.data)" :key="index"
-      :class="['menu-item', { active: item.key === $menu.parseArgument(list.current) }]"
-      @click="$menu.executeMethod(list.switch, item.key)">
-      <span class="label">{{ item.name }}</span>
-    </div>
-  </transition-group>
-</template>
-
-<style lang="scss" scoped>
-
-.label {
-  &.active { font-weight: bold }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu/menu.vue b/packages/dev-server/comp/menu/menu-view.vue
similarity index 58%
rename from packages/dev-server/comp/menu/menu.vue
rename to packages/dev-server/comp/menu/menu-view.vue
index 6fd41ac..b08cf62 100644
--- a/packages/dev-server/comp/menu/menu.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -1,12 +1,11 @@
 <script>
 
 module.exports = {
-  name: 'marklet-menu-view',
+  name: 'menu-view',
   inject: ['commands', '$menu'],
   props: ['data', 'current'],
   components: {
-    MarkletMenuList: require('./menu-list.vue'),
-    MarkletMenuItem: require('./menu-item.vue'),
+    MenuItem: require('./menu-item.vue'),
   },
 
   methods: {
@@ -31,24 +30,23 @@ module.exports = {
 <template>
   <div>
     <template v-for="(item, index) in data">
-      <template v-if="typeof item === 'object'">
-        <template v-if="item.ref">
-          <marklet-menu-item :key="index" @click.stop binding=">"
-            :caption="item.caption" :mnemonic="item.mnemonic"
-            @mouseenter.native="enterMenuItem(item.ref, $event)"
-            @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
-        </template>
-        <template v-if="item.children">
-          <marklet-menu-view :key="index" v-show="current === index" :data="item.children"/>
-        </template>
-        <marklet-menu-item :key="index" v-else-if="item.command"
-          :command="commands[item.command]" :mnemonic="item.mnemonic"/>
-        <marklet-menu-list :key="index" v-else :list="item"/>
-      </template>
-      <div :key="index" v-else-if="item === '@separator'" class="menu-item disabled" @click.stop>
+      <div :key="index" v-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
       </div>
-      <marklet-menu-list :key="index" v-else :list="$menu.lists[item.slice(1)]"/>
+      <menu-item :key="index" v-else-if="item.ref"
+        @click.native.stop binding=">"
+        :caption="item.caption" :mnemonic="item.mnemonic"
+        @mouseenter.native="enterMenuItem(item.ref, $event)"
+        @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
+      <menu-view :key="index" v-else-if="item.children"
+        v-show="current === index" :data="item.children"/>
+      <menu-item :key="index" v-else-if="item.command"
+        :command="commands[item.command]" :mnemonic="item.mnemonic"/>
+      <transition-group :key="index" v-else name="ob-menu-list">
+        <menu-item v-for="(sub, index) in $menu.parseArgument(item.data)" :key="index"
+          :class="{ active: sub.key === $menu.parseArgument(item.current) }"
+          @click.native="$menu.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
+      </transition-group>
     </template>
   </div>
 </template>
@@ -85,6 +83,8 @@ module.exports = {
     background: none;
     display: inline-block;
     margin: 0;
+    
+    &.active { font-weight: bold }
   }
 
   > .binding {

From abb9470fd58810b2fc52feb3654a099b9bccfb72 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 00:59:46 +0800
Subject: [PATCH 22/47] upfate structure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将 server 和 client 分离……
---
 .gitignore                                    |  4 +---
 build/build.js                                | 20 +++++++++----------
 .../{src/client.ts => client/index.ts}        |  2 +-
 .../dev-server/{src => client}/language.ts    |  0
 .../dev-server/{src => client}/monaco.scss    |  0
 packages/dev-server/package.json              |  8 ++++----
 .../dev-server/{src => server}/index.html     |  0
 .../{src/server.ts => server/index.ts}        |  6 +++---
 .../ContentManager.ts => server/manager.ts}   |  0
 .../{src/serverUtil.ts => server/util.ts}     |  0
 packages/dev-server/tsconfig.json             |  5 +++--
 11 files changed, 21 insertions(+), 24 deletions(-)
 rename packages/dev-server/{src/client.ts => client/index.ts} (98%)
 rename packages/dev-server/{src => client}/language.ts (100%)
 rename packages/dev-server/{src => client}/monaco.scss (100%)
 rename packages/dev-server/{src => server}/index.html (100%)
 rename packages/dev-server/{src/server.ts => server/index.ts} (96%)
 rename packages/dev-server/{src/ContentManager.ts => server/manager.ts} (100%)
 rename packages/dev-server/{src/serverUtil.ts => server/util.ts} (100%)

diff --git a/.gitignore b/.gitignore
index 1e5f855..7c6dc14 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,4 @@ temp
 *.tgz
 *.cache.*
 packages/app/main.js
-packages/app/index.html
-packages/monaco/index.css
-packages/dev-server/themes/*.json
\ No newline at end of file
+packages/app/index.html
\ No newline at end of file
diff --git a/build/build.js b/build/build.js
index 0afa797..2598d11 100644
--- a/build/build.js
+++ b/build/build.js
@@ -104,14 +104,15 @@ Promise.resolve().then(() => {
 }).then(() => {
   if (!program.server) return
   mkdirIfNotExists('dev-server/dist')
+  mkdirIfNotExists('dev-server/dist/themes')
 
   if (program.tsc) {
     util.exec('tsc -p packages/dev-server')
   }
 
-  function minifyHTML(type) {
-    const srcPath = util.resolve(`dev-server/src/${type}.html`)
-    const distPath = util.resolve(`dev-server/dist/${type}.html`)
+  function minifyHTML(src, dist) {
+    const srcPath = util.resolve(`dev-server/${src}/index.html`)
+    const distPath = util.resolve(`dev-server/${dist}/index.html`)
     if (program.prod) {
       fs.writeFileSync(
         distPath,
@@ -125,13 +126,9 @@ Promise.resolve().then(() => {
     }
   }
 
-  minifyHTML('index')
+  minifyHTML('server', 'dist')
 
   let css = ''
-  themes.forEach(({ key }) => {
-    const options = yaml.safeLoad(fs.readFileSync(util.resolve(`dev-server/themes/${key}.yaml`)))
-    fs.writeFileSync(util.resolve(`dev-server/themes/${key}.json`), JSON.stringify(options))
-  })
   
   return sfc2js.transpile({
     ...sfc2jsOptions,
@@ -142,10 +139,11 @@ Promise.resolve().then(() => {
     if (result.errors.length) throw result.errors.join('\n')
     return Promise.all(themes.map(({ key }) => new Promise((resolve, reject) => {
       const filepath = util.resolve('dev-server/themes/' + key)
+      const distpath = util.resolve('dev-server/dist/themes/' + key)
 
       try {
         const options = yaml.safeLoad(fs.readFileSync(filepath + '.yaml'))
-        fs.writeFileSync(filepath + '.json', JSON.stringify(options))
+        fs.writeFileSync(distpath + '.json', JSON.stringify(options))
       } catch (error) {
         reject(error)
       }
@@ -166,7 +164,7 @@ Promise.resolve().then(() => {
     fs.writeFileSync(util.resolve('dev-server/dist/themes.min.css'), css)
     return new Promise((resolve, reject) => {
       sass.render({
-        data: fs.readFileSync(util.resolve('dev-server/src/monaco.scss')).toString(),
+        data: fs.readFileSync(util.resolve('dev-server/client/monaco.scss')).toString(),
         outputStyle: 'compressed',
       }, (error, result) => {
         if (error) reject(error)
@@ -175,7 +173,7 @@ Promise.resolve().then(() => {
       })
     })
   }).then(() => bundle('dev-server', {
-    entry: 'dist/client.js',
+    entry: 'dist/client/index.js',
     output: 'client.min.js',
     libraryExport: 'default',
   }))
diff --git a/packages/dev-server/src/client.ts b/packages/dev-server/client/index.ts
similarity index 98%
rename from packages/dev-server/src/client.ts
rename to packages/dev-server/client/index.ts
index 21c11d9..8b933bf 100644
--- a/packages/dev-server/src/client.ts
+++ b/packages/dev-server/client/index.ts
@@ -2,7 +2,7 @@ import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
 import * as renderer from '@marklet/renderer'
 import { LexerConfig } from '@marklet/parser'
-import { SourceType, ServerType } from './server'
+import { SourceType, ServerType } from '../server'
 
 declare global {
   export const Vue: typeof VueConstructor
diff --git a/packages/dev-server/src/language.ts b/packages/dev-server/client/language.ts
similarity index 100%
rename from packages/dev-server/src/language.ts
rename to packages/dev-server/client/language.ts
diff --git a/packages/dev-server/src/monaco.scss b/packages/dev-server/client/monaco.scss
similarity index 100%
rename from packages/dev-server/src/monaco.scss
rename to packages/dev-server/client/monaco.scss
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 3074a2b..e9f71db 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -8,11 +8,11 @@
   ],
   "homepage": "https://github.com/obstudio/Marklet/tree/dev/packages/dev-server",
   "license": "MIT",
-  "main": "dist/server.js",
-  "typings": "dist/server.d.ts",
+  "main": "dist/server/index.js",
+  "typings": "dist/server/index.d.ts",
   "files": [
-    "dist/server.js",
-    "dist/server.d.ts",
+    "dist/server/index.js",
+    "dist/server/index.d.ts",
     "dist/client.min.js",
     "dist/client.min.css",
     "dist/themes.min.css",
diff --git a/packages/dev-server/src/index.html b/packages/dev-server/server/index.html
similarity index 100%
rename from packages/dev-server/src/index.html
rename to packages/dev-server/server/index.html
diff --git a/packages/dev-server/src/server.ts b/packages/dev-server/server/index.ts
similarity index 96%
rename from packages/dev-server/src/server.ts
rename to packages/dev-server/server/index.ts
index 170fb26..647f1a4 100644
--- a/packages/dev-server/src/server.ts
+++ b/packages/dev-server/server/index.ts
@@ -5,8 +5,8 @@ import * as fs from 'fs'
 import ws from 'ws'
 
 import { LexerConfig } from '@marklet/parser'
-import { getContentType } from './serverUtil'
-import { FileManager } from './ContentManager'
+import { getContentType } from './util'
+import { FileManager } from './manager'
 
 export const DEFAULT_PORT = 10826
 
@@ -87,7 +87,7 @@ class MarkletServer<T extends ServerType> {
         `)
         return
       } else {
-        filepath = path.join(__dirname, pathname || 'index.html')
+        filepath = path.join(__dirname, '..', pathname || 'index.html')
       }
       fs.readFile(filepath, (error, data) => {
         if (error) {
diff --git a/packages/dev-server/src/ContentManager.ts b/packages/dev-server/server/manager.ts
similarity index 100%
rename from packages/dev-server/src/ContentManager.ts
rename to packages/dev-server/server/manager.ts
diff --git a/packages/dev-server/src/serverUtil.ts b/packages/dev-server/server/util.ts
similarity index 100%
rename from packages/dev-server/src/serverUtil.ts
rename to packages/dev-server/server/util.ts
diff --git a/packages/dev-server/tsconfig.json b/packages/dev-server/tsconfig.json
index 30874db..3e81fcf 100644
--- a/packages/dev-server/tsconfig.json
+++ b/packages/dev-server/tsconfig.json
@@ -1,11 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
   "include": [
-    "src"
+    "server",
+    "client"
   ],
   "compilerOptions": {
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": "."
   },
   "references": [
     { "path": "../parser" }

From c2e0107dd44eec8ed40beaf9a2bec79df40eacfd Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 01:08:09 +0800
Subject: [PATCH 23/47] project framework

---
 .../dev-server/server/{manager.ts => file.ts} |  4 +-
 packages/dev-server/server/index.ts           | 44 ++-----------
 packages/dev-server/server/project.ts         | 61 +++++++++++++++++++
 packages/dev-server/server/util.ts            |  2 +-
 4 files changed, 70 insertions(+), 41 deletions(-)
 rename packages/dev-server/server/{manager.ts => file.ts} (94%)
 create mode 100644 packages/dev-server/server/project.ts

diff --git a/packages/dev-server/server/manager.ts b/packages/dev-server/server/file.ts
similarity index 94%
rename from packages/dev-server/server/manager.ts
rename to packages/dev-server/server/file.ts
index 3bfc62c..853715b 100644
--- a/packages/dev-server/server/manager.ts
+++ b/packages/dev-server/server/file.ts
@@ -4,7 +4,7 @@ import debounce from 'lodash.debounce'
 
 type WatchEventType = 'rename' | 'change'
 
-export class FileManager extends EventEmitter {
+export default class FileManager extends EventEmitter {
   private content: string
   private dirty: boolean
   private watcher: FSWatcher
@@ -41,4 +41,4 @@ export class FileManager extends EventEmitter {
     this.watcher.close()
     this.emit('close')
   }
-}
\ No newline at end of file
+}
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 647f1a4..4f2d82c 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -6,7 +6,8 @@ import ws from 'ws'
 
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './util'
-import { FileManager } from './manager'
+import ProjectManager from './project'
+import FileManager from './file'
 
 export const DEFAULT_PORT = 10826
 
@@ -25,7 +26,7 @@ ws.Server.prototype.broadcast = function (data) {
 }
 
 export type ServerType = 'watch' | 'edit'
-export type SourceType = 'file' | 'folder'
+export type SourceType = 'file' | 'project'
 
 interface ServerOptions {
   port?: number
@@ -120,18 +121,9 @@ class MarkletServer<T extends ServerType> {
   }
 
   private setupProjectWatcher() {
-    this.wsServer.on('connection', (ws) => {
-      for (const message in ProjectMessages(this.filepath)) {
-        ws.send(message)
-      }
-    })
-    fs.watch(this.filepath, { recursive: true }, (eventType, filename) => {
-      // FIXME: only watching the index file is far from enough
-      // you need to watch the basedir and every files in it
-      for (const message in ProjectMessages(this.filepath)) {
-        this.wsServer.broadcast(message)
-      }
-    })
+    const manager = new ProjectManager(this.filepath)
+    this.wsServer.on('connection', ws => ws.send(manager.msg))
+    manager.on('update', msg => this.wsServer.broadcast(msg))
   }
 
   public dispose(reason: string = '') {
@@ -141,30 +133,6 @@ class MarkletServer<T extends ServerType> {
   }
 }
 
-type FileTree = IterableIterator<string | Directory>
-interface Directory { name: string, children: FileTree }
-
-function* traverse(filepath: string): FileTree {
-  // FIXME: get all files in a directory
-}
-
-function* ProjectMessages(filepath: string): IterableIterator<string> {
-  const source = fs.readFileSync(filepath).toString()
-  const options = JSON.parse(source) // FIXME: support for yaml
-  yield JSON.stringify({ type: 'project', data: options })
-  const basedir = options.basedir || path.dirname(filepath)
-  yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
-  // FIXME: add inner messages, for example file contents
-}
-
-function FileMessage(filepath: string, type = 'document') {
-  return JSON.stringify({
-    type,
-    filepath,
-    data: fs.readFileSync(filepath).toString(),
-  })
-}
-
 export { MarkletServer as Server }
 
 export interface WatchOptions extends ServerOptions {
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
new file mode 100644
index 0000000..4382820
--- /dev/null
+++ b/packages/dev-server/server/project.ts
@@ -0,0 +1,61 @@
+import { dirname } from 'path'
+import { EventEmitter } from 'events'
+import { readFileSync, watch, FSWatcher } from 'fs'
+import debounce from 'lodash.debounce'
+
+type WatchEventType = 'rename' | 'change'
+
+type FileTree = IterableIterator<string | Directory>
+interface Directory { name: string, children: FileTree }
+
+function* traverse(filepath: string): FileTree {
+  // FIXME: get all files in a directory
+}
+
+function* ProjectMessages(filepath: string): IterableIterator<string> {
+  const source = readFileSync(filepath).toString()
+  const options = JSON.parse(source) // FIXME: support for yaml
+  yield JSON.stringify({ type: 'project', data: options })
+  const basedir = options.basedir || dirname(filepath)
+  yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
+  // FIXME: add inner messages, for example file contents
+}
+
+export default class ProjectManager extends EventEmitter {
+  private content: string
+  private dirty: boolean
+  private watcher: FSWatcher
+  private debouncedUpdate: () => void
+  public msg: string
+
+  constructor(private filepath: string) {
+    super()
+    this.update()
+    this.debouncedUpdate = debounce(() => this.update(), 200)
+    this.watcher = watch(this.filepath, (eventType: WatchEventType) => {
+      if (eventType === 'rename') {
+        this.dispose()
+      } else {
+        this.debouncedUpdate()
+      }
+    })
+  }
+
+  private update(): void {
+    const temp = readFileSync(this.filepath, 'utf8')
+    if (this.content !== temp) {
+      this.content = temp
+      this.msg = JSON.stringify({
+        type: 'document',
+        filepath: this.filepath,
+        data: this.content,
+      })
+      this.emit('update', this.msg)
+    }
+  }
+
+  public dispose(): void {
+    this.watcher.close()
+    this.emit('close')
+  }
+}
diff --git a/packages/dev-server/server/util.ts b/packages/dev-server/server/util.ts
index da7ea54..4eeab42 100644
--- a/packages/dev-server/server/util.ts
+++ b/packages/dev-server/server/util.ts
@@ -10,4 +10,4 @@ const mimeMap: Record<string, string> = {
 export function getContentType(filepath: string): string {
   const ext = extname(filepath)
   return mimeMap[ext in mimeMap ? ext : '']
-}
\ No newline at end of file
+}

From 87c1a4c51c802b1c4f7e8e264820ebb327b2b71d Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 11:03:19 +0800
Subject: [PATCH 24/47] trying to add mnemonic support

---
 packages/dev-server/comp/menu/index.js      |  4 +-
 packages/dev-server/comp/menu/manager.vue   | 17 ++++---
 packages/dev-server/comp/menu/menu-view.vue | 37 +++++++++++---
 packages/dev-server/comp/menu/menubar.vue   | 54 ++++++++++++++++-----
 4 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index ad7be87..3835c65 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -17,6 +17,8 @@ module.exports = function(Vue) {
   const commandData = {}, menuData = {}
   const MenuManager = Vue.extend(manager)
 
+  Vue.prototype.$mousetrap = Mousetrap
+
   Vue.prototype.registerCommands = function(commands) {
     commands.forEach((command) => {
       const key = command.key ? command.key : toKebab(command.method)
@@ -35,6 +37,7 @@ module.exports = function(Vue) {
       if (menu.ref) {
         menuData[menu.ref] = menu
         menuData[menu.ref].show = false
+        menuData[menu.ref].focused = false
         menuData[menu.ref].current = null
       }
       if (menu.children) {
@@ -43,7 +46,6 @@ module.exports = function(Vue) {
     })
     const menuKeys = Object.keys(menuData)
     const element = document.createElement('div')
-
     
     $menu = new MenuManager({
       propsData: { menuData, menuKeys },
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 3936ff4..cd6fdf3 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -7,7 +7,12 @@ module.exports = {
     MenuView: require('./menu-view.vue'),
   },
 
+  data: () => ({
+    loaded: false,
+  }),
+
   mounted() {
+    this.loaded = true
     this.menuReference = {}
     this.menuKeys.forEach((key, index) => {
       this.menuReference[key] = this.$el.children[index]
@@ -69,12 +74,12 @@ module.exports = {
     },
     showButtonMenu(key, event) {
       const style = this.menuReference[key].style
+      const rect = event.currentTarget.getBoundingClientRect()
       this.hideContextMenus()
-      this.locateAtTopBottom(event, style)
+      this.locateAtTopBottom(rect, style)
       this.menuData[key].show = true
     },
-    locateAtTopBottom(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
+    locateAtTopBottom(rect, style) {
       if (rect.left + 200 > innerWidth) {
         style.left = rect.left + rect.width - 200 + 'px'
       } else {
@@ -82,8 +87,7 @@ module.exports = {
       }
       style.top = rect.top + rect.height + 'px'
     },
-    locateAtLeftRight(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
+    locateAtLeftRight(rect, style) {
       if (rect.right + 200 > innerWidth) {
         style.left = null
         style.right = rect.left + 'px'
@@ -101,8 +105,7 @@ module.exports = {
 <template>
   <div class="marklet-menu-manager">
     <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <menu-view class="marklet-menu" v-show="menuData[key].show"
-        :data="menuData[key].children" :current="menuData[key].current"/>
+      <menu-view class="marklet-menu" v-show="menuData[key].show" :data="menuData[key]"/>
     </transition>
   </div>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index b08cf62..47508cb 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -3,15 +3,38 @@
 module.exports = {
   name: 'menu-view',
   inject: ['commands', '$menu'],
-  props: ['data', 'current'],
+  props: ['data'],
   components: {
     MenuItem: require('./menu-item.vue'),
   },
 
+  mounted() {
+    addEventListener('keypress', (event) => {
+      if (!!this.data.show || !this.data.focused) return
+      const key = event.key.toUpperCase()
+      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      if (index >= 0) {
+        this.toggleMenuItem(index)
+      }
+    })
+  },
+
   methods: {
-    enterMenuItem(key, event) {
+    toggleMenuItem(index) {
+      const item = this.data.children[index]
+      if (typeof item !== 'object') return
+      if (item.ref) {
+        this.enterMenuItem()
+      } else if (!item.disabled && !item.children) {
+        if (item.command) {
+          this.$menu.executeCommand(item.command)
+        }
+      }
+    },
+    enterMenuItem(key, index) {
       const style = this.$menu.menuReference[key].style
-      this.$menu.locateAtLeftRight(event, style)
+      const rect = this.$el.children[index].getBoundingClientRect()
+      this.$menu.locateAtLeftRight(rect, style)
       this.$menu.menuData[key].show = true
     },
     leaveMenuItem(key, event) {
@@ -28,18 +51,18 @@ module.exports = {
 </script>
 
 <template>
-  <div>
-    <template v-for="(item, index) in data">
+  <div :class="{ focused: data.focused }">
+    <template v-for="(item, index) in data.children">
       <div :key="index" v-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
       </div>
       <menu-item :key="index" v-else-if="item.ref"
         @click.native.stop binding=">"
         :caption="item.caption" :mnemonic="item.mnemonic"
-        @mouseenter.native="enterMenuItem(item.ref, $event)"
+        @mouseenter.native="enterMenuItem(item.ref, index)"
         @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
       <menu-view :key="index" v-else-if="item.children"
-        v-show="current === index" :data="item.children"/>
+        v-show="data.current === index" :data="item"/>
       <menu-item :key="index" v-else-if="item.command"
         :command="commands[item.command]" :mnemonic="item.mnemonic"/>
       <transition-group :key="index" v-else name="ob-menu-list">
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 0e9d1e6..2559ffa 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -8,6 +8,10 @@ module.exports = {
     }
   },
 
+  data: () => ({
+    focused: false,
+  }),
+
   computed: {
     data() {
       return this.$menu.menuData[this.menu]
@@ -17,24 +21,44 @@ module.exports = {
     },
   },
 
+  mounted() {
+    this.$mousetrap.bind('alt', () => {
+      this.focused = !this.focused
+      this.$el.focus()
+    })
+
+    addEventListener('keypress', (event) => {
+      if (!this.focused) return
+      console.log(event)
+      const key = event.key.toUpperCase()
+      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      if (index >= 0) {
+        this.toggleMenu(index)
+      }
+    })
+  },
+
   methods: {
-    hoverMenu(index, event) {
+    hoverMenu(index) {
       const current = this.data.current
       if (current !== null && current !== index) {
-        this.showMenu(index, event)
+        this.toggleMenu(index)
       }
     },
-    showMenu(index, event) {
-      const style = this.element.style
+    toggleMenu(index) {
       const last = this.data.current
       if (last === index) {
         this.data.show = false
         this.data.current = null
         return
       }
+      this.focused = false
+      const style = this.element.style
+      const rect = this.$el.children[index].getBoundingClientRect()
       this.$menu.hideContextMenus()
-      this.$menu.locateAtTopBottom(event, style)
+      this.$menu.locateAtTopBottom(rect, style)
       this.data.show = true
+      this.data.focused = true
       this.data.current = index
     },
   }
@@ -43,12 +67,14 @@ module.exports = {
 </script>
 
 <template>
-  <div class="ob-menubar">
-    <div v-for="(menu, index) in data.children" :key="index" class="item"
-      @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-      :class="{ active: data.current === index }" @contextmenu.stop>
-      {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
-    </div>
+  <div :class="['ob-menubar', { focused }]">
+    <template v-if="$menu.loaded">
+      <div v-for="(menu, index) in data.children" :key="index" class="item"
+        @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
+        :class="{ active: data.current === index }" @contextmenu.stop>
+        {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
+      </div>
+    </template>
   </div>
 </template>
 
@@ -74,4 +100,10 @@ module.exports = {
   }
 }
 
+&.focused {
+  .mnemonic {
+    text-decoration: underline;
+  }
+}
+
 </style>

From 964473d8a6739f5b5422ca2171e7999e0b58ae53 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 18:54:17 +0800
Subject: [PATCH 25/47] add some adjustments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 将一些 API 更换了名称
2. 去除了 inject 的使用
3. 修改了 $menuManager 上 $ref 的实现
4. 解决了多次按 Alt 失效的问题
---
 packages/dev-server/comp/app.vue            |  8 ++---
 packages/dev-server/comp/menu/index.js      | 35 +++++++--------------
 packages/dev-server/comp/menu/manager.vue   | 20 ++++++------
 packages/dev-server/comp/menu/menu-item.vue |  7 ++---
 packages/dev-server/comp/menu/menu-view.vue | 19 ++++++-----
 packages/dev-server/comp/menu/menubar.vue   | 15 ++++-----
 6 files changed, 46 insertions(+), 58 deletions(-)

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index ea2f00b..e2fb816 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -129,12 +129,10 @@ module.exports = {
     this.$set(this.display.editor, 'show', this._enableEdit)
     this.$set(this.display.explorer, 'show', this._isProject)
 
-    this.registerCommands(require('./command'))
-    this.registerMenus(require('./menus'))
+    this.$registerCommands(require('./command'))
+    this.$registerMenus(require('./menus'))
   },
 
-  updated() {},
-
   mounted() {
     window.vm = this
 
@@ -210,7 +208,7 @@ module.exports = {
       }
     },
     startDrag(position, event) {
-      this.$menu.hideContextMenus()
+      this.$menuManager.hideContextMenus()
       this.dragging = position
       this.$refs[position].classList.add('active')
       this.draggingLastX = event.clientX
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 3835c65..67b1da9 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -13,26 +13,24 @@ function toKebab(camel) {
 module.exports = function(Vue) {
   Vue.component('ob-menubar', menubar)
 
-  let $menu = null
+  let $menuManager = null
   const commandData = {}, menuData = {}
   const MenuManager = Vue.extend(manager)
 
-  Vue.prototype.$mousetrap = Mousetrap
-
-  Vue.prototype.registerCommands = function(commands) {
+  Vue.prototype.$registerCommands = function(commands) {
     commands.forEach((command) => {
       const key = command.key ? command.key : toKebab(command.method)
       commandData[key] = command
       if (!command.bind || command.bind.startsWith('!')) return
       Mousetrap.bind(command.bind, () => {
-        if (!$menu) return
-        $menu.executeCommand(command)
+        if (!$menuManager) return
+        $menuManager.executeCommand(command)
         return false
       })
     })
   }
 
-  Vue.prototype.registerMenus = function(menus, parentNode) {
+  Vue.prototype.$registerMenus = function(menus, parentNode) {
     menus.forEach(function walk(menu) {
       if (menu.ref) {
         menuData[menu.ref] = menu
@@ -44,31 +42,22 @@ module.exports = function(Vue) {
         menu.children.forEach(walk)
       }
     })
-    const menuKeys = Object.keys(menuData)
     const element = document.createElement('div')
     
-    $menu = new MenuManager({
-      propsData: { menuData, menuKeys },
-      provide() {
-        return {
-          commands: commandData,
-          $menu: this,
-        }
-      },
-    })
-
-    $menu.$context = this
-    Vue.prototype.$menu = $menu
+    $menuManager = new MenuManager({ propsData: { menuData } })
+    $menuManager.$context = this
+    $menuManager._commands = commandData
+    Vue.prototype.$menuManager = $menuManager
 
     function mountMenu() {
-      $menu.$mount((parentNode || this.$el).appendChild(element))
+      $menuManager.$mount((parentNode || this.$el).appendChild(element))
 
       this.$el.addEventListener('click', () => {
-        $menu.hideContextMenus()
+        $menuManager.hideContextMenus()
       })
   
       this.$el.addEventListener('contextmenu', () => {
-        $menu.hideContextMenus()
+        $menuManager.hideContextMenus()
       })
     }
 
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index cd6fdf3..f45af76 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -1,7 +1,7 @@
 <script>
 
 module.exports = {
-  props: ['menuData', 'menuKeys'],
+  props: ['menuData'],
 
   components: {
     MenuView: require('./menu-view.vue'),
@@ -11,12 +11,14 @@ module.exports = {
     loaded: false,
   }),
 
+  computed: {
+    refs() {
+      return this.$refs.map(ref => ref instanceof Array ? ref[0] : ref)
+    },
+  },
+
   mounted() {
     this.loaded = true
-    this.menuReference = {}
-    this.menuKeys.forEach((key, index) => {
-      this.menuReference[key] = this.$el.children[index]
-    })
   },
 
   methods: {
@@ -53,7 +55,7 @@ module.exports = {
       }
     },
     showContextMenu(key, event) {
-      const style = this.menuReference[key].style
+      const style = this.$refs[key][0].$el.style
       this.hideContextMenus()
       this.locateMenuAtClient(event, style)
       this.menuData[key].show = true
@@ -73,7 +75,7 @@ module.exports = {
       }
     },
     showButtonMenu(key, event) {
-      const style = this.menuReference[key].style
+      const style = this.$refs[key][0].$el.style
       const rect = event.currentTarget.getBoundingClientRect()
       this.hideContextMenus()
       this.locateAtTopBottom(rect, style)
@@ -104,8 +106,8 @@ module.exports = {
 
 <template>
   <div class="marklet-menu-manager">
-    <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <menu-view class="marklet-menu" v-show="menuData[key].show" :data="menuData[key]"/>
+    <transition name="marklet-menu" v-for="(menu, key) in menuData" :key="key">
+      <menu-view class="marklet-menu" v-show="menu.show" :data="menu" :ref="key"/>
     </transition>
   </div>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 93921d4..7765282 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -1,7 +1,6 @@
 <script>
 
 module.exports = {
-  inject: ['$menu'],
   props: {
     command: {
       type: Object,
@@ -24,7 +23,7 @@ module.exports = {
   computed: {
     disabled() {
       if (!this.command.enabled) return
-      return !this.$menu.parseArgument(this.command.enabled)
+      return !this.$menuManager.parseArgument(this.command.enabled)
     },
     keybinding() {
       let binding = this.binding || this.command.bind
@@ -41,7 +40,7 @@ module.exports = {
       if (this.disabled) {
         event.stopPropagation()
       } else {
-        this.$menu.executeCommand(this.command)
+        this.$menuManager.executeCommand(this.command)
       }
     }
   },
@@ -53,7 +52,7 @@ module.exports = {
   <div :class="['menu-item', { disabled }]" @click="handleClick">
     <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
-        :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
+        :value="$menuManager.parseArgument(command.checked)" @change="handleClick"/>
       {{ caption || command.name }}
       <template v-if="mnemonic"> ({{ mnemonic }})</template>
       <template v-if="command.ellipsis"> ...</template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 47508cb..0a598a9 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -2,7 +2,6 @@
 
 module.exports = {
   name: 'menu-view',
-  inject: ['commands', '$menu'],
   props: ['data'],
   components: {
     MenuItem: require('./menu-item.vue'),
@@ -27,22 +26,22 @@ module.exports = {
         this.enterMenuItem()
       } else if (!item.disabled && !item.children) {
         if (item.command) {
-          this.$menu.executeCommand(item.command)
+          this.$menuManager.executeCommand(item.command)
         }
       }
     },
     enterMenuItem(key, index) {
-      const style = this.$menu.menuReference[key].style
+      const style = this.$menuManager.$refs[key][0].$el.style
       const rect = this.$el.children[index].getBoundingClientRect()
-      this.$menu.locateAtLeftRight(rect, style)
-      this.$menu.menuData[key].show = true
+      this.$menuManager.locateAtLeftRight(rect, style)
+      this.$menuManager.menuData[key].show = true
     },
     leaveMenuItem(key, event) {
       const x = event.clientX
       const y = event.clientY
       const rect = this.$el.getBoundingClientRect()
       if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
-        this.$menu.menuData[key].show = false
+        this.$menuManager.menuData[key].show = false
       }
     },
   },
@@ -64,11 +63,11 @@ module.exports = {
       <menu-view :key="index" v-else-if="item.children"
         v-show="data.current === index" :data="item"/>
       <menu-item :key="index" v-else-if="item.command"
-        :command="commands[item.command]" :mnemonic="item.mnemonic"/>
+        :command="$menuManager._commands[item.command]" :mnemonic="item.mnemonic"/>
       <transition-group :key="index" v-else name="ob-menu-list">
-        <menu-item v-for="(sub, index) in $menu.parseArgument(item.data)" :key="index"
-          :class="{ active: sub.key === $menu.parseArgument(item.current) }"
-          @click.native="$menu.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
+        <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data)" :key="index"
+          :class="{ active: sub.key === $menuManager.parseArgument(item.current) }"
+          @click.native="$menuManager.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
       </transition-group>
     </template>
   </div>
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 2559ffa..ef7fa9d 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -14,22 +14,23 @@ module.exports = {
 
   computed: {
     data() {
-      return this.$menu.menuData[this.menu]
+      return this.$menuManager.menuData[this.menu]
     },
     element() {
-      return this.$menu.menuReference[this.menu]
+      return this.$menuManager.$refs[this.menu][0].$el
     },
   },
 
   mounted() {
-    this.$mousetrap.bind('alt', () => {
+    addEventListener('keydown', (event) => {
+      if (event.keyCode !== 18) return
       this.focused = !this.focused
       this.$el.focus()
+      event.preventDefault()
     })
 
     addEventListener('keypress', (event) => {
       if (!this.focused) return
-      console.log(event)
       const key = event.key.toUpperCase()
       const index = this.data.children.findIndex(menu => menu.mnemonic === key)
       if (index >= 0) {
@@ -55,8 +56,8 @@ module.exports = {
       this.focused = false
       const style = this.element.style
       const rect = this.$el.children[index].getBoundingClientRect()
-      this.$menu.hideContextMenus()
-      this.$menu.locateAtTopBottom(rect, style)
+      this.$menuManager.hideContextMenus()
+      this.$menuManager.locateAtTopBottom(rect, style)
       this.data.show = true
       this.data.focused = true
       this.data.current = index
@@ -68,7 +69,7 @@ module.exports = {
 
 <template>
   <div :class="['ob-menubar', { focused }]">
-    <template v-if="$menu.loaded">
+    <template v-if="$menuManager.loaded">
       <div v-for="(menu, index) in data.children" :key="index" class="item"
         @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
         :class="{ active: data.current === index }" @contextmenu.stop>

From 1a9c353ee4b3bda0fa1b0cea96c6752f3cfb90cc Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Thu, 25 Oct 2018 20:08:00 +0800
Subject: [PATCH 26/47] simple proj impl

---
 packages/dev-server/server/file.ts    |   1 -
 packages/dev-server/server/project.ts | 140 +++++++++++++++++++-------
 packages/dev-server/server/util.ts    |   4 +-
 3 files changed, 105 insertions(+), 40 deletions(-)

diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index 853715b..d14d8c1 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -6,7 +6,6 @@ type WatchEventType = 'rename' | 'change'
 
 export default class FileManager extends EventEmitter {
   private content: string
-  private dirty: boolean
   private watcher: FSWatcher
   private debouncedUpdate: () => void
   public msg: string
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 4382820..c4e6260 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,57 +1,65 @@
-import { dirname } from 'path'
+import { dirname, join } from 'path'
 import { EventEmitter } from 'events'
-import { readFileSync, watch, FSWatcher } from 'fs'
+import { readFileSync, watch, FSWatcher, readdirSync } from 'fs'
 import debounce from 'lodash.debounce'
 
 type WatchEventType = 'rename' | 'change'
 
-type FileTree = IterableIterator<string | Directory>
-interface Directory { name: string, children: FileTree }
+// type FileTree = IterableIterator<string | Directory>
+// interface Directory { name: string, children: FileTree }
 
-function* traverse(filepath: string): FileTree {
-  // FIXME: get all files in a directory
+interface FileTree {
+  [key: string]: string | FileTree
 }
 
-function* ProjectMessages(filepath: string): IterableIterator<string> {
-  const source = readFileSync(filepath).toString()
-  const options = JSON.parse(source) // FIXME: support for yaml
-  yield JSON.stringify({ type: 'project', data: options })
-  const basedir = options.basedir || dirname(filepath)
-  yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
-  // FIXME: add inner messages, for example file contents
-}
+// function* ProjectMessages(filepath: string): IterableIterator<string> {
+//   const source = readFileSync(filepath).toString()
+//   const options = JSON.parse(source) // FIXME: support for yaml
+//   yield JSON.stringify({ type: 'project', data: options })
+//   const basedir = options.basedir || dirname(filepath)
+//   yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
+//   // FIXME: add inner messages, for example file contents
+// }
 
 export default class ProjectManager extends EventEmitter {
-  private content: string
-  private dirty: boolean
   private watcher: FSWatcher
+  private tree: DirTree
   private debouncedUpdate: () => void
+  private deleteQueue: Set<string> = new Set()
+  private addQueue: Set<string> = new Set()
   public msg: string
 
   constructor(private filepath: string) {
     super()
-    this.update()
-    this.debouncedUpdate = debounce(() => this.update(), 200)
-    this.watcher = watch(this.filepath, (eventType: WatchEventType) => {
-      if (eventType === 'rename') {
-        this.dispose()
-      } else {
-        this.debouncedUpdate()
-      }
-    })
-  }
-
-  private update(): void {
-    const temp = readFileSync(this.filepath, 'utf8')
-    if (this.content !== temp) {
-      this.content = temp
-      this.msg = JSON.stringify({
-        type: 'document',
-        filepath: this.filepath,
-        data: this.content,
-      })
-      this.emit('update', this.msg)
+    this.tree = new DirTree(filepath)
+    this.watcher = watch(this.filepath, { recursive: true }, this.handleWatchEvent.bind(this))
+    this.debouncedUpdate = debounce(this.update.bind(this), 200)
+  }
+
+  private handleWatchEvent(eventType: WatchEventType, filename: string) {
+    if (eventType === 'rename' && this.tree.has(filename)) {
+      this.deleteQueue.add(filename)
+    } else {
+      this.addQueue.add(filename)
+    }
+    this.debouncedUpdate()
+  }
+
+  private update() {
+    for (const item of this.deleteQueue) {
+      this.tree.del(item)
+    }
+    this.deleteQueue.clear()
+    for (const item of this.addQueue) {
+      try {
+        this.tree.set(item, readFileSync(join(this.filepath, item), 'utf8'))        
+      } catch (_) {}
     }
+    this.addQueue.clear()
+    this.emit('update', this.msg = JSON.stringify({
+      type: 'project',
+      tree: this.tree.tree
+    }))
   }
 
   public dispose(): void {
@@ -59,3 +67,61 @@ export default class ProjectManager extends EventEmitter {
     this.emit('close')
   }
 }
+
+class DirTree {
+  static separator = /[\/\\]/
+  public tree: FileTree
+
+  constructor(private filepath: string) {
+    this.tree = this.init(filepath)
+  }
+
+  private init(filepath: string): FileTree {
+    const children = readdirSync(filepath, { withFileTypes: true }), subtree: FileTree = {}
+    for (const child of children) {
+      const newPath = join(filepath, child.name)
+      subtree[child.name] = child.isFile() ? readFileSync(newPath, 'utf8') : this.init(newPath)
+    }
+    return subtree
+  }
+
+  public get(path: string) {
+    const segments = path.split(DirTree.separator)
+    let result = this.tree
+    for (const segment of segments) {
+      result = <FileTree>result[segment]
+    }
+    return result
+  }
+
+  public set(path: string, value: string | FileTree) {
+    const segments = path.split(DirTree.separator)
+    const last = segments.pop()
+    let tree = this.tree
+    for (const segment of segments) {
+      tree = <FileTree>(tree[segment] = tree[segment] || {})
+    }
+    tree[last] = value
+  }
+
+  public has(path: string) {
+    const segments = path.split(DirTree.separator)
+    let result = this.tree
+    for (const segment of segments) {
+      if (result = <FileTree>result[segment])
+        continue
+      return false
+    }
+    return true
+  }
+
+  public del(path: string) {
+    const segments = path.split(DirTree.separator)
+    const last = segments.pop()
+    let tree = this.tree
+    for (const segment of segments) {
+      tree = <FileTree>tree[segment]
+    }
+    delete tree[last]
+  }
+}
diff --git a/packages/dev-server/server/util.ts b/packages/dev-server/server/util.ts
index 4eeab42..3b9232a 100644
--- a/packages/dev-server/server/util.ts
+++ b/packages/dev-server/server/util.ts
@@ -1,13 +1,13 @@
 import { extname } from 'path'
 
 const mimeMap: Record<string, string> = {
-  '': 'application/octet-stream',
   '.css': 'text/css',
   '.js': 'text/javascript',
   '.html': 'text/html'
 }
+const fallbackMime = 'application/octet-stream'
 
 export function getContentType(filepath: string): string {
   const ext = extname(filepath)
-  return mimeMap[ext in mimeMap ? ext : '']
+  return mimeMap[ext] || fallbackMime
 }

From 56fe695e55b40abf97cc8749fc9be5c12e617eea Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Thu, 25 Oct 2018 23:20:55 +0800
Subject: [PATCH 27/47] refactor

---
 packages/dev-server/comp/app.vue            |   4 +-
 packages/dev-server/comp/menu/index.js      |  36 ++----
 packages/dev-server/comp/menu/manager.vue   |  96 +++-----------
 packages/dev-server/comp/menu/menu-view.vue | 131 +++++++++++++++-----
 packages/dev-server/comp/menu/menubar.vue   |  39 +++---
 packages/dev-server/comp/menu/util.js       |  40 ++++++
 packages/dev-server/comp/menus.json         |  11 +-
 packages/dev-server/themes/dark.scss        |   2 +-
 packages/dev-server/themes/simple.scss      |   2 +-
 9 files changed, 195 insertions(+), 166 deletions(-)
 create mode 100644 packages/dev-server/comp/menu/util.js

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index e2fb816..ff5126b 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -208,7 +208,7 @@ module.exports = {
       }
     },
     startDrag(position, event) {
-      this.$menuManager.hideContextMenus()
+      this.$menuManager.hideAllMenus()
       this.dragging = position
       this.$refs[position].classList.add('active')
       this.draggingLastX = event.clientX
@@ -220,7 +220,7 @@ module.exports = {
 
 <template>
   <div :class="[theme, { dragging }]" class="marklet">
-    <ob-menubar class="menubar" menu="menubar"/>
+    <ob-menubar class="menubar" from="menubar"/>
     <div class="view explorer" :style="explorerStyle"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
       @mousedown.stop="startDrag('left', $event)"/>
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 67b1da9..643964b 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -14,7 +14,7 @@ module.exports = function(Vue) {
   Vue.component('ob-menubar', menubar)
 
   let $menuManager = null
-  const commandData = {}, menuData = {}
+  const commandData = {}
   const MenuManager = Vue.extend(manager)
 
   Vue.prototype.$registerCommands = function(commands) {
@@ -30,41 +30,25 @@ module.exports = function(Vue) {
     })
   }
 
-  Vue.prototype.$registerMenus = function(menus, parentNode) {
-    menus.forEach(function walk(menu) {
-      if (menu.ref) {
-        menuData[menu.ref] = menu
-        menuData[menu.ref].show = false
-        menuData[menu.ref].focused = false
-        menuData[menu.ref].current = null
-      }
-      if (menu.children) {
-        menu.children.forEach(walk)
-      }
-    })
+  Vue.prototype.$registerMenus = function(menu) {
     const element = document.createElement('div')
     
-    $menuManager = new MenuManager({ propsData: { menuData } })
+    $menuManager = new MenuManager({ propsData: { menu } })
     $menuManager.$context = this
-    $menuManager._commands = commandData
+    $menuManager.commands = commandData
     Vue.prototype.$menuManager = $menuManager
 
-    function mountMenu() {
-      $menuManager.$mount((parentNode || this.$el).appendChild(element))
+    function mountMenuManager() {
+      $menuManager.$mount(this.$el.appendChild(element))
 
-      this.$el.addEventListener('click', () => {
-        $menuManager.hideContextMenus()
-      })
-  
-      this.$el.addEventListener('contextmenu', () => {
-        $menuManager.hideContextMenus()
-      })
+      this.$el.addEventListener('click', () => $menuManager.hideAllMenus())
+      this.$el.addEventListener('contextmenu', () => $menuManager.hideAllMenus())
     }
 
     if (this._isMounted) {
-      mountMenu()
+      mountMenuManager()
     } else {
-      this.$options.mounted.push(mountMenu)
+      this.$options.mounted.push(mountMenuManager)
     }
   }
 }
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index f45af76..fe16fa3 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -1,11 +1,12 @@
 <script>
 
+const util = require('./util')
+const menuView = require('./menu-view.vue')
+
 module.exports = {
-  props: ['menuData'],
+  components: { menuView },
 
-  components: {
-    MenuView: require('./menu-view.vue'),
-  },
+  props: ['menu'],
 
   data: () => ({
     loaded: false,
@@ -13,7 +14,13 @@ module.exports = {
 
   computed: {
     refs() {
-      return this.$refs.map(ref => ref instanceof Array ? ref[0] : ref)
+      const result = {}
+      this.menu.forEach((item, index) => {
+        if (item.ref) {
+          result[item.ref] = this.$refs.main.$refs[index][0]
+        }
+      })
+      return result
     },
   },
 
@@ -48,7 +55,7 @@ module.exports = {
         return arg
       }
     },
-    hideContextMenus() {
+    hideAllMenus() {
       for (const key in this.menuData) {
         this.menuData[key].show = false
         this.menuData[key].current = null
@@ -56,96 +63,33 @@ module.exports = {
     },
     showContextMenu(key, event) {
       const style = this.$refs[key][0].$el.style
-      this.hideContextMenus()
-      this.locateMenuAtClient(event, style)
+      this.hideAllMenus()
+      util.locateAtMouseEvent(event, style)
       this.menuData[key].show = true
     },
-    locateMenuAtClient(event, style) {
-      if (event.clientX + 200 > innerWidth) {
-        style.left = event.clientX - 200 - this.left + 'px'
-      } else {
-        style.left = event.clientX - this.left + 'px'
-      }
-      if (event.clientY - this.top > this.height / 2) {
-        style.top = ''
-        style.bottom = this.top + this.height - event.clientY + 'px'
-      } else {
-        style.top = event.clientY - this.top + 'px'
-        style.bottom = ''
-      }
-    },
     showButtonMenu(key, event) {
       const style = this.$refs[key][0].$el.style
       const rect = event.currentTarget.getBoundingClientRect()
-      this.hideContextMenus()
-      this.locateAtTopBottom(rect, style)
+      this.hideAllMenus()
+      util.locateAtTopBottom(rect, style)
       this.menuData[key].show = true
     },
-    locateAtTopBottom(rect, style) {
-      if (rect.left + 200 > innerWidth) {
-        style.left = rect.left + rect.width - 200 + 'px'
-      } else {
-        style.left = rect.left + 'px'
-      }
-      style.top = rect.top + rect.height + 'px'
-    },
-    locateAtLeftRight(rect, style) {
-      if (rect.right + 200 > innerWidth) {
-        style.left = null
-        style.right = rect.left + 'px'
-      } else {
-        style.right = null
-        style.left = rect.right + 'px'
-      }
-      style.top = rect.top + 'px'
-    },
   }
 }
 
 </script>
 
 <template>
-  <div class="marklet-menu-manager">
-    <transition name="marklet-menu" v-for="(menu, key) in menuData" :key="key">
-      <menu-view class="marklet-menu" v-show="menu.show" :data="menu" :ref="key"/>
-    </transition>
-  </div>
+  <menu-view ref="main" :menu="menu"/>
 </template>
 
 <style lang="scss" scoped>
 
 & {
-  width: 0;
-  height: 0;
   top: 0;
   left: 0;
-}
-
-.marklet-menu {
-  z-index: 10;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: none;
-  padding: 2px 0;
-  position: absolute;
-  transition: 0.3s ease;
-}
-
-.marklet-menu-enter-active,
-.marklet-menu-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transform-origin: center top;
-  transition:
-    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.marklet-menu-enter,
-.marklet-menu-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
+  width: 0;
+  height: 0;
 }
 
 </style>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 0a598a9..7ebba64 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -1,17 +1,39 @@
 <script>
 
+const util = require('./util')
+const menuItem = require('./menu-item.vue')
+
 module.exports = {
   name: 'menu-view',
-  props: ['data'],
-  components: {
-    MenuItem: require('./menu-item.vue'),
+
+  components: { menuItem },
+
+  props: {
+    menu: Object,
+  },
+
+  data: () => ({
+    active: false,
+    current: null,
+    focused: false,
+  }),
+
+  watch: {
+    show(value) {
+      this.focused = value
+    },
+    current(value) {
+      if (value !== null) {
+        this.$refs[value].active = true
+      }
+    },
   },
 
   mounted() {
     addEventListener('keypress', (event) => {
-      if (!!this.data.show || !this.data.focused) return
+      if (!this.show) return
       const key = event.key.toUpperCase()
-      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      const index = this.menu.findIndex(menu => menu.mnemonic === key)
       if (index >= 0) {
         this.toggleMenuItem(index)
       }
@@ -20,7 +42,7 @@ module.exports = {
 
   methods: {
     toggleMenuItem(index) {
-      const item = this.data.children[index]
+      const item = this.menu[index]
       if (typeof item !== 'object') return
       if (item.ref) {
         this.enterMenuItem()
@@ -30,18 +52,18 @@ module.exports = {
         }
       }
     },
-    enterMenuItem(key, index) {
-      const style = this.$menuManager.$refs[key][0].$el.style
-      const rect = this.$el.children[index].getBoundingClientRect()
-      this.$menuManager.locateAtLeftRight(rect, style)
-      this.$menuManager.menuData[key].show = true
+    enterMenuItem(index) {
+      const style = this.$refs[index][0].$el.style
+      const button = this.$refs.body.children[index]
+      util.locateAtLeftRight(style, button)
+      this.$refs[index][0].active = true
     },
-    leaveMenuItem(key, event) {
+    leaveMenuItem(index, event) {
       const x = event.clientX
       const y = event.clientY
       const rect = this.$el.getBoundingClientRect()
       if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
-        this.$menuManager.menuData[key].show = false
+        this.$refs[index][0].active = false
       }
     },
   },
@@ -50,34 +72,60 @@ module.exports = {
 </script>
 
 <template>
-  <div :class="{ focused: data.focused }">
-    <template v-for="(item, index) in data.children">
-      <div :key="index" v-if="item === '@separator'" class="menu-item disabled" @click.stop>
-        <div class="separator"/>
-      </div>
-      <menu-item :key="index" v-else-if="item.ref"
-        @click.native.stop binding=">"
-        :caption="item.caption" :mnemonic="item.mnemonic"
-        @mouseenter.native="enterMenuItem(item.ref, index)"
-        @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
-      <menu-view :key="index" v-else-if="item.children"
-        v-show="data.current === index" :data="item"/>
-      <menu-item :key="index" v-else-if="item.command"
-        :command="$menuManager._commands[item.command]" :mnemonic="item.mnemonic"/>
-      <transition-group :key="index" v-else name="ob-menu-list">
-        <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data)" :key="index"
-          :class="{ active: sub.key === $menuManager.parseArgument(item.current) }"
-          @click.native="$menuManager.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
-      </transition-group>
-    </template>
+  <!-- eslint-disable -->
+  <div class="marklet-menu" :class="{ active }">
+    <span ref="body" v-show="active && current === null || $parent.active">
+      <template v-for="(item, index) in menu">
+        <!-- submenu -->
+        <menu-item :key="index" v-if="item.children"
+          @click.native.stop binding=">"
+          :caption="item.caption" :mnemonic="item.mnemonic"
+          @mouseenter.native="enterMenuItem(index, $event)"
+          @mouseleave.native="leaveMenuItem(index, $event)"/>
+
+        <!-- command -->
+        <menu-item :key="index" v-else-if="item.command"
+          :command="$menuManager.commands[item.command]" :mnemonic="item.mnemonic"/>
+        
+        <!-- list -->
+        <transition-group :key="index" v-else-if="item.switch" name="ob-menu-list">
+          <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data)" :key="index"
+            :class="{ active: sub.key === $menuManager.parseArgument(item.current) }"
+            @click.native="$menuManager.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
+        </transition-group>
+
+        <!-- caption -->
+        <div :key="index" v-else class="menu-item disabled" @click.stop>
+          <div v-if="item.caption === '-'" class="separator"/>
+          <div v-else class="caption">{{ item.caption }}</div>
+        </div>
+      </template>
+    </span>
+
+    <!-- children -->
+    <menu-view v-for="(item, index) in menu" v-if="item.children" :key="index"
+      :menu="item.children" :ref="index" v-show="!active || current === index"/>
   </div>
 </template>
 
 <style lang="scss" scoped>
 
 & {
+  position: relative;
+}
+
+&.active {
+  z-index: 10;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: none;
+  padding: 2px 0;
   min-width: 200px;
   user-select: none;
+  width: max-content;
+  position: absolute;
+  transition: 0.3s ease;
 }
 
 .menu-item {
@@ -123,5 +171,20 @@ module.exports = {
   }
 }
 
-</style>
+.ob-menu-enter-active,
+.ob-menu-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+  transform-origin: center top;
+  transition:
+    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+}
 
+.ob-menu-enter,
+.ob-menu-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+</style>
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index ef7fa9d..594be16 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -1,23 +1,23 @@
 <script>
 
+const util = require('./util')
+
 module.exports = {
   props: {
-    menu: {
+    from: {
       type: String,
       default: 'menubar',
     }
   },
 
   data: () => ({
+    current: null,
     focused: false,
   }),
 
   computed: {
-    data() {
-      return this.$menuManager.menuData[this.menu]
-    },
-    element() {
-      return this.$menuManager.$refs[this.menu][0].$el
+    children() {
+      return this.$menuManager.menu.find(item => item.ref === this.from).children
     },
   },
 
@@ -32,7 +32,7 @@ module.exports = {
     addEventListener('keypress', (event) => {
       if (!this.focused) return
       const key = event.key.toUpperCase()
-      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      const index = this.children.findIndex(menu => menu.mnemonic === key)
       if (index >= 0) {
         this.toggleMenu(index)
       }
@@ -41,26 +41,25 @@ module.exports = {
 
   methods: {
     hoverMenu(index) {
-      const current = this.data.current
+      const current = this.current
       if (current !== null && current !== index) {
         this.toggleMenu(index)
       }
     },
     toggleMenu(index) {
-      const last = this.data.current
-      if (last === index) {
-        this.data.show = false
-        this.data.current = null
+      if (this.current === index) {
+        this.current = null
         return
       }
       this.focused = false
-      const style = this.element.style
+      const source = this.$menuManager.refs[this.from]
+      const style = source.$el.style
       const rect = this.$el.children[index].getBoundingClientRect()
-      this.$menuManager.hideContextMenus()
-      this.$menuManager.locateAtTopBottom(rect, style)
-      this.data.show = true
-      this.data.focused = true
-      this.data.current = index
+      this.$menuManager.hideAllMenus()
+      util.locateAtTopBottom(rect, style)
+      source.active = true
+      source.current = index
+      this.current = index
     },
   }
 }
@@ -70,9 +69,9 @@ module.exports = {
 <template>
   <div :class="['ob-menubar', { focused }]">
     <template v-if="$menuManager.loaded">
-      <div v-for="(menu, index) in data.children" :key="index" class="item"
+      <div v-for="(menu, index) in children" :key="index" class="item"
         @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
-        :class="{ active: data.current === index }" @contextmenu.stop>
+        :class="{ active: current === index }" @contextmenu.stop>
         {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
       </div>
     </template>
diff --git a/packages/dev-server/comp/menu/util.js b/packages/dev-server/comp/menu/util.js
new file mode 100644
index 0000000..524efc9
--- /dev/null
+++ b/packages/dev-server/comp/menu/util.js
@@ -0,0 +1,40 @@
+function locateAtTopBottom(rect, style) {
+  if (rect.left + 200 > innerWidth) {
+    style.left = rect.left + rect.width - 200 + 'px'
+  } else {
+    style.left = rect.left + 'px'
+  }
+  style.top = rect.top + rect.height + 'px'
+}
+
+function locateAtLeftRight(style, ref) {
+  if (ref.offsetRight + 200 > innerWidth) {
+    style.left = null
+    style.right = ref.offsetLeft + 'px'
+  } else {
+    style.right = null
+    style.left = ref.offsetLeft + ref.offsetWidth + 'px'
+  }
+  style.top = ref.offsetTop + 'px'
+}
+
+function locateAtMouseEvent(event, style) {
+  if (event.clientX + 200 > innerWidth) {
+    style.left = event.clientX - 200 + 'px'
+  } else {
+    style.left = event.clientX + 'px'
+  }
+  if (event.clientY > innerHeight / 2) {
+    style.top = ''
+    style.bottom = innerHeight - event.clientY + 'px'
+  } else {
+    style.top = event.clientY + 'px'
+    style.bottom = ''
+  }
+}
+
+module.exports = {
+  locateAtLeftRight,
+  locateAtTopBottom,
+  locateAtMouseEvent,
+}
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menus.json
index 8d44081..e70f9b3 100644
--- a/packages/dev-server/comp/menus.json
+++ b/packages/dev-server/comp/menus.json
@@ -6,7 +6,7 @@
       "mnemonic": "F",
       "children": [
         { "command": "open-file", "mnemonic": "O" },
-        "@separator",
+        { "caption": "-" },
         { "command": "save", "mnemonic": "S" },
         { "command": "save-as", "mnemonic": "A" },
         { "command": "save-all", "mnemonic": "L" }
@@ -18,11 +18,11 @@
       "children": [
         { "command": "undo", "mnemonic": "U" },
         { "command": "redo", "mnemonic": "R" },
-        "@separator",
+        { "caption": "-" },
         { "command": "cut", "mnemonic": "T" },
         { "command": "copy", "mnemonic": "C" },
         { "command": "paste", "mnemonic": "P" },
-        "@separator",
+        { "caption": "-" },
         { "command": "find", "mnemonic": "F" },
         { "command": "find-next" },
         { "command": "find-previous" }
@@ -35,11 +35,10 @@
         { "command": "trigger-explorer", "mnemonic": "R" },
         { "command": "trigger-editor", "mnemonic": "E" },
         { "command": "trigger-document", "mnemonic": "D" },
-        "@separator",
+        { "caption": "-" },
         { "command": "command-palette", "mnemonic": "C" },
-        "@separator",
+        { "caption": "-" },
         {
-          "ref": "themes",
           "caption": "主题",
           "mnemonic": "T",
           "children": [
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 8e25583..83e919c 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -24,7 +24,7 @@ $active-color: #acdeff;
   &:hover, &.active { background-color: #999999 }
 }
 
-.marklet-menu {
+.marklet-menu.active {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 99fec64..591e14b 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -24,7 +24,7 @@ $active-color: #409eff;
   &:hover, &.active { background-color: #aaaaaa }
 }
 
-.marklet-menu {
+.marklet-menu > .menu-body {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 

From c5a75411b2d5f89768427408b1d3ac78dfc8790d Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 26 Oct 2018 00:02:27 +0800
Subject: [PATCH 28/47] add some adjustments

---
 packages/dev-server/comp/menu/index.js      | 12 +++++--
 packages/dev-server/comp/menu/manager.vue   | 40 ++++++++++++---------
 packages/dev-server/comp/menu/menu-item.vue |  7 ++--
 packages/dev-server/comp/menu/menu-view.vue | 24 +++++++++----
 packages/dev-server/comp/menu/menubar.vue   | 23 ++++++------
 packages/dev-server/themes/simple.scss      |  2 +-
 6 files changed, 69 insertions(+), 39 deletions(-)

diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index 643964b..ef5a5f7 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -19,6 +19,7 @@ module.exports = function(Vue) {
 
   Vue.prototype.$registerCommands = function(commands) {
     commands.forEach((command) => {
+      command.context = this
       const key = command.key ? command.key : toKebab(command.method)
       commandData[key] = command
       if (!command.bind || command.bind.startsWith('!')) return
@@ -30,11 +31,10 @@ module.exports = function(Vue) {
     })
   }
 
-  Vue.prototype.$registerMenus = function(menu) {
+  Vue.prototype.$initializeMenu = function() {
     const element = document.createElement('div')
     
-    $menuManager = new MenuManager({ propsData: { menu } })
-    $menuManager.$context = this
+    $menuManager = new MenuManager()
     $menuManager.commands = commandData
     Vue.prototype.$menuManager = $menuManager
 
@@ -51,4 +51,10 @@ module.exports = function(Vue) {
       this.$options.mounted.push(mountMenuManager)
     }
   }
+
+  Vue.prototype.$registerMenus = function(menu) {
+    if (!$menuManager) this.$initializeMenu()
+
+    $menuManager.register(this, menu)
+  }
 }
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index fe16fa3..ddc4c1c 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -6,9 +6,8 @@ const menuView = require('./menu-view.vue')
 module.exports = {
   components: { menuView },
 
-  props: ['menu'],
-
   data: () => ({
+    menu: [],
     loaded: false,
   }),
 
@@ -17,7 +16,7 @@ module.exports = {
       const result = {}
       this.menu.forEach((item, index) => {
         if (item.ref) {
-          result[item.ref] = this.$refs.main.$refs[index][0]
+          result[item.ref] = this.$refs.menus[index]
         }
       })
       return result
@@ -29,13 +28,17 @@ module.exports = {
   },
 
   methods: {
-    executeMethod(key, ...args) {
-      const method = this.$context[key]
+    register(context, menu) {
+      menu.forEach(item => item.context = context)
+      this.menu.push(...menu)
+    },
+    executeMethod(context, key, ...args) {
+      const method = context[key]
       if (method instanceof Function) method(...args)
     },
     executeCommand(command) {
       if (!command.method) return
-      const method = this.$context[command.method]
+      const method = command.context[command.method]
       if (!(method instanceof Function)) {
         console.error(`No method ${command.method} was found!`)
         return
@@ -43,36 +46,36 @@ module.exports = {
       let args = command.arguments
       if (args === undefined) args = []
       if (!(args instanceof Array)) args = [args]
-      method(...args.map(arg => this.parseArgument(arg)))
+      method(...args.map(arg => this.parseArgument(arg, command.context)))
     },
-    parseArgument(arg) {
+    parseArgument(arg, ctx) {
       if (typeof arg !== 'string') return arg
       if (arg.startsWith('!$')) {
-        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], this.$context)
+        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], ctx)
       } else if (arg.startsWith('$')) {
-        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], this.$context)
+        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], ctx)
       } else {
         return arg
       }
     },
     hideAllMenus() {
-      for (const key in this.menuData) {
-        this.menuData[key].show = false
-        this.menuData[key].current = null
-      }
+      this.$refs.menus.forEach(menu => menu.traverse((menu) => {
+        menu.active = false
+        menu.current = null
+      }))
     },
     showContextMenu(key, event) {
       const style = this.$refs[key][0].$el.style
       this.hideAllMenus()
       util.locateAtMouseEvent(event, style)
-      this.menuData[key].show = true
+      this.menuData[key].active = true
     },
     showButtonMenu(key, event) {
       const style = this.$refs[key][0].$el.style
       const rect = event.currentTarget.getBoundingClientRect()
       this.hideAllMenus()
       util.locateAtTopBottom(rect, style)
-      this.menuData[key].show = true
+      this.menuData[key].active = true
     },
   }
 }
@@ -80,7 +83,10 @@ module.exports = {
 </script>
 
 <template>
-  <menu-view ref="main" :menu="menu"/>
+  <div class="marklet-menu">
+    <menu-view v-for="(item, index) in menu" :key="index"
+      :menu="item.children" :context="item.context" ref="menus"/>
+  </div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 7765282..cc9c9b2 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -18,12 +18,15 @@ module.exports = {
       type: String,
       default: '',
     },
+    context: {
+      type: Object
+    },
   },
 
   computed: {
     disabled() {
       if (!this.command.enabled) return
-      return !this.$menuManager.parseArgument(this.command.enabled)
+      return !this.$menuManager.parseArgument(this.command.enabled, this.context)
     },
     keybinding() {
       let binding = this.binding || this.command.bind
@@ -52,7 +55,7 @@ module.exports = {
   <div :class="['menu-item', { disabled }]" @click="handleClick">
     <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
-        :value="$menuManager.parseArgument(command.checked)" @change="handleClick"/>
+        :value="$menuManager.parseArgument(command.checked, context)" @change="handleClick"/>
       {{ caption || command.name }}
       <template v-if="mnemonic"> ({{ mnemonic }})</template>
       <template v-if="command.ellipsis"> ...</template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 7ebba64..8d067a8 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -10,6 +10,7 @@ module.exports = {
 
   props: {
     menu: Object,
+    context: Object,
   },
 
   data: () => ({
@@ -66,6 +67,16 @@ module.exports = {
         this.$refs[index][0].active = false
       }
     },
+    traverse(callback) {
+      callback(this)
+      this.menu.forEach((item, index) => {
+        if (item.children) {
+          const submenu = this.$refs[index][0]
+          callback(submenu)
+          submenu.traverse(callback)
+        }
+      })
+    },
   },
 }
 
@@ -78,20 +89,21 @@ module.exports = {
       <template v-for="(item, index) in menu">
         <!-- submenu -->
         <menu-item :key="index" v-if="item.children"
-          @click.native.stop binding=">"
+          @click.native.stop binding=">" :context="context"
           :caption="item.caption" :mnemonic="item.mnemonic"
           @mouseenter.native="enterMenuItem(index, $event)"
           @mouseleave.native="leaveMenuItem(index, $event)"/>
 
         <!-- command -->
-        <menu-item :key="index" v-else-if="item.command"
+        <menu-item :key="index" v-else-if="item.command" :context="context"
           :command="$menuManager.commands[item.command]" :mnemonic="item.mnemonic"/>
         
         <!-- list -->
         <transition-group :key="index" v-else-if="item.switch" name="ob-menu-list">
-          <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data)" :key="index"
-            :class="{ active: sub.key === $menuManager.parseArgument(item.current) }"
-            @click.native="$menuManager.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
+          <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data, context)"
+            :key="index" :context="context" :caption="sub.name"
+            :class="{ active: sub.key === $menuManager.parseArgument(item.current, context) }"
+            @click.native="$menuManager.executeMethod(context, item.switch, sub.key)"/>
         </transition-group>
 
         <!-- caption -->
@@ -104,7 +116,7 @@ module.exports = {
 
     <!-- children -->
     <menu-view v-for="(item, index) in menu" v-if="item.children" :key="index"
-      :menu="item.children" :ref="index" v-show="!active || current === index"/>
+      :menu="item.children" :ref="index" v-show="!active || current === index" :context="context"/>
   </div>
 </template>
 
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 594be16..07e9fac 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -11,7 +11,6 @@ module.exports = {
   },
 
   data: () => ({
-    current: null,
     focused: false,
   }),
 
@@ -19,6 +18,9 @@ module.exports = {
     children() {
       return this.$menuManager.menu.find(item => item.ref === this.from).children
     },
+    source() {
+      return this.$menuManager.refs[this.from]
+    },
   },
 
   mounted() {
@@ -41,25 +43,26 @@ module.exports = {
 
   methods: {
     hoverMenu(index) {
-      const current = this.current
+      const current = this.source.current
       if (current !== null && current !== index) {
         this.toggleMenu(index)
       }
     },
     toggleMenu(index) {
-      if (this.current === index) {
-        this.current = null
+      if (this.source.current === index) {
+        this.source.active = false
+        this.source.current = null
         return
       }
       this.focused = false
-      const source = this.$menuManager.refs[this.from]
-      const style = source.$el.style
+      const style = this.source.$el.style
       const rect = this.$el.children[index].getBoundingClientRect()
       this.$menuManager.hideAllMenus()
       util.locateAtTopBottom(rect, style)
-      source.active = true
-      source.current = index
-      this.current = index
+      this.source.current = index
+      if (!this.source.active) {
+        this.$nextTick(() => this.source.active = true)
+      }
     },
   }
 }
@@ -71,7 +74,7 @@ module.exports = {
     <template v-if="$menuManager.loaded">
       <div v-for="(menu, index) in children" :key="index" class="item"
         @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
-        :class="{ active: current === index }" @contextmenu.stop>
+        :class="{ active: source.current === index }" @contextmenu.stop>
         {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
       </div>
     </template>
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 591e14b..5721cc6 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -24,7 +24,7 @@ $active-color: #409eff;
   &:hover, &.active { background-color: #aaaaaa }
 }
 
-.marklet-menu > .menu-body {
+.marklet-menu.active {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 

From 1ab4e0b0e267bb9e551a30affcf8169365df79b8 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 26 Oct 2018 00:29:43 +0800
Subject: [PATCH 29/47] Merge branch 'menu' into dev

---
 packages/dev-server/comp/app.vue            |  8 +--
 packages/dev-server/comp/menu/index.js      | 35 +++++-------
 packages/dev-server/comp/menu/manager.vue   | 35 +++++++-----
 packages/dev-server/comp/menu/menu-item.vue |  7 +--
 packages/dev-server/comp/menu/menu-view.vue | 52 +++++++++++++-----
 packages/dev-server/comp/menu/menubar.vue   | 61 ++++++++++++++++-----
 packages/dev-server/server/project.ts       | 14 +----
 7 files changed, 124 insertions(+), 88 deletions(-)

diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index ea2f00b..e2fb816 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -129,12 +129,10 @@ module.exports = {
     this.$set(this.display.editor, 'show', this._enableEdit)
     this.$set(this.display.explorer, 'show', this._isProject)
 
-    this.registerCommands(require('./command'))
-    this.registerMenus(require('./menus'))
+    this.$registerCommands(require('./command'))
+    this.$registerMenus(require('./menus'))
   },
 
-  updated() {},
-
   mounted() {
     window.vm = this
 
@@ -210,7 +208,7 @@ module.exports = {
       }
     },
     startDrag(position, event) {
-      this.$menu.hideContextMenus()
+      this.$menuManager.hideContextMenus()
       this.dragging = position
       this.$refs[position].classList.add('active')
       this.draggingLastX = event.clientX
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index ad7be87..67b1da9 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -13,60 +13,51 @@ function toKebab(camel) {
 module.exports = function(Vue) {
   Vue.component('ob-menubar', menubar)
 
-  let $menu = null
+  let $menuManager = null
   const commandData = {}, menuData = {}
   const MenuManager = Vue.extend(manager)
 
-  Vue.prototype.registerCommands = function(commands) {
+  Vue.prototype.$registerCommands = function(commands) {
     commands.forEach((command) => {
       const key = command.key ? command.key : toKebab(command.method)
       commandData[key] = command
       if (!command.bind || command.bind.startsWith('!')) return
       Mousetrap.bind(command.bind, () => {
-        if (!$menu) return
-        $menu.executeCommand(command)
+        if (!$menuManager) return
+        $menuManager.executeCommand(command)
         return false
       })
     })
   }
 
-  Vue.prototype.registerMenus = function(menus, parentNode) {
+  Vue.prototype.$registerMenus = function(menus, parentNode) {
     menus.forEach(function walk(menu) {
       if (menu.ref) {
         menuData[menu.ref] = menu
         menuData[menu.ref].show = false
+        menuData[menu.ref].focused = false
         menuData[menu.ref].current = null
       }
       if (menu.children) {
         menu.children.forEach(walk)
       }
     })
-    const menuKeys = Object.keys(menuData)
     const element = document.createElement('div')
-
     
-    $menu = new MenuManager({
-      propsData: { menuData, menuKeys },
-      provide() {
-        return {
-          commands: commandData,
-          $menu: this,
-        }
-      },
-    })
-
-    $menu.$context = this
-    Vue.prototype.$menu = $menu
+    $menuManager = new MenuManager({ propsData: { menuData } })
+    $menuManager.$context = this
+    $menuManager._commands = commandData
+    Vue.prototype.$menuManager = $menuManager
 
     function mountMenu() {
-      $menu.$mount((parentNode || this.$el).appendChild(element))
+      $menuManager.$mount((parentNode || this.$el).appendChild(element))
 
       this.$el.addEventListener('click', () => {
-        $menu.hideContextMenus()
+        $menuManager.hideContextMenus()
       })
   
       this.$el.addEventListener('contextmenu', () => {
-        $menu.hideContextMenus()
+        $menuManager.hideContextMenus()
       })
     }
 
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 3936ff4..f45af76 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -1,17 +1,24 @@
 <script>
 
 module.exports = {
-  props: ['menuData', 'menuKeys'],
+  props: ['menuData'],
 
   components: {
     MenuView: require('./menu-view.vue'),
   },
 
+  data: () => ({
+    loaded: false,
+  }),
+
+  computed: {
+    refs() {
+      return this.$refs.map(ref => ref instanceof Array ? ref[0] : ref)
+    },
+  },
+
   mounted() {
-    this.menuReference = {}
-    this.menuKeys.forEach((key, index) => {
-      this.menuReference[key] = this.$el.children[index]
-    })
+    this.loaded = true
   },
 
   methods: {
@@ -48,7 +55,7 @@ module.exports = {
       }
     },
     showContextMenu(key, event) {
-      const style = this.menuReference[key].style
+      const style = this.$refs[key][0].$el.style
       this.hideContextMenus()
       this.locateMenuAtClient(event, style)
       this.menuData[key].show = true
@@ -68,13 +75,13 @@ module.exports = {
       }
     },
     showButtonMenu(key, event) {
-      const style = this.menuReference[key].style
+      const style = this.$refs[key][0].$el.style
+      const rect = event.currentTarget.getBoundingClientRect()
       this.hideContextMenus()
-      this.locateAtTopBottom(event, style)
+      this.locateAtTopBottom(rect, style)
       this.menuData[key].show = true
     },
-    locateAtTopBottom(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
+    locateAtTopBottom(rect, style) {
       if (rect.left + 200 > innerWidth) {
         style.left = rect.left + rect.width - 200 + 'px'
       } else {
@@ -82,8 +89,7 @@ module.exports = {
       }
       style.top = rect.top + rect.height + 'px'
     },
-    locateAtLeftRight(event, style) {
-      const rect = event.currentTarget.getBoundingClientRect()
+    locateAtLeftRight(rect, style) {
       if (rect.right + 200 > innerWidth) {
         style.left = null
         style.right = rect.left + 'px'
@@ -100,9 +106,8 @@ module.exports = {
 
 <template>
   <div class="marklet-menu-manager">
-    <transition name="marklet-menu" v-for="key in menuKeys" :key="key">
-      <menu-view class="marklet-menu" v-show="menuData[key].show"
-        :data="menuData[key].children" :current="menuData[key].current"/>
+    <transition name="marklet-menu" v-for="(menu, key) in menuData" :key="key">
+      <menu-view class="marklet-menu" v-show="menu.show" :data="menu" :ref="key"/>
     </transition>
   </div>
 </template>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index 93921d4..7765282 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -1,7 +1,6 @@
 <script>
 
 module.exports = {
-  inject: ['$menu'],
   props: {
     command: {
       type: Object,
@@ -24,7 +23,7 @@ module.exports = {
   computed: {
     disabled() {
       if (!this.command.enabled) return
-      return !this.$menu.parseArgument(this.command.enabled)
+      return !this.$menuManager.parseArgument(this.command.enabled)
     },
     keybinding() {
       let binding = this.binding || this.command.bind
@@ -41,7 +40,7 @@ module.exports = {
       if (this.disabled) {
         event.stopPropagation()
       } else {
-        this.$menu.executeCommand(this.command)
+        this.$menuManager.executeCommand(this.command)
       }
     }
   },
@@ -53,7 +52,7 @@ module.exports = {
   <div :class="['menu-item', { disabled }]" @click="handleClick">
     <span class="label">
       <mkl-checkbox v-if="command.checked !== undefined"
-        :value="$menu.parseArgument(command.checked)" @change="handleClick"/>
+        :value="$menuManager.parseArgument(command.checked)" @change="handleClick"/>
       {{ caption || command.name }}
       <template v-if="mnemonic"> ({{ mnemonic }})</template>
       <template v-if="command.ellipsis"> ...</template>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index b08cf62..0a598a9 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -2,24 +2,46 @@
 
 module.exports = {
   name: 'menu-view',
-  inject: ['commands', '$menu'],
-  props: ['data', 'current'],
+  props: ['data'],
   components: {
     MenuItem: require('./menu-item.vue'),
   },
 
+  mounted() {
+    addEventListener('keypress', (event) => {
+      if (!!this.data.show || !this.data.focused) return
+      const key = event.key.toUpperCase()
+      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      if (index >= 0) {
+        this.toggleMenuItem(index)
+      }
+    })
+  },
+
   methods: {
-    enterMenuItem(key, event) {
-      const style = this.$menu.menuReference[key].style
-      this.$menu.locateAtLeftRight(event, style)
-      this.$menu.menuData[key].show = true
+    toggleMenuItem(index) {
+      const item = this.data.children[index]
+      if (typeof item !== 'object') return
+      if (item.ref) {
+        this.enterMenuItem()
+      } else if (!item.disabled && !item.children) {
+        if (item.command) {
+          this.$menuManager.executeCommand(item.command)
+        }
+      }
+    },
+    enterMenuItem(key, index) {
+      const style = this.$menuManager.$refs[key][0].$el.style
+      const rect = this.$el.children[index].getBoundingClientRect()
+      this.$menuManager.locateAtLeftRight(rect, style)
+      this.$menuManager.menuData[key].show = true
     },
     leaveMenuItem(key, event) {
       const x = event.clientX
       const y = event.clientY
       const rect = this.$el.getBoundingClientRect()
       if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
-        this.$menu.menuData[key].show = false
+        this.$menuManager.menuData[key].show = false
       }
     },
   },
@@ -28,24 +50,24 @@ module.exports = {
 </script>
 
 <template>
-  <div>
-    <template v-for="(item, index) in data">
+  <div :class="{ focused: data.focused }">
+    <template v-for="(item, index) in data.children">
       <div :key="index" v-if="item === '@separator'" class="menu-item disabled" @click.stop>
         <div class="separator"/>
       </div>
       <menu-item :key="index" v-else-if="item.ref"
         @click.native.stop binding=">"
         :caption="item.caption" :mnemonic="item.mnemonic"
-        @mouseenter.native="enterMenuItem(item.ref, $event)"
+        @mouseenter.native="enterMenuItem(item.ref, index)"
         @mouseleave.native="leaveMenuItem(item.ref, $event)"/>
       <menu-view :key="index" v-else-if="item.children"
-        v-show="current === index" :data="item.children"/>
+        v-show="data.current === index" :data="item"/>
       <menu-item :key="index" v-else-if="item.command"
-        :command="commands[item.command]" :mnemonic="item.mnemonic"/>
+        :command="$menuManager._commands[item.command]" :mnemonic="item.mnemonic"/>
       <transition-group :key="index" v-else name="ob-menu-list">
-        <menu-item v-for="(sub, index) in $menu.parseArgument(item.data)" :key="index"
-          :class="{ active: sub.key === $menu.parseArgument(item.current) }"
-          @click.native="$menu.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
+        <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data)" :key="index"
+          :class="{ active: sub.key === $menuManager.parseArgument(item.current) }"
+          @click.native="$menuManager.executeMethod(item.switch, sub.key)" :caption="sub.name"/>
       </transition-group>
     </template>
   </div>
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 0e9d1e6..ef7fa9d 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -8,33 +8,58 @@ module.exports = {
     }
   },
 
+  data: () => ({
+    focused: false,
+  }),
+
   computed: {
     data() {
-      return this.$menu.menuData[this.menu]
+      return this.$menuManager.menuData[this.menu]
     },
     element() {
-      return this.$menu.menuReference[this.menu]
+      return this.$menuManager.$refs[this.menu][0].$el
     },
   },
 
+  mounted() {
+    addEventListener('keydown', (event) => {
+      if (event.keyCode !== 18) return
+      this.focused = !this.focused
+      this.$el.focus()
+      event.preventDefault()
+    })
+
+    addEventListener('keypress', (event) => {
+      if (!this.focused) return
+      const key = event.key.toUpperCase()
+      const index = this.data.children.findIndex(menu => menu.mnemonic === key)
+      if (index >= 0) {
+        this.toggleMenu(index)
+      }
+    })
+  },
+
   methods: {
-    hoverMenu(index, event) {
+    hoverMenu(index) {
       const current = this.data.current
       if (current !== null && current !== index) {
-        this.showMenu(index, event)
+        this.toggleMenu(index)
       }
     },
-    showMenu(index, event) {
-      const style = this.element.style
+    toggleMenu(index) {
       const last = this.data.current
       if (last === index) {
         this.data.show = false
         this.data.current = null
         return
       }
-      this.$menu.hideContextMenus()
-      this.$menu.locateAtTopBottom(event, style)
+      this.focused = false
+      const style = this.element.style
+      const rect = this.$el.children[index].getBoundingClientRect()
+      this.$menuManager.hideContextMenus()
+      this.$menuManager.locateAtTopBottom(rect, style)
       this.data.show = true
+      this.data.focused = true
       this.data.current = index
     },
   }
@@ -43,12 +68,14 @@ module.exports = {
 </script>
 
 <template>
-  <div class="ob-menubar">
-    <div v-for="(menu, index) in data.children" :key="index" class="item"
-      @click.stop="showMenu(index, $event)" @mouseover.stop="hoverMenu(index, $event)"
-      :class="{ active: data.current === index }" @contextmenu.stop>
-      {{ menu.caption }} (<span>{{ menu.mnemonic }}</span>)&nbsp;
-    </div>
+  <div :class="['ob-menubar', { focused }]">
+    <template v-if="$menuManager.loaded">
+      <div v-for="(menu, index) in data.children" :key="index" class="item"
+        @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
+        :class="{ active: data.current === index }" @contextmenu.stop>
+        {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
+      </div>
+    </template>
   </div>
 </template>
 
@@ -74,4 +101,10 @@ module.exports = {
   }
 }
 
+&.focused {
+  .mnemonic {
+    text-decoration: underline;
+  }
+}
+
 </style>
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index c4e6260..738ec33 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,26 +1,14 @@
-import { dirname, join } from 'path'
+import { join } from 'path'
 import { EventEmitter } from 'events'
 import { readFileSync, watch, FSWatcher, readdirSync } from 'fs'
 import debounce from 'lodash.debounce'
 
 type WatchEventType = 'rename' | 'change'
 
-// type FileTree = IterableIterator<string | Directory>
-// interface Directory { name: string, children: FileTree }
-
 interface FileTree {
   [key: string]: string | FileTree
 }
 
-// function* ProjectMessages(filepath: string): IterableIterator<string> {
-//   const source = readFileSync(filepath).toString()
-//   const options = JSON.parse(source) // FIXME: support for yaml
-//   yield JSON.stringify({ type: 'project', data: options })
-//   const basedir = options.basedir || dirname(filepath)
-//   yield JSON.stringify({ type: 'filetree', data: traverse(basedir) })
-//   // FIXME: add inner messages, for example file contents
-// }
-
 export default class ProjectManager extends EventEmitter {
   private watcher: FSWatcher
   private tree: DirTree

From 4c5e2e52214d53a2845ae8ee24bbdd59d6235f51 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 26 Oct 2018 20:18:17 +0800
Subject: [PATCH 30/47] add some adjustments

---
 packages/dev-server/comp/menu/index.js      |  13 +--
 packages/dev-server/comp/menu/manager.vue   |  43 ++++++--
 packages/dev-server/comp/menu/menu-item.vue |   2 +-
 packages/dev-server/comp/menu/menu-view.vue | 114 +++++++++++++-------
 packages/dev-server/comp/menu/menubar.vue   |  53 +++++----
 packages/dev-server/themes/dark.scss        |   4 +-
 packages/dev-server/themes/simple.scss      |   4 +-
 7 files changed, 152 insertions(+), 81 deletions(-)

diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
index ef5a5f7..7736323 100644
--- a/packages/dev-server/comp/menu/index.js
+++ b/packages/dev-server/comp/menu/index.js
@@ -31,7 +31,7 @@ module.exports = function(Vue) {
     })
   }
 
-  Vue.prototype.$initializeMenu = function() {
+  Vue.prototype.$initializeMenu = function(parentNode) {
     const element = document.createElement('div')
     
     $menuManager = new MenuManager()
@@ -39,10 +39,11 @@ module.exports = function(Vue) {
     Vue.prototype.$menuManager = $menuManager
 
     function mountMenuManager() {
-      $menuManager.$mount(this.$el.appendChild(element))
-
-      this.$el.addEventListener('click', () => $menuManager.hideAllMenus())
-      this.$el.addEventListener('contextmenu', () => $menuManager.hideAllMenus())
+      if (!parentNode) parentNode = this.$el
+      $menuManager.$mount(parentNode.appendChild(element))
+      
+      parentNode.addEventListener('click', () => $menuManager.hideAllMenus())
+      parentNode.addEventListener('contextmenu', () => $menuManager.hideAllMenus())
     }
 
     if (this._isMounted) {
@@ -55,6 +56,6 @@ module.exports = function(Vue) {
   Vue.prototype.$registerMenus = function(menu) {
     if (!$menuManager) this.$initializeMenu()
 
-    $menuManager.register(this, menu)
+    $menuManager.registerMenus(this, menu)
   }
 }
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index ddc4c1c..019f28a 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -9,6 +9,7 @@ module.exports = {
   data: () => ({
     menu: [],
     loaded: false,
+    underlineMnemonic: false,
   }),
 
   computed: {
@@ -28,16 +29,37 @@ module.exports = {
   },
 
   methods: {
-    register(context, menu) {
+    registerMenus(context, menu) {
       menu.forEach(item => item.context = context)
       this.menu.push(...menu)
     },
+    locateAtTopBottom(rect, style) {
+      if (rect.left + 200 > innerWidth) {
+        style.left = rect.left + rect.width - 200 + 'px'
+      } else {
+        style.left = rect.left + 'px'
+      }
+      style.top = rect.top + rect.height + 'px'
+    },
+    locateAtLeftRight(style, ref, offsetY = 0, marginX = 0) {
+      if (ref.offsetRight + 200 > innerWidth) {
+        style.left = null
+        style.right = ref.offsetLeft - marginX + 'px'
+      } else {
+        style.right = null
+        style.left = ref.offsetLeft + marginX + ref.offsetWidth + 'px'
+      }
+      style.top = ref.offsetTop + offsetY + 'px'
+    },
     executeMethod(context, key, ...args) {
       const method = context[key]
       if (method instanceof Function) method(...args)
     },
     executeCommand(command) {
-      if (!command.method) return
+      if (typeof command === 'string') {
+        command = this.commands[command]
+      }
+      if (!command || !command.method || !command.context) return
       const method = command.context[command.method]
       if (!(method instanceof Function)) {
         console.error(`No method ${command.method} was found!`)
@@ -59,8 +81,8 @@ module.exports = {
       }
     },
     hideAllMenus() {
+      this.underlineMnemonic = false
       this.$refs.menus.forEach(menu => menu.traverse((menu) => {
-        menu.active = false
         menu.current = null
       }))
     },
@@ -70,20 +92,13 @@ module.exports = {
       util.locateAtMouseEvent(event, style)
       this.menuData[key].active = true
     },
-    showButtonMenu(key, event) {
-      const style = this.$refs[key][0].$el.style
-      const rect = event.currentTarget.getBoundingClientRect()
-      this.hideAllMenus()
-      util.locateAtTopBottom(rect, style)
-      this.menuData[key].active = true
-    },
   }
 }
 
 </script>
 
 <template>
-  <div class="marklet-menu">
+  <div class="ob-menu-manager" :class="{ 'underline-mnemonic': underlineMnemonic }">
     <menu-view v-for="(item, index) in menu" :key="index"
       :menu="item.children" :context="item.context" ref="menus"/>
   </div>
@@ -98,4 +113,10 @@ module.exports = {
   height: 0;
 }
 
+&.underline-mnemonic {
+  .mnemonic {
+    text-decoration: underline;
+  }
+}
+
 </style>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
index cc9c9b2..2cdc63b 100644
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ b/packages/dev-server/comp/menu/menu-item.vue
@@ -57,7 +57,7 @@ module.exports = {
       <mkl-checkbox v-if="command.checked !== undefined"
         :value="$menuManager.parseArgument(command.checked, context)" @change="handleClick"/>
       {{ caption || command.name }}
-      <template v-if="mnemonic"> ({{ mnemonic }})</template>
+      <template v-if="mnemonic"> (<span class="mnemonic">{{ mnemonic }}</span>)</template>
       <template v-if="command.ellipsis"> ...</template>
     </span>
     <span class="binding">{{ keybinding }}</span>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
index 8d067a8..78c00f4 100644
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ b/packages/dev-server/comp/menu/menu-view.vue
@@ -1,6 +1,5 @@
 <script>
 
-const util = require('./util')
 const menuItem = require('./menu-item.vue')
 
 module.exports = {
@@ -9,60 +8,91 @@ module.exports = {
   components: { menuItem },
 
   props: {
-    menu: Object,
+    menu: Array,
     context: Object,
   },
 
   data: () => ({
+    chosen: null,
     active: false,
-    current: null,
-    focused: false,
+    children: [],
   }),
 
-  watch: {
-    show(value) {
-      this.focused = value
+  computed: {
+    current: {
+      get() {
+        const index = this.children.findIndex(submenu => submenu && submenu.active)
+        return index < 0 ? null : index
+      },
+      set(value) {
+        this.children.forEach((submenu, index) => {
+          if (!submenu) return
+          submenu.active = index === value
+        })
+      },
     },
-    current(value) {
-      if (value !== null) {
-        this.$refs[value].active = true
-      }
+    focused() {
+      return this.active && this.current === null
     },
   },
 
   mounted() {
-    addEventListener('keypress', (event) => {
-      if (!this.show) return
-      const key = event.key.toUpperCase()
-      const index = this.menu.findIndex(menu => menu.mnemonic === key)
-      if (index >= 0) {
-        this.toggleMenuItem(index)
-      }
+    addEventListener('keydown', this.handleKeyDown)
+    addEventListener('keypress', this.handleKeyPress)
+
+    this.children = this.menu.map((item, index) => {
+      if (!item.children) return
+      return this.$refs[index][0]
     })
   },
 
+  beforeDestroy() {
+    removeEventListener('keydown', this.handleKeyDown)
+    removeEventListener('keypress', this.handleKeyPress)
+  },
+
   methods: {
+    handleKeyDown(event) {
+      if (!this.focused) return
+      console.log(event.key, event.keyCode)
+      if (event.keyCode === 8) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.$nextTick(() => this.$parent.current = null)
+      }
+    },
+    handleKeyPress(event) {
+      if (!this.focused) return
+      const key = event.key.toUpperCase()
+      const index = this.menu.findIndex(item => item.mnemonic === key)
+      if (index >= 0) {
+        event.preventDefault()
+        event.stopPropagation()
+        this.toggleMenuItem(index)
+        this.$menuManager.underlineMnemonic = true
+      }
+    },
     toggleMenuItem(index) {
       const item = this.menu[index]
-      if (typeof item !== 'object') return
-      if (item.ref) {
-        this.enterMenuItem()
-      } else if (!item.disabled && !item.children) {
+      if (item.children) {
+        this.enterMenuItem(index)
+      } else if (!item.disabled) {
         if (item.command) {
+          this.$menuManager.hideAllMenus()
           this.$menuManager.executeCommand(item.command)
         }
       }
     },
     enterMenuItem(index) {
-      const style = this.$refs[index][0].$el.style
+      const style = this.$refs.standalone.style
       const button = this.$refs.body.children[index]
-      util.locateAtLeftRight(style, button)
+      this.$menuManager.locateAtLeftRight(style, button, -2)
       this.$refs[index][0].active = true
     },
     leaveMenuItem(index, event) {
       const x = event.clientX
       const y = event.clientY
-      const rect = this.$el.getBoundingClientRect()
+      const rect = this.$refs.body.getBoundingClientRect()
       if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
         this.$refs[index][0].active = false
       }
@@ -83,9 +113,14 @@ module.exports = {
 </script>
 
 <template>
-  <!-- eslint-disable -->
-  <div class="marklet-menu" :class="{ active }">
-    <span ref="body" v-show="active && current === null || $parent.active">
+  <span class="marklet-menu" :class="{ active }">
+    <!-- children --><!-- eslint-disable -->
+    <div ref="standalone" :class="{ standalone: current !== null }">
+      <menu-view v-for="(item, index) in menu" v-if="item.children" :key="index"
+        :menu="item.children" :context="context" :ref="index"/>
+    </div>
+
+    <div ref="body" v-show="active" :class="['menu-body', { focused }]">
       <template v-for="(item, index) in menu">
         <!-- submenu -->
         <menu-item :key="index" v-if="item.children"
@@ -96,7 +131,7 @@ module.exports = {
 
         <!-- command -->
         <menu-item :key="index" v-else-if="item.command" :context="context"
-          :command="$menuManager.commands[item.command]" :mnemonic="item.mnemonic"/>
+          :mnemonic="item.mnemonic" :command="$menuManager.commands[item.command]"/>
         
         <!-- list -->
         <transition-group :key="index" v-else-if="item.switch" name="ob-menu-list">
@@ -112,12 +147,8 @@ module.exports = {
           <div v-else class="caption">{{ item.caption }}</div>
         </div>
       </template>
-    </span>
-
-    <!-- children -->
-    <menu-view v-for="(item, index) in menu" v-if="item.children" :key="index"
-      :menu="item.children" :ref="index" v-show="!active || current === index" :context="context"/>
-  </div>
+    </div>
+  </span>
 </template>
 
 <style lang="scss" scoped>
@@ -126,13 +157,12 @@ module.exports = {
   position: relative;
 }
 
-&.active {
+> .standalone {
   z-index: 10;
   padding: 0;
   margin: 0;
   outline: 0;
   border: none;
-  padding: 2px 0;
   min-width: 200px;
   user-select: none;
   width: max-content;
@@ -140,6 +170,16 @@ module.exports = {
   transition: 0.3s ease;
 }
 
+.menu-body {
+  padding: 2px 0;
+
+  &:not(.focused) {
+    .mnemonic {
+      text-decoration: none;
+    }
+  }
+}
+
 .menu-item {
   padding: 0;
   display: flex;
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index 07e9fac..c9d2253 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -18,51 +18,60 @@ module.exports = {
     children() {
       return this.$menuManager.menu.find(item => item.ref === this.from).children
     },
-    source() {
+    origin() {
       return this.$menuManager.refs[this.from]
     },
   },
 
   mounted() {
-    addEventListener('keydown', (event) => {
-      if (event.keyCode !== 18) return
-      this.focused = !this.focused
-      this.$el.focus()
-      event.preventDefault()
-    })
+    addEventListener('keydown', this.handleKeyDown)
+    addEventListener('keypress', this.handleKeyPress)
+  },
+
+  beforeDestroy() {
+    removeEventListener('keydown', this.handleKeyDown)
+    removeEventListener('keypress', this.handleKeyPress)
+  },
 
-    addEventListener('keypress', (event) => {
+  methods: {
+    handleKeyDown(event) {
+      if (event.keyCode === 18) {
+        this.focused = !this.focused
+      } else if (event.keyCode === 27 && this.focused) {
+        this.focused = false
+        this.$menuManager.underlineMnemonic = false
+      } else return
+      event.preventDefault()
+      event.stopPropagation()
+    },
+    handleKeyPress(event) {
       if (!this.focused) return
       const key = event.key.toUpperCase()
       const index = this.children.findIndex(menu => menu.mnemonic === key)
       if (index >= 0) {
         this.toggleMenu(index)
+        this.$menuManager.underlineMnemonic = true
+        event.preventDefault()
+        event.stopPropagation()
       }
-    })
-  },
-
-  methods: {
+    },
     hoverMenu(index) {
-      const current = this.source.current
+      const current = this.origin.current
       if (current !== null && current !== index) {
         this.toggleMenu(index)
       }
     },
     toggleMenu(index) {
-      if (this.source.current === index) {
-        this.source.active = false
-        this.source.current = null
+      if (this.origin.current === index) {
+        this.origin.current = null
         return
       }
       this.focused = false
-      const style = this.source.$el.style
+      const style = this.origin.$refs.standalone.style
       const rect = this.$el.children[index].getBoundingClientRect()
       this.$menuManager.hideAllMenus()
       util.locateAtTopBottom(rect, style)
-      this.source.current = index
-      if (!this.source.active) {
-        this.$nextTick(() => this.source.active = true)
-      }
+      this.origin.current = index
     },
   }
 }
@@ -74,7 +83,7 @@ module.exports = {
     <template v-if="$menuManager.loaded">
       <div v-for="(menu, index) in children" :key="index" class="item"
         @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
-        :class="{ active: source.current === index }" @contextmenu.stop>
+        :class="{ active: origin.current === index }" @contextmenu.stop>
         {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
       </div>
     </template>
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 83e919c..dbbad83 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -24,7 +24,7 @@ $active-color: #acdeff;
   &:hover, &.active { background-color: #999999 }
 }
 
-.marklet-menu.active {
+.marklet-menu > .standalone {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 
@@ -35,7 +35,7 @@ $active-color: #acdeff;
     .binding i:hover { color: #fafaf5 }
     .separator { border-bottom-color: #888888 }
 
-    &:hover {
+    &:hover, &.chosen {
       &:not(.disabled) { background-color: #3A3A3A }
       .label { color: #e1e4e8 }
       .binding { color: #c6cbd1 }
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 5721cc6..7911ba9 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -24,7 +24,7 @@ $active-color: #409eff;
   &:hover, &.active { background-color: #aaaaaa }
 }
 
-.marklet-menu.active {
+.marklet-menu > .standalone {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 
@@ -35,7 +35,7 @@ $active-color: #409eff;
     .binding i:hover { color: #000000 }
     .separator { border-bottom-color: #b0b0b0 }
 
-    &:hover {
+    &:hover, &.chosen {
       &:not(.disabled) { background-color: #e8e8e8 }
       .label { color: #24292e }
       .binding { color: #f5eaea }

From a7a56263bb6dfa26e847a37741028e338127d413 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Fri, 26 Oct 2018 21:23:37 +0800
Subject: [PATCH 31/47] tried to set colors on editor

...... BUT FAILED
---
 packages/dev-server/client/index.ts    | 8 ++++++++
 packages/dev-server/client/language.ts | 6 ++----
 packages/dev-server/themes/dark.yaml   | 5 ++++-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 8b933bf..ababfe6 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -1,5 +1,6 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
+import defineLanguage from './language'
 import * as renderer from '@marklet/renderer'
 import { LexerConfig } from '@marklet/parser'
 import { SourceType, ServerType } from '../server'
@@ -15,6 +16,13 @@ Vue.component('mkl-checkbox', require('@/checkbox.vue'))
 const eventBus = new Vue()
 
 eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
+  monaco.languages.register({
+    id: 'marklet',
+    extensions: ['mkl', 'md'],
+  })
+  monaco.languages.setMonarchTokensProvider('marklet', defineLanguage())
+  eventBus.$emit('monaco.language.loaded', monaco)
+  console.log(require('../themes/dark'))
   monaco.editor.defineTheme('dark', require('../themes/dark'))
   monaco.editor.defineTheme('simple', require('../themes/simple'))
   eventBus.$emit('monaco.theme.loaded', monaco)
diff --git a/packages/dev-server/client/language.ts b/packages/dev-server/client/language.ts
index 4f2cdac..d08f181 100644
--- a/packages/dev-server/client/language.ts
+++ b/packages/dev-server/client/language.ts
@@ -2,7 +2,7 @@ import { LexerConfig } from '@marklet/parser'
 import Monaco from 'monaco-editor'
 
 export default function(config: LexerConfig = {}) {
-  const language: Monaco.languages.IMonarchLanguage = {
+  return {
     tokenizer: {
       root: [
         { include: 'topLevel' },
@@ -16,7 +16,5 @@ export default function(config: LexerConfig = {}) {
         }
       ],
     },
-  }
-
-  return language
+  } as Monaco.languages.IMonarchLanguage
 }
diff --git a/packages/dev-server/themes/dark.yaml b/packages/dev-server/themes/dark.yaml
index ca9add3..0913784 100644
--- a/packages/dev-server/themes/dark.yaml
+++ b/packages/dev-server/themes/dark.yaml
@@ -1,5 +1,4 @@
 base: vs-dark
-rules: []
 inherit: true
 
 colors:
@@ -74,3 +73,7 @@ colors:
   peekViewResult.selectionBackground: '#414339'
   peekViewResult.matchHighlightBackground: '#75715E'
   peekViewEditor.matchHighlightBackground: '#75715E'
+
+rules:
+  - token: heading
+    forground: 'a6e22e'

From b256b429a3a65b151815e290cde241b727932cf1 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Sat, 27 Oct 2018 16:55:35 +0800
Subject: [PATCH 32/47] lazy content

---
 packages/cli/program.js               |  2 +-
 packages/dev-server/server/index.ts   | 12 ++++-
 packages/dev-server/server/project.ts | 71 +++++++++++++++++++++------
 3 files changed, 67 insertions(+), 18 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 18bcb71..1f2a291 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -73,7 +73,7 @@ Object.assign(Object.getPrototypeOf(program), {
           if (!fs.existsSync(configPath)) continue
           if (fs.statSync(configPath).isFile()) {
             options = loadFromFile(configPath)
-            options.filepath = basePath
+            options.filepath = configPath
             matchFound = true
             break
           }
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 4f2d82c..7ccec40 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -122,7 +122,17 @@ class MarkletServer<T extends ServerType> {
 
   private setupProjectWatcher() {
     const manager = new ProjectManager(this.filepath)
-    this.wsServer.on('connection', ws => ws.send(manager.msg))
+    this.wsServer.on('connection', ws => {
+      ws.send(manager.entriesMessage)
+      ws.on('message', data => {
+        const parsed = JSON.parse(<string>data)
+        switch (parsed.type) {
+          case 'content':
+            manager.getContent(parsed.data)            
+            break
+        }
+      })
+    })
     manager.on('update', msg => this.wsServer.broadcast(msg))
   }
 
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index c4e6260..fae4452 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,4 +1,4 @@
-import { dirname, join } from 'path'
+import { dirname, join, basename } from 'path'
 import { EventEmitter } from 'events'
 import { readFileSync, watch, FSWatcher, readdirSync } from 'fs'
 import debounce from 'lodash.debounce'
@@ -12,6 +12,9 @@ interface FileTree {
   [key: string]: string | FileTree
 }
 
+interface EntryTree extends Array<SubEntry> {}
+type SubEntry = EntryTree | string
+
 // function* ProjectMessages(filepath: string): IterableIterator<string> {
 //   const source = readFileSync(filepath).toString()
 //   const options = JSON.parse(source) // FIXME: support for yaml
@@ -25,41 +28,59 @@ export default class ProjectManager extends EventEmitter {
   private watcher: FSWatcher
   private tree: DirTree
   private debouncedUpdate: () => void
-  private deleteQueue: Set<string> = new Set()
-  private addQueue: Set<string> = new Set()
-  public msg: string
+  private deleteSet: Set<string> = new Set()
+  private addSet: Set<string> = new Set()
+  private basePath: string
+  private basename: string
+  private configUpdated: boolean
+  public entriesMessage: string
+  public optionMessage: string
 
   constructor(private filepath: string) {
     super()
-    this.tree = new DirTree(filepath)
-    this.watcher = watch(this.filepath, { recursive: true }, this.handleWatchEvent.bind(this))
+    this.basePath = dirname(filepath)
+    this.basename = basename(filepath)
+    this.tree = new DirTree(this.basePath)
+    this.watcher = watch(this.basePath, { recursive: true }, this.handleWatchEvent.bind(this))
     this.debouncedUpdate = debounce(this.update.bind(this), 200)
   }
 
   private handleWatchEvent(eventType: WatchEventType, filename: string) {
     if (eventType === 'rename' && this.tree.has(filename)) {
-      this.deleteQueue.add(filename)
+      this.deleteSet.add(filename)
     } else {
-      this.addQueue.add(filename)
+      this.addSet.add(filename)
+      this.configUpdated = filename === this.basename
     }
     this.debouncedUpdate()
   }
 
   private update() {
-    for (const item of this.deleteQueue) {
+    for (const item of this.deleteSet) {
       this.tree.del(item)
     }
-    this.deleteQueue.clear()
-    for (const item of this.addQueue) {
+    this.deleteSet.clear()
+    for (const item of this.addSet) {
       try {
-        this.tree.set(item, readFileSync(join(this.filepath, item), 'utf8'))        
+        this.tree.set(item, readFileSync(join(this.basePath, item), 'utf8'))        
       } catch (_) {}
     }
-    this.addQueue.clear()
-    this.emit('update', this.msg = JSON.stringify({
-      type: 'project',
-      tree: this.tree.tree
+    this.addSet.clear()
+    this.emit('update', this.entriesMessage = JSON.stringify({
+      type: 'entries',
+      tree: this.tree.entryTree
     }))
+    if (this.configUpdated) {
+      this.emit('update', this.optionMessage = JSON.stringify({
+        type: 'options',
+        tree: this.tree.get(this.basename) // parse it
+      }))
+      this.configUpdated = false
+    }
+  }
+
+  public getContent(path: string) {
+    return this.tree.get(path)
   }
 
   public dispose(): void {
@@ -124,4 +145,22 @@ class DirTree {
     }
     delete tree[last]
   }
+
+  get entryTree() {
+    return DirTree.generateEntryTree(this.tree)
+  }
+
+  static generateEntryTree(tree: FileTree) {
+    const entries: EntryTree = Object.keys(tree)
+    for (let i = 0; i < entries.length; i++) {
+      const element = entries[i]
+      const content = tree[<string>element]
+      if (typeof content === 'object') {
+        const sub = this.generateEntryTree(content)
+        sub.unshift(element)
+        entries.splice(i, 1, sub)
+      }
+    }
+    return entries
+  }
 }

From 8ad5d0a4f7204ff43c690e2a687204eb4083a596 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sat, 27 Oct 2018 20:03:56 +0800
Subject: [PATCH 33/47] fix entries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复了事件接口不统一的 bug
2. 修复了 project 没有初始化的 bug
3. 将 project 模式对应的 sourceType 改为 project，过去的 type 改为 serverType
---
 packages/cli/program.js               |  2 +-
 packages/dev-server/client/index.ts   |  5 +-
 packages/dev-server/comp/editor.js    | 32 ++++++-----
 packages/dev-server/server/file.ts    | 18 ++++--
 packages/dev-server/server/index.ts   | 73 +++++++++---------------
 packages/dev-server/server/project.ts | 81 +++++++++++++++++----------
 6 files changed, 109 insertions(+), 102 deletions(-)

diff --git a/packages/cli/program.js b/packages/cli/program.js
index 1f2a291..c1d54ba 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -25,7 +25,7 @@ function loadFromFile(filepath) {
   } else {
     throw new Error('error: cannot recognize file with no extenstion.')
   }
-  options.sourceType = 'folder'
+  options.sourceType = 'project'
   return options
 }
 
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index ababfe6..e140f71 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -22,7 +22,6 @@ eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
   })
   monaco.languages.setMonarchTokensProvider('marklet', defineLanguage())
   eventBus.$emit('monaco.language.loaded', monaco)
-  console.log(require('../themes/dark'))
   monaco.editor.defineTheme('dark', require('../themes/dark'))
   monaco.editor.defineTheme('simple', require('../themes/simple'))
   eventBus.$emit('monaco.theme.loaded', monaco)
@@ -85,8 +84,8 @@ const client = new class MarkletClient {
     })
     this.ws.addEventListener('message', (event) => {
       try {
-        const { type, data } = JSON.parse(event.data)
-        eventBus.$emit('server.' + type, data)
+        const data = JSON.parse(event.data)
+        eventBus.$emit('server.' + data.type, data)
       } catch (error) {
         eventBus.$emit('server.error', error)
       }
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 1541b11..9f10ef1 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -5,7 +5,7 @@ module.exports = {
     nodes: [],
     origin: '',
     source: '',
-    loading: 1,
+    loaded: false,
     changed: false,
     config: {
       ...defaultConfig,
@@ -24,16 +24,10 @@ module.exports = {
         this.nodes = this._lexer.parse(this.source)
       },
     },
-    loading(value) {
-      if (!value) {
-        this._editor.setModel(this._model)
-        this.$nextTick(() => this.layout())
-      }
-    },
   },
 
   created() {
-    this._enableEdit = marklet.type === 'edit'
+    this._enableEdit = marklet.serverType === 'edit'
     this._isProject = marklet.sourceType !== 'file'
     this._lexer = new DocumentLexer(this.config)
 
@@ -42,8 +36,12 @@ module.exports = {
   },
 
   mounted() {
-    marklet.$on('server.document', (doc) => {
-      this.openFile(doc)
+    marklet.$on('server.document', ({ data }) => {
+      this.openFile(data)
+    })
+
+    marklet.$on('server.entries', ({ tree }) => {
+      console.log(tree)
     })
 
     marklet.$on('monaco.theme.loaded', (monaco) => {
@@ -74,7 +72,9 @@ module.exports = {
         this.row = event.position.lineNumber
         this.column = event.position.column
       })
-      this.loading = 0
+      this._editor.setModel(this._model)
+      this.$nextTick(() => this.layout())
+      this.loaded = true
     })
 
     addEventListener('beforeunload', () => {
@@ -84,14 +84,16 @@ module.exports = {
 
   methods: {
     openFile(doc) {
-      if (this.loading) {
-        this.source = doc
-      } else {
+      if (this.loaded) {
         this._model.setValue(doc)
+      } else {
+        this.source = doc
       }
     },
     save() {
-      marklet.$emit('client.message', 'save', this.source) // TODO: maybe file name is needed. depend on backend impl
+      // try to use functional APIs instead of events
+      // TODO: maybe file name is needed. depend on backend impl
+      marklet.$emit('client.message', 'save', this.source)
     },
     saveAs() {
       marklet.$emit('client.message', 'saveAs', {
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index d14d8c1..64cadc0 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -1,10 +1,9 @@
 import { EventEmitter } from 'events'
 import { readFileSync, watch, FSWatcher } from 'fs'
 import debounce from 'lodash.debounce'
+import { Server, Manager, WatchEventType } from './index'
 
-type WatchEventType = 'rename' | 'change'
-
-export default class FileManager extends EventEmitter {
+export default class FileManager extends EventEmitter implements Manager {
   private content: string
   private watcher: FSWatcher
   private debouncedUpdate: () => void
@@ -14,8 +13,8 @@ export default class FileManager extends EventEmitter {
     super()
     this.update()
     this.debouncedUpdate = debounce(() => this.update(), 200)
-    this.watcher = watch(this.filepath, (eventType: WatchEventType) => {
-      if (eventType === 'rename') {
+    this.watcher = watch(this.filepath, (type: WatchEventType) => {
+      if (type === 'rename') {
         this.dispose()
       } else {
         this.debouncedUpdate()
@@ -36,6 +35,15 @@ export default class FileManager extends EventEmitter {
     }
   }
 
+  public bind(server: Server): this {
+    server.wsServer.on('connection', ws => ws.send(this.msg))
+    this.on('update', msg => server.wsServer.broadcast(msg))
+    this.once('close', () => {
+      server.dispose('Source file is gone.')
+    })
+    return this
+  }
+
   public dispose(): void {
     this.watcher.close()
     this.emit('close')
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 7ccec40..93b3e72 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -6,6 +6,7 @@ import ws from 'ws'
 
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './util'
+import { EventEmitter } from 'events'
 import ProjectManager from './project'
 import FileManager from './file'
 
@@ -25,8 +26,14 @@ ws.Server.prototype.broadcast = function (data) {
   })
 }
 
+interface MarkletManager extends EventEmitter {
+  bind(server: MarkletServer): this
+  dispose(): void
+}
+
 export type ServerType = 'watch' | 'edit'
 export type SourceType = 'file' | 'project'
+export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
@@ -35,24 +42,27 @@ interface ServerOptions {
   sourceType?: SourceType
 }
 
-class MarkletServer<T extends ServerType> {
-  type: T
-  port: number
-  filepath: string
-  sourceType: SourceType
-  config: LexerConfig
-  wsServer: ws.Server
-  httpServer: http.Server
-
-  constructor(type: T, options: ServerOptions = {}) {
-    this.type = type
+class MarkletServer<T extends ServerType = ServerType> {
+  public port: number
+  public filepath: string
+  public manager: MarkletManager
+  public sourceType: SourceType
+  public config: LexerConfig
+  public wsServer: ws.Server
+  public httpServer: http.Server
+
+  constructor(public serverType: T, options: ServerOptions = {}) {
     this.config = options.config || {}
     this.filepath = options.filepath || ''
     this.port = options.port || DEFAULT_PORT
     this.sourceType = options.sourceType || 'file'
     this.createServer()
     if (this.filepath) {
-      this.setupContentWatcher()
+      if (this.sourceType === 'file') {
+        this.manager = new FileManager(this.filepath).bind(this)
+      } else {
+        this.manager = new ProjectManager(this.filepath).bind(this)
+      }
     }
   }
 
@@ -64,7 +74,7 @@ class MarkletServer<T extends ServerType> {
         response.end()
       }
       
-      function handleData(data: any, type: string = 'text/javascript') {
+      function handleData(data: any, type = 'text/javascript') {
         response.writeHead(200, { 'Content-Type': type })
         response.write(data)
         response.end()
@@ -81,7 +91,7 @@ class MarkletServer<T extends ServerType> {
         }
       } else if (pathname === 'initialize.js') {
         handleData(`
-          marklet.type = '${this.type}'
+          marklet.serverType = '${this.serverType}'
           marklet.filepath = ${JSON.stringify(this.filepath)}
           marklet.sourceType = '${this.sourceType}'
           marklet.config = ${JSON.stringify(this.config)}
@@ -103,39 +113,6 @@ class MarkletServer<T extends ServerType> {
     console.log(`Server running at http://localhost:${this.port}/`)
   }
 
-  private setupContentWatcher() {
-    if (this.sourceType === 'file') {
-      this.setupFileWatcher()
-    } else {
-      this.setupProjectWatcher()
-    }
-  }
-
-  private setupFileWatcher() {
-    const manager = new FileManager(this.filepath)
-    manager.once('close', () => {
-      this.dispose('Source file is gone.')
-    })
-    this.wsServer.on('connection', ws => ws.send(manager.msg))
-    manager.on('update', msg => this.wsServer.broadcast(msg))
-  }
-
-  private setupProjectWatcher() {
-    const manager = new ProjectManager(this.filepath)
-    this.wsServer.on('connection', ws => {
-      ws.send(manager.entriesMessage)
-      ws.on('message', data => {
-        const parsed = JSON.parse(<string>data)
-        switch (parsed.type) {
-          case 'content':
-            manager.getContent(parsed.data)            
-            break
-        }
-      })
-    })
-    manager.on('update', msg => this.wsServer.broadcast(msg))
-  }
-
   public dispose(reason: string = '') {
     this.wsServer.close()
     this.httpServer.close()
@@ -143,7 +120,7 @@ class MarkletServer<T extends ServerType> {
   }
 }
 
-export { MarkletServer as Server }
+export { MarkletServer as Server, MarkletManager as Manager }
 
 export interface WatchOptions extends ServerOptions {
   filepath: string // required
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 43cc135..41a4da9 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,24 +1,17 @@
 import { dirname, join, basename } from 'path'
 import { EventEmitter } from 'events'
 import { readFileSync, watch, FSWatcher, readdirSync } from 'fs'
+import { Server, Manager, WatchEventType } from './index'
 import debounce from 'lodash.debounce'
+import yaml from 'js-yaml'
 
-type WatchEventType = 'rename' | 'change'
-
-interface FileTree {
-  [key: string]: string | FileTree
-}
-
-interface EntryTree extends Array<SubEntry> {}
-type SubEntry = EntryTree | string
-
-export default class ProjectManager extends EventEmitter {
+export default class ProjectManager extends EventEmitter implements Manager {
   private watcher: FSWatcher
   private tree: DirTree
   private debouncedUpdate: () => void
-  private deleteSet: Set<string> = new Set()
+  private delSet: Set<string> = new Set()
   private addSet: Set<string> = new Set()
-  private basePath: string
+  private basepath: string
   private basename: string
   private configUpdated: boolean
   public entriesMessage: string
@@ -26,37 +19,39 @@ export default class ProjectManager extends EventEmitter {
 
   constructor(private filepath: string) {
     super()
-    this.basePath = dirname(filepath)
+    this.basepath = dirname(filepath)
     this.basename = basename(filepath)
-    this.tree = new DirTree(this.basePath)
-    this.watcher = watch(this.basePath, { recursive: true }, this.handleWatchEvent.bind(this))
-    this.debouncedUpdate = debounce(this.update.bind(this), 200)
-  }
+    this.tree = new DirTree(this.basepath)
 
-  private handleWatchEvent(eventType: WatchEventType, filename: string) {
-    if (eventType === 'rename' && this.tree.has(filename)) {
-      this.deleteSet.add(filename)
-    } else {
-      this.addSet.add(filename)
-      this.configUpdated = filename === this.basename
-    }
-    this.debouncedUpdate()
+    this.update()
+    this.debouncedUpdate = debounce(this.update.bind(this), 200)
+    this.watcher = watch(this.basepath, {
+      recursive: true
+    }, (type: WatchEventType, filename) => {
+      if (type === 'rename' && this.tree.has(filename)) {
+        this.delSet.add(filename)
+      } else {
+        this.addSet.add(filename)
+        this.configUpdated = filename === this.basename
+      }
+      this.debouncedUpdate()
+    })
   }
 
   private update() {
-    for (const item of this.deleteSet) {
+    for (const item of this.delSet) {
       this.tree.del(item)
     }
-    this.deleteSet.clear()
+    this.delSet.clear()
     for (const item of this.addSet) {
       try {
-        this.tree.set(item, readFileSync(join(this.basePath, item), 'utf8'))        
+        this.tree.set(item, readFileSync(join(this.basepath, item), 'utf8'))        
       } catch (_) {}
     }
     this.addSet.clear()
     this.emit('update', this.entriesMessage = JSON.stringify({
       type: 'entries',
-      tree: this.tree.entryTree
+      tree: this.tree.entryTree,
     }))
     if (this.configUpdated) {
       this.emit('update', this.optionMessage = JSON.stringify({
@@ -67,7 +62,26 @@ export default class ProjectManager extends EventEmitter {
     }
   }
 
-  public getContent(path: string) {
+  public bind(server: Server): this {
+    server.wsServer.on('connection', ws => {
+      ws.send(this.entriesMessage)
+      ws.on('message', data => {
+        const parsed = JSON.parse(<string>data)
+        switch (parsed.type) {
+          case 'content':
+            this.getContent(parsed.data)            
+            break
+        }
+      })
+    })
+    this.on('update', msg => server.wsServer.broadcast(msg))
+    this.once('close', () => {
+      server.dispose('Source file is gone.')
+    })
+    return this
+  }
+
+  public getContent(path: string): FileTree {
     return this.tree.get(path)
   }
 
@@ -77,6 +91,13 @@ export default class ProjectManager extends EventEmitter {
   }
 }
 
+interface FileTree {
+  [key: string]: string | FileTree
+}
+
+interface EntryTree extends Array<SubEntry> {}
+type SubEntry = EntryTree | string
+
 class DirTree {
   static separator = /[\/\\]/
   public tree: FileTree

From fcdec72a43f2ce6197709a9490bd7e082f561e77 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 00:12:29 +0800
Subject: [PATCH 34/47] cli into server

---
 build/build.js                        |   4 +
 packages/cli/commands/build.js        |   3 +-
 packages/cli/commands/edit.js         |   5 +-
 packages/cli/commands/watch.js        |   5 +-
 packages/cli/program.js               |  77 +++-------------
 packages/dev-server/client/index.ts   |  13 +--
 packages/dev-server/comp/editor.js    |  10 ++-
 packages/dev-server/package.json      |   2 +
 packages/dev-server/server/file.ts    |   2 +
 packages/dev-server/server/glob.ts    |  22 +++++
 packages/dev-server/server/index.ts   |  68 +++++++++-----
 packages/dev-server/server/project.ts | 124 ++++++++------------------
 packages/dev-server/server/tree.ts    |  85 ++++++++++++++++++
 13 files changed, 231 insertions(+), 189 deletions(-)
 create mode 100644 packages/dev-server/server/glob.ts
 create mode 100644 packages/dev-server/server/tree.ts

diff --git a/build/build.js b/build/build.js
index 2598d11..b7eabf4 100644
--- a/build/build.js
+++ b/build/build.js
@@ -51,6 +51,10 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
   })
 
   new webpack.ProgressPlugin().apply(compiler)
+  
+  new webpack.DefinePlugin({
+    'process.env.MARKLET_ENV': JSON.stringify(env),
+  }).apply(compiler)
 
   compiler.run((error, stat) => {
     if (error) {
diff --git a/packages/cli/commands/build.js b/packages/cli/commands/build.js
index de3fac8..85ab819 100644
--- a/packages/cli/commands/build.js
+++ b/packages/cli/commands/build.js
@@ -6,6 +6,7 @@ module.exports = program => program
   // .option('-d, --dest [path]', 'Write parsed data to file instead of stdin')
   .allowConfig()
   .action(function(filepath = '') {
-    const options = this.getOptions(filepath)
+    const options = this.getOptions()
+    options.filepath = filepath
     console.log(options)
   })
diff --git a/packages/cli/commands/edit.js b/packages/cli/commands/edit.js
index 49f59dd..e72fe61 100644
--- a/packages/cli/commands/edit.js
+++ b/packages/cli/commands/edit.js
@@ -6,8 +6,9 @@ module.exports = program => program
   .description('Edit a marklet file or project.')
   .allowPort()
   .allowConfig()
-  .action(function(filepath = '') {
-    const options = this.getOptions(filepath, false)
+  .action(function(filepath) {
+    const options = this.getOptions()
+    options.filepath = filepath
     server.edit(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)
diff --git a/packages/cli/commands/watch.js b/packages/cli/commands/watch.js
index 66c975a..bde2e29 100644
--- a/packages/cli/commands/watch.js
+++ b/packages/cli/commands/watch.js
@@ -6,8 +6,9 @@ module.exports = program => program
   .description('Watch a marklet file or project.')
   .allowPort()
   .allowConfig()
-  .action(function(filepath = '') {
-    const options = this.getOptions(filepath)
+  .action(function(filepath) {
+    const options = this.getOptions()
+    options.filepath = filepath || process.cwd()
     server.watch(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)
diff --git a/packages/cli/program.js b/packages/cli/program.js
index c1d54ba..0be1ebc 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -1,34 +1,6 @@
-const fs = require('fs')
-const path = require('path')
-const yaml = require('js-yaml')
-const util = require('./util')
 const program = require('commander')
 const { DEFAULT_PORT } = require('@marklet/dev-server')
 
-const JS_TYPES = ['.json', '.js']
-const YAML_TYPES = ['.yml', '.yaml']
-const MARK_TYPES = ['.mkl', '.md']
-const ALL_TYPES = [
-  ...JS_TYPES,
-  ...YAML_TYPES,
-]
-
-function loadFromFile(filepath) {
-  let options
-  const ext = path.extname(filepath)
-  if (YAML_TYPES.includes(ext)) {
-    options = yaml.safeLoad(fs.readFileSync(filepath).toString())
-  } else if (JS_TYPES.includes(ext)) {
-    options = require(filepath)
-  } else if (ext) {
-    throw new Error(`error: cannot recognize file extension '${ext}'.`)
-  } else {
-    throw new Error('error: cannot recognize file with no extenstion.')
-  }
-  options.sourceType = 'project'
-  return options
-}
-
 Object.assign(Object.getPrototypeOf(program), {
   apply(install) {
     install(program)
@@ -54,46 +26,19 @@ Object.assign(Object.getPrototypeOf(program), {
     if (this.language) config.default_language = this.language
     return config
   },
-  getOptions(filepath = '', forced = true) {
-    filepath = path.resolve(filepath)
-    let basePath = path.resolve(process.cwd(), filepath)
-    let options = { sourceType: 'file' }
-    try {
-      util.tryFindFile(filepath)
-      if (fs.statSync(basePath).isFile()) {
-        if (!MARK_TYPES.includes(path.extname(basePath))) {
-          options = loadFromFile(basePath)
-        }
-        options.filepath = basePath
-      } else {
-        let matchFound = false
-        const configPathWithoutExt = path.join(basePath, 'marklet')
-        for (const type of ALL_TYPES) {
-          const configPath = configPathWithoutExt + type
-          if (!fs.existsSync(configPath)) continue
-          if (fs.statSync(configPath).isFile()) {
-            options = loadFromFile(configPath)
-            options.filepath = configPath
-            matchFound = true
-            break
-          }
-        }
-        if (!matchFound && forced) {
-          throw new Error(`no config file was found in ${basePath}.`)
-        }
-      }
-      if (this._allowPort) {
-        if (this.port) options.port = this.port
-      }
-      if (this._allowConfig) {
-        if (!options.config) options.config = {}
-        Object.assign(options.config, this.getConfig())
-      }
-    } catch (error) {
-      util.handleError(error.message)
+  getOptions() {
+    let options = {}
+    if (this._allowPort) {
+      if (this.port) options.port = this.port
+    }
+    if (this._allowConfig) {
+      if (!options.config) options.config = {}
+      Object.assign(options.config, this.getConfig())
     }
     return options
-  }
+  },
 })
 
+program._optionHooks = []
+
 module.exports = program
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index e140f71..758ecb1 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -85,6 +85,7 @@ const client = new class MarkletClient {
     this.ws.addEventListener('message', (event) => {
       try {
         const data = JSON.parse(event.data)
+        eventBus.$emit('server.message', data)
         eventBus.$emit('server.' + data.type, data)
       } catch (error) {
         eventBus.$emit('server.error', error)
@@ -111,19 +112,19 @@ const typeMap = {
   watch: '监视',
 }
 
-const App = Vue.extend(require('@/app.vue'))
+const app = require('@/app.vue')
 
 export default new class Marklet {
   app: VueConstructor
-  type: ServerType
-  config: LexerConfig
+  serverType: ServerType
   sourceType: SourceType
+  config: LexerConfig
   events = eventBus
   client = client
-
+  
   create(el: string | HTMLElement) {
-    document.title = 'Marklet - ' + typeMap[this.type]
-    return this.app = new App().$mount(el)
+    document.title = 'Marklet - ' + typeMap[this.serverType]
+    return this.app = new Vue(app).$mount(el)
   }
 
   $on(event: string | string[], callback: Function) {
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 9f10ef1..c2efad0 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -36,14 +36,16 @@ module.exports = {
   },
 
   mounted() {
+    if (process.env.MARKLET_ENV === 'development') {
+      marklet.$on('server.message', (event) => {
+        console.log('server.' + event.type, event)
+      })
+    }
+
     marklet.$on('server.document', ({ data }) => {
       this.openFile(data)
     })
 
-    marklet.$on('server.entries', ({ tree }) => {
-      console.log(tree)
-    })
-
     marklet.$on('monaco.theme.loaded', (monaco) => {
       monaco.editor.setTheme(this.theme)
     })
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index e9f71db..860ef01 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -30,6 +30,8 @@
     "@marklet/parser": "^1.5.2",
     "@marklet/renderer": "^1.3.2",
     "lodash.debounce": "^4.0.8",
+    "js-yaml": "^3.12.0",
+    "minimatch": "^3.0.4",
     "monaco-editor": "^0.14.3",
     "mousetrap": "^1.6.2",
     "vue": "^2.5.17",
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index 64cadc0..48ecdca 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -3,6 +3,8 @@ import { readFileSync, watch, FSWatcher } from 'fs'
 import debounce from 'lodash.debounce'
 import { Server, Manager, WatchEventType } from './index'
 
+export const MARKUP_EXTENSIONS = ['.md', '.mkl']
+
 export default class FileManager extends EventEmitter implements Manager {
   private content: string
   private watcher: FSWatcher
diff --git a/packages/dev-server/server/glob.ts b/packages/dev-server/server/glob.ts
new file mode 100644
index 0000000..cfeabcd
--- /dev/null
+++ b/packages/dev-server/server/glob.ts
@@ -0,0 +1,22 @@
+import { makeRe } from 'minimatch'
+
+export default function(ignores: string[]): (name: string) => boolean {
+  const globs: RegExp[] = []
+  ignores.forEach((pattern) => {
+    if (typeof pattern === 'string') {
+      globs.push(makeRe(pattern, { flipNegate: true }))
+    } else {
+      globs.push(pattern)
+    }
+  })
+  return (name) => {
+    let result = true
+    for (const regexp of globs) {
+      if (regexp.test(name)) {
+        result = false
+        break
+      }
+    }
+    return result
+  }
+}
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 93b3e72..2d98b59 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -4,11 +4,11 @@ import * as url from 'url'
 import * as fs from 'fs'
 import ws from 'ws'
 
+import ProjectManager, { CONFIG_EXTENSIONS } from './project'
+import FileManager, { MARKUP_EXTENSIONS } from './file'
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './util'
 import { EventEmitter } from 'events'
-import ProjectManager from './project'
-import FileManager from './file'
 
 export const DEFAULT_PORT = 10826
 
@@ -37,33 +37,22 @@ export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
-  filepath?: string
   config?: LexerConfig
-  sourceType?: SourceType
 }
 
 class MarkletServer<T extends ServerType = ServerType> {
   public port: number
-  public filepath: string
   public manager: MarkletManager
   public sourceType: SourceType
   public config: LexerConfig
   public wsServer: ws.Server
   public httpServer: http.Server
 
-  constructor(public serverType: T, options: ServerOptions = {}) {
+  constructor(public serverType: T, public filepath = '', options: ServerOptions = {}) {
     this.config = options.config || {}
-    this.filepath = options.filepath || ''
     this.port = options.port || DEFAULT_PORT
-    this.sourceType = options.sourceType || 'file'
     this.createServer()
-    if (this.filepath) {
-      if (this.sourceType === 'file') {
-        this.manager = new FileManager(this.filepath).bind(this)
-      } else {
-        this.manager = new ProjectManager(this.filepath).bind(this)
-      }
-    }
+    this.setupManager()
   }
 
   private createServer() {
@@ -105,7 +94,6 @@ class MarkletServer<T extends ServerType = ServerType> {
           handleError(error)
           return
         }
-
         handleData(data.toString(), getContentType(filepath))
       })
     }).listen(this.port)
@@ -113,6 +101,39 @@ class MarkletServer<T extends ServerType = ServerType> {
     console.log(`Server running at http://localhost:${this.port}/`)
   }
 
+  private setupManager() {
+    if (!this.filepath) {
+      this.sourceType = 'file'
+      // FIXME: A file manager is also needed so as to handle client requests.
+      return
+    } else if (!fs.existsSync(this.filepath)) {
+      throw new Error(`${this.filepath} does not exist.`)
+    }
+    if (fs.statSync(this.filepath).isFile()) {
+      const ext = path.extname(this.filepath).toLowerCase()
+      if (CONFIG_EXTENSIONS.includes(ext)) {
+        this.sourceType = 'project'
+        this.manager = new ProjectManager(this.filepath).bind(this)
+      } else if (MARKUP_EXTENSIONS.includes(ext)) {
+        this.sourceType = 'file'
+        this.manager = new FileManager(this.filepath).bind(this)
+      }
+    } else {
+      const configPathWithoutExt = path.join(this.filepath, 'marklet')
+      for (const ext of CONFIG_EXTENSIONS) {
+        const configPath = configPathWithoutExt + ext
+        if (!fs.existsSync(configPath)) continue
+        if (fs.statSync(configPath).isFile()) {
+          this.sourceType = 'project'
+          this.filepath = configPath
+          this.manager = new ProjectManager(configPath).bind(this)
+          return
+        }
+      }
+      throw new Error(`No config file was found in ${this.filepath}.`)
+    }
+  }
+
   public dispose(reason: string = '') {
     this.wsServer.close()
     this.httpServer.close()
@@ -123,17 +144,22 @@ class MarkletServer<T extends ServerType = ServerType> {
 export { MarkletServer as Server, MarkletManager as Manager }
 
 export interface WatchOptions extends ServerOptions {
-  filepath: string // required
+  filepath: string
 }
 
 export function watch(options: WatchOptions): MarkletServer<'watch'> {
-  return new MarkletServer('watch', options)
+  if (!options.filepath) {
+    throw new Error('Filepath is required in watch mode.')
+  }
+  return new MarkletServer('watch', options.filepath, options)
 }
 
-export interface EditOptions extends ServerOptions {}
+export interface EditOptions extends ServerOptions {
+  filepath?: string
+}
 
 export function edit(options: EditOptions): MarkletServer<'edit'> {
-  const server = new MarkletServer('edit', options)
-  // handle saving files and changing config and so on
+  const server = new MarkletServer('edit', options.filepath, options)
+  // FIXME: handle saving files and other client requests.
   return server
 }
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 41a4da9..08281f3 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,9 +1,23 @@
-import { dirname, join, basename } from 'path'
-import { EventEmitter } from 'events'
-import { readFileSync, watch, FSWatcher, readdirSync } from 'fs'
 import { Server, Manager, WatchEventType } from './index'
+import { dirname, join, basename, extname } from 'path'
+import { readFileSync, watch, FSWatcher } from 'fs'
+import { FileTree, DirTree } from './tree'
+import { EventEmitter } from 'events'
+import { safeLoad } from 'js-yaml'
 import debounce from 'lodash.debounce'
-import yaml from 'js-yaml'
+import filter from './glob'
+
+interface ProjectConfig {
+  basedir?: string
+  ignore?: string[]
+}
+
+const JSON_EXTENSIONS = ['.js', '.json']
+const YAML_EXTENSIONS = ['.yml', '.yaml']
+export const CONFIG_EXTENSIONS = [
+  ...JSON_EXTENSIONS,
+  ...YAML_EXTENSIONS,
+]
 
 export default class ProjectManager extends EventEmitter implements Manager {
   private watcher: FSWatcher
@@ -11,6 +25,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
   private debouncedUpdate: () => void
   private delSet: Set<string> = new Set()
   private addSet: Set<string> = new Set()
+  private config: any
   private basepath: string
   private basename: string
   private configUpdated: boolean
@@ -23,6 +38,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.basename = basename(filepath)
     this.tree = new DirTree(this.basepath)
 
+    this.getConfig()
     this.update()
     this.debouncedUpdate = debounce(this.update.bind(this), 200)
     this.watcher = watch(this.basepath, {
@@ -38,6 +54,23 @@ export default class ProjectManager extends EventEmitter implements Manager {
     })
   }
 
+  private getConfig(): any {
+    const ext = extname(this.filepath).toLowerCase()
+    let config: ProjectConfig
+    if (JSON_EXTENSIONS.includes(ext)) {
+      require.cache[this.filepath] = null
+      config = require(this.filepath)
+      // FIXME: catch error
+    } else if (YAML_EXTENSIONS.includes(ext)) {
+      config = safeLoad(readFileSync(this.filepath).toString())
+      // FIXME: catch error
+    } else {
+      throw new Error('Cannot recognize file extension for configuration file.')
+    }
+    console.log(this.filepath, require(this.filepath))
+    this.config = config
+  }
+
   private update() {
     for (const item of this.delSet) {
       this.tree.del(item)
@@ -90,86 +123,3 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.emit('close')
   }
 }
-
-interface FileTree {
-  [key: string]: string | FileTree
-}
-
-interface EntryTree extends Array<SubEntry> {}
-type SubEntry = EntryTree | string
-
-class DirTree {
-  static separator = /[\/\\]/
-  public tree: FileTree
-
-  constructor(private filepath: string) {
-    this.tree = this.init(filepath)
-  }
-
-  private init(filepath: string): FileTree {
-    const children = readdirSync(filepath, { withFileTypes: true }), subtree: FileTree = {}
-    for (const child of children) {
-      const newPath = join(filepath, child.name)
-      subtree[child.name] = child.isFile() ? readFileSync(newPath, 'utf8') : this.init(newPath)
-    }
-    return subtree
-  }
-
-  public get(path: string) {
-    const segments = path.split(DirTree.separator)
-    let result = this.tree
-    for (const segment of segments) {
-      result = <FileTree>result[segment]
-    }
-    return result
-  }
-
-  public set(path: string, value: string | FileTree) {
-    const segments = path.split(DirTree.separator)
-    const last = segments.pop()
-    let tree = this.tree
-    for (const segment of segments) {
-      tree = <FileTree>(tree[segment] = tree[segment] || {})
-    }
-    tree[last] = value
-  }
-
-  public has(path: string) {
-    const segments = path.split(DirTree.separator)
-    let result = this.tree
-    for (const segment of segments) {
-      if (result = <FileTree>result[segment])
-        continue
-      return false
-    }
-    return true
-  }
-
-  public del(path: string) {
-    const segments = path.split(DirTree.separator)
-    const last = segments.pop()
-    let tree = this.tree
-    for (const segment of segments) {
-      tree = <FileTree>tree[segment]
-    }
-    delete tree[last]
-  }
-
-  get entryTree() {
-    return DirTree.generateEntryTree(this.tree)
-  }
-
-  static generateEntryTree(tree: FileTree) {
-    const entries: EntryTree = Object.keys(tree)
-    for (let i = 0; i < entries.length; i++) {
-      const element = entries[i]
-      const content = tree[<string>element]
-      if (typeof content === 'object') {
-        const sub = this.generateEntryTree(content)
-        sub.unshift(element)
-        entries.splice(i, 1, sub)
-      }
-    }
-    return entries
-  }
-}
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
new file mode 100644
index 0000000..b5672d3
--- /dev/null
+++ b/packages/dev-server/server/tree.ts
@@ -0,0 +1,85 @@
+import { readFileSync, readdirSync } from 'fs'
+import { join } from 'path'
+
+export interface FileTree {
+  [key: string]: string | FileTree
+}
+
+interface EntryTree extends Array<SubEntry> {}
+type SubEntry = EntryTree | string
+
+export class DirTree {
+  static separator = /[\/\\]/
+  public tree: FileTree
+
+  constructor(private filepath: string) {
+    this.tree = this.init(filepath)
+  }
+
+  private init(filepath: string): FileTree {
+    const children = readdirSync(filepath, { withFileTypes: true }), subtree: FileTree = {}
+    for (const child of children) {
+      const newPath = join(filepath, child.name)
+      subtree[child.name] = child.isFile() ? readFileSync(newPath, 'utf8') : this.init(newPath)
+    }
+    return subtree
+  }
+
+  public get(path: string) {
+    const segments = path.split(DirTree.separator)
+    let result = this.tree
+    for (const segment of segments) {
+      result = <FileTree>result[segment]
+    }
+    return result
+  }
+
+  public set(path: string, value: string | FileTree) {
+    const segments = path.split(DirTree.separator)
+    const last = segments.pop()
+    let tree = this.tree
+    for (const segment of segments) {
+      tree = <FileTree>(tree[segment] = tree[segment] || {})
+    }
+    tree[last] = value
+  }
+
+  public has(path: string) {
+    const segments = path.split(DirTree.separator)
+    let result = this.tree
+    for (const segment of segments) {
+      if (result = <FileTree>result[segment])
+        continue
+      return false
+    }
+    return true
+  }
+
+  public del(path: string) {
+    const segments = path.split(DirTree.separator)
+    const last = segments.pop()
+    let tree = this.tree
+    for (const segment of segments) {
+      tree = <FileTree>tree[segment]
+    }
+    delete tree[last]
+  }
+
+  get entryTree() {
+    return DirTree.generateEntryTree(this.tree)
+  }
+
+  static generateEntryTree(tree: FileTree) {
+    const entries: EntryTree = Object.keys(tree)
+    for (let i = 0; i < entries.length; i++) {
+      const element = entries[i]
+      const content = tree[<string>element]
+      if (typeof content === 'object') {
+        const sub = this.generateEntryTree(content)
+        sub.unshift(element)
+        entries.splice(i, 1, sub)
+      }
+    }
+    return entries
+  }
+}

From 754abcca294256f23fac0dff6630180de7697453 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 01:51:34 +0800
Subject: [PATCH 35/47] parse config

---
 packages/cli/commands/build.js        |   4 +-
 packages/cli/commands/edit.js         |   5 +-
 packages/cli/commands/watch.js        |   3 +-
 packages/cli/program.js               |   4 +-
 packages/dev-server/comp/editor.js    |   2 +-
 packages/dev-server/server/file.ts    |  28 +++---
 packages/dev-server/server/filter.ts  |  32 +++++++
 packages/dev-server/server/glob.ts    |  22 -----
 packages/dev-server/server/index.ts   |  22 +++--
 packages/dev-server/server/project.ts | 130 ++++++++++++++++----------
 packages/dev-server/server/tree.ts    |  17 ++--
 packages/test/data/marklet.json       |   7 +-
 12 files changed, 165 insertions(+), 111 deletions(-)
 create mode 100644 packages/dev-server/server/filter.ts
 delete mode 100644 packages/dev-server/server/glob.ts

diff --git a/packages/cli/commands/build.js b/packages/cli/commands/build.js
index 85ab819..83cf9f6 100644
--- a/packages/cli/commands/build.js
+++ b/packages/cli/commands/build.js
@@ -1,3 +1,5 @@
+const path = require('path')
+
 module.exports = program => program
   .command('build [filepath|dirpath]')
   .description('Build a marklet project into a website.')
@@ -7,6 +9,6 @@ module.exports = program => program
   .allowConfig()
   .action(function(filepath = '') {
     const options = this.getOptions()
-    options.filepath = filepath
+    options.filepath = path.resolve(process.cwd(), filepath)
     console.log(options)
   })
diff --git a/packages/cli/commands/edit.js b/packages/cli/commands/edit.js
index e72fe61..aa07888 100644
--- a/packages/cli/commands/edit.js
+++ b/packages/cli/commands/edit.js
@@ -1,4 +1,5 @@
 const open = require('opn')
+const util = require('../util')
 const server = require('@marklet/dev-server')
 
 module.exports = program => program
@@ -8,7 +9,9 @@ module.exports = program => program
   .allowConfig()
   .action(function(filepath) {
     const options = this.getOptions()
-    options.filepath = filepath
+    if (filepath) {
+      options.filepath = util.fullPath(filepath)
+    }
     server.edit(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)
diff --git a/packages/cli/commands/watch.js b/packages/cli/commands/watch.js
index bde2e29..98a3ac5 100644
--- a/packages/cli/commands/watch.js
+++ b/packages/cli/commands/watch.js
@@ -1,4 +1,5 @@
 const open = require('opn')
+const util = require('../util')
 const server = require('@marklet/dev-server')
 
 module.exports = program => program
@@ -8,7 +9,7 @@ module.exports = program => program
   .allowConfig()
   .action(function(filepath) {
     const options = this.getOptions()
-    options.filepath = filepath || process.cwd()
+    options.filepath = util.fullPath(filepath)
     server.watch(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)
diff --git a/packages/cli/program.js b/packages/cli/program.js
index 0be1ebc..5dbb5ce 100644
--- a/packages/cli/program.js
+++ b/packages/cli/program.js
@@ -32,8 +32,8 @@ Object.assign(Object.getPrototypeOf(program), {
       if (this.port) options.port = this.port
     }
     if (this._allowConfig) {
-      if (!options.config) options.config = {}
-      Object.assign(options.config, this.getConfig())
+      if (!options.parseOptions) options.parseOptions = {}
+      Object.assign(options.parseOptions, this.getConfig())
     }
     return options
   },
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index c2efad0..8b3a1e5 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -9,7 +9,7 @@ module.exports = {
     changed: false,
     config: {
       ...defaultConfig,
-      ...marklet.config,
+      ...marklet.parseOptions,
     },
   }),
 
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index 48ecdca..f0e5ff8 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -1,13 +1,15 @@
-import { EventEmitter } from 'events'
-import { readFileSync, watch, FSWatcher } from 'fs'
-import debounce from 'lodash.debounce'
 import { Server, Manager, WatchEventType } from './index'
+import debounce from 'lodash.debounce'
+import EventEmitter from 'events'
+import * as fs from 'fs'
 
 export const MARKUP_EXTENSIONS = ['.md', '.mkl']
 
 export default class FileManager extends EventEmitter implements Manager {
+  static EXTENSIONS = ['.md', '.mkl']
+  
   private content: string
-  private watcher: FSWatcher
+  private watcher: fs.FSWatcher
   private debouncedUpdate: () => void
   public msg: string
 
@@ -15,17 +17,17 @@ export default class FileManager extends EventEmitter implements Manager {
     super()
     this.update()
     this.debouncedUpdate = debounce(() => this.update(), 200)
-    this.watcher = watch(this.filepath, (type: WatchEventType) => {
+    this.watcher = fs.watch(this.filepath, (type: WatchEventType) => {
       if (type === 'rename') {
-        this.dispose()
+        this.dispose('Source file is gone.')
       } else {
         this.debouncedUpdate()
       }
     })
   }
 
-  private update(): void {
-    const temp = readFileSync(this.filepath, 'utf8')
+  private update() {
+    const temp = fs.readFileSync(this.filepath, 'utf8')
     if (this.content !== temp) {
       this.content = temp
       this.msg = JSON.stringify({
@@ -37,17 +39,15 @@ export default class FileManager extends EventEmitter implements Manager {
     }
   }
 
-  public bind(server: Server): this {
+  public bind(server: Server) {
     server.wsServer.on('connection', ws => ws.send(this.msg))
     this.on('update', msg => server.wsServer.broadcast(msg))
-    this.once('close', () => {
-      server.dispose('Source file is gone.')
-    })
+    this.once('close', reason => server.dispose(reason))
     return this
   }
 
-  public dispose(): void {
+  public dispose(reason = '') {
     this.watcher.close()
-    this.emit('close')
+    this.emit('close', reason)
   }
 }
diff --git a/packages/dev-server/server/filter.ts b/packages/dev-server/server/filter.ts
new file mode 100644
index 0000000..59575d8
--- /dev/null
+++ b/packages/dev-server/server/filter.ts
@@ -0,0 +1,32 @@
+import { makeRe } from 'minimatch'
+import { extname } from 'path'
+
+type StringLike = string | RegExp
+
+export default class FileFilter {
+  private extensions: string[]
+  private globs: RegExp[] = []
+
+  constructor(extensions: string[], ignores: StringLike[]) {
+    this.extensions = extensions.map(ext => ext.toLowerCase())
+    ignores.forEach((pattern) => {
+      if (typeof pattern === 'string') {
+        this.globs.push(makeRe(pattern, { flipNegate: true }))
+      } else {
+        this.globs.push(pattern)
+      }
+    })
+  }
+
+  public test(filename: string): boolean {
+    if (this.extensions.every(ext => extname(filename) !== ext)) return false
+    let result = true
+    for (const regexp of this.globs) {
+      if (regexp.test(filename)) {
+        result = false
+        break
+      }
+    }
+    return result
+  }
+}
diff --git a/packages/dev-server/server/glob.ts b/packages/dev-server/server/glob.ts
deleted file mode 100644
index cfeabcd..0000000
--- a/packages/dev-server/server/glob.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { makeRe } from 'minimatch'
-
-export default function(ignores: string[]): (name: string) => boolean {
-  const globs: RegExp[] = []
-  ignores.forEach((pattern) => {
-    if (typeof pattern === 'string') {
-      globs.push(makeRe(pattern, { flipNegate: true }))
-    } else {
-      globs.push(pattern)
-    }
-  })
-  return (name) => {
-    let result = true
-    for (const regexp of globs) {
-      if (regexp.test(name)) {
-        result = false
-        break
-      }
-    }
-    return result
-  }
-}
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 2d98b59..8f7d0f2 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -4,11 +4,11 @@ import * as url from 'url'
 import * as fs from 'fs'
 import ws from 'ws'
 
-import ProjectManager, { CONFIG_EXTENSIONS } from './project'
-import FileManager, { MARKUP_EXTENSIONS } from './file'
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './util'
 import { EventEmitter } from 'events'
+import ProjectManager from './project'
+import FileManager from './file'
 
 export const DEFAULT_PORT = 10826
 
@@ -37,19 +37,19 @@ export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
-  config?: LexerConfig
+  parseOptions?: LexerConfig
 }
 
 class MarkletServer<T extends ServerType = ServerType> {
   public port: number
   public manager: MarkletManager
   public sourceType: SourceType
-  public config: LexerConfig
+  public parseOptions: LexerConfig
   public wsServer: ws.Server
   public httpServer: http.Server
 
   constructor(public serverType: T, public filepath = '', options: ServerOptions = {}) {
-    this.config = options.config || {}
+    this.parseOptions = options.parseOptions || {}
     this.port = options.port || DEFAULT_PORT
     this.createServer()
     this.setupManager()
@@ -83,7 +83,7 @@ class MarkletServer<T extends ServerType = ServerType> {
           marklet.serverType = '${this.serverType}'
           marklet.filepath = ${JSON.stringify(this.filepath)}
           marklet.sourceType = '${this.sourceType}'
-          marklet.config = ${JSON.stringify(this.config)}
+          marklet.parseOptions = ${JSON.stringify(this.parseOptions)}
         `)
         return
       } else {
@@ -104,23 +104,25 @@ class MarkletServer<T extends ServerType = ServerType> {
   private setupManager() {
     if (!this.filepath) {
       this.sourceType = 'file'
-      // FIXME: A file manager is also needed so as to handle client requests.
+      // FIXME: Is a file manager is needed here so as to handle client requests?
       return
     } else if (!fs.existsSync(this.filepath)) {
       throw new Error(`${this.filepath} does not exist.`)
     }
     if (fs.statSync(this.filepath).isFile()) {
       const ext = path.extname(this.filepath).toLowerCase()
-      if (CONFIG_EXTENSIONS.includes(ext)) {
+      if (ProjectManager.EXTENSIONS.includes(ext)) {
         this.sourceType = 'project'
         this.manager = new ProjectManager(this.filepath).bind(this)
-      } else if (MARKUP_EXTENSIONS.includes(ext)) {
+      } else if (FileManager.EXTENSIONS.includes(ext)) {
         this.sourceType = 'file'
         this.manager = new FileManager(this.filepath).bind(this)
+      } else {
+        throw new Error('Cannot recognize the file extension.')
       }
     } else {
       const configPathWithoutExt = path.join(this.filepath, 'marklet')
-      for (const ext of CONFIG_EXTENSIONS) {
+      for (const ext of ProjectManager.EXTENSIONS) {
         const configPath = configPathWithoutExt + ext
         if (!fs.existsSync(configPath)) continue
         if (fs.statSync(configPath).isFile()) {
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 08281f3..4d7217d 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,74 +1,98 @@
 import { Server, Manager, WatchEventType } from './index'
-import { dirname, join, basename, extname } from 'path'
-import { readFileSync, watch, FSWatcher } from 'fs'
-import { FileTree, DirTree } from './tree'
-import { EventEmitter } from 'events'
-import { safeLoad } from 'js-yaml'
 import debounce from 'lodash.debounce'
-import filter from './glob'
+import EventEmitter from 'events'
+import FileFilter from './filter'
+import DirTree from './tree'
+import * as yaml from 'js-yaml'
+import * as path from 'path'
+import * as fs from 'fs'
 
-interface ProjectConfig {
-  basedir?: string
+export interface ProjectConfig {
+  baseDir?: string
+  extensions?: string[]
   ignore?: string[]
 }
 
 const JSON_EXTENSIONS = ['.js', '.json']
 const YAML_EXTENSIONS = ['.yml', '.yaml']
-export const CONFIG_EXTENSIONS = [
-  ...JSON_EXTENSIONS,
-  ...YAML_EXTENSIONS,
-]
 
 export default class ProjectManager extends EventEmitter implements Manager {
-  private watcher: FSWatcher
+  static EXTENSIONS = [...JSON_EXTENSIONS, ...YAML_EXTENSIONS]
+
   private tree: DirTree
+  private filter: FileFilter
+  private config: ProjectConfig
+  private folderWatcher: fs.FSWatcher
+  private configWatcher: fs.FSWatcher
   private debouncedUpdate: () => void
   private delSet: Set<string> = new Set()
   private addSet: Set<string> = new Set()
-  private config: any
+  private msgQueue: string[] = []
+  private configUpdated: boolean
   private basepath: string
   private basename: string
-  private configUpdated: boolean
-  public entriesMessage: string
-  public optionMessage: string
+  private extension: string
 
   constructor(private filepath: string) {
     super()
-    this.basepath = dirname(filepath)
-    this.basename = basename(filepath)
-    this.tree = new DirTree(this.basepath)
+    this.basepath = path.dirname(filepath)
+    this.basename = path.basename(filepath)
+    this.extension = path.extname(filepath).toLowerCase()
+
+    const config = this.getConfig()
+    this.filter = new FileFilter(config.extensions, config.ignore)
+    this.tree = new DirTree(config.baseDir, this.filter)
 
-    this.getConfig()
     this.update()
     this.debouncedUpdate = debounce(this.update.bind(this), 200)
-    this.watcher = watch(this.basepath, {
+
+    this.folderWatcher = fs.watch(this.config.baseDir, {
       recursive: true
     }, (type: WatchEventType, filename) => {
+      if (!this.filter.test(filename)) return
       if (type === 'rename' && this.tree.has(filename)) {
         this.delSet.add(filename)
       } else {
         this.addSet.add(filename)
-        this.configUpdated = filename === this.basename
       }
       this.debouncedUpdate()
     })
+
+    this.configWatcher = fs.watch(this.filepath, (type: WatchEventType) => {
+      if (type === 'rename') {
+        this.dispose('Configuration file has been removed or renamed.')
+      } else {
+        this.getConfig()
+        this.debouncedUpdate()
+      }
+    })
   }
 
-  private getConfig(): any {
-    const ext = extname(this.filepath).toLowerCase()
+  private getConfig() {
+    const beforeCreate = !this.config
+    function takeTry(task: Function) {
+      try {
+        return task()
+      } catch (error) {
+        if (beforeCreate) throw error
+      }
+    }
+
     let config: ProjectConfig
-    if (JSON_EXTENSIONS.includes(ext)) {
+    if (JSON_EXTENSIONS.includes(this.extension)) {
       require.cache[this.filepath] = null
-      config = require(this.filepath)
-      // FIXME: catch error
-    } else if (YAML_EXTENSIONS.includes(ext)) {
-      config = safeLoad(readFileSync(this.filepath).toString())
-      // FIXME: catch error
-    } else {
-      throw new Error('Cannot recognize file extension for configuration file.')
+      takeTry(() => config = require(this.filepath))
+    } else if (YAML_EXTENSIONS.includes(this.extension)) {
+      takeTry(() => config = yaml.safeLoad(fs.readFileSync(this.filepath).toString()))
     }
-    console.log(this.filepath, require(this.filepath))
-    this.config = config
+    config.baseDir = path.resolve(this.basepath, config.baseDir || '')
+    if (!config.extensions) config.extensions = ['.mkl']
+    if (!config.ignore) config.ignore = []
+    if (this.filepath.startsWith(config.baseDir)) {
+      config.ignore.push(this.filepath.slice(config.baseDir.length + 1))
+    }
+    this.configUpdated = true
+    return this.config = config
   }
 
   private update() {
@@ -78,26 +102,31 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.delSet.clear()
     for (const item of this.addSet) {
       try {
-        this.tree.set(item, readFileSync(join(this.basepath, item), 'utf8'))        
+        this.tree.set(item, fs.readFileSync(path.join(this.config.baseDir, item), 'utf8'))        
       } catch (_) {}
     }
     this.addSet.clear()
-    this.emit('update', this.entriesMessage = JSON.stringify({
+    const entriesMessage = JSON.stringify({
       type: 'entries',
       tree: this.tree.entryTree,
-    }))
+    })
+    this.msgQueue.push(entriesMessage)
+    this.emit('update', entriesMessage)
     if (this.configUpdated) {
-      this.emit('update', this.optionMessage = JSON.stringify({
-        type: 'options',
-        tree: this.tree.get(this.basename) // parse it
-      }))
+      const configMessage = JSON.stringify({
+        type: 'config',
+        config: this.config,
+      })
+      this.msgQueue.push(configMessage)
+      this.emit('update', configMessage)
       this.configUpdated = false
     }
+    // FIXME: events when a file content was changed
   }
 
   public bind(server: Server): this {
-    server.wsServer.on('connection', ws => {
-      ws.send(this.entriesMessage)
+    server.wsServer.on('connection', (ws) => {
+      this.msgQueue.forEach(msg => ws.send(msg))
       ws.on('message', data => {
         const parsed = JSON.parse(<string>data)
         switch (parsed.type) {
@@ -108,18 +137,17 @@ export default class ProjectManager extends EventEmitter implements Manager {
       })
     })
     this.on('update', msg => server.wsServer.broadcast(msg))
-    this.once('close', () => {
-      server.dispose('Source file is gone.')
-    })
+    this.once('close', reason => server.dispose(reason))
     return this
   }
 
-  public getContent(path: string): FileTree {
+  public getContent(path: string) {
     return this.tree.get(path)
   }
 
-  public dispose(): void {
-    this.watcher.close()
-    this.emit('close')
+  public dispose(reason = '') {
+    this.folderWatcher.close()
+    this.configWatcher.close()
+    this.emit('close', reason)
   }
 }
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
index b5672d3..34e124e 100644
--- a/packages/dev-server/server/tree.ts
+++ b/packages/dev-server/server/tree.ts
@@ -1,5 +1,6 @@
-import { readFileSync, readdirSync } from 'fs'
-import { join } from 'path'
+import * as fs from 'fs'
+import * as path from 'path'
+import FileFilter from './filter'
 
 export interface FileTree {
   [key: string]: string | FileTree
@@ -8,19 +9,21 @@ export interface FileTree {
 interface EntryTree extends Array<SubEntry> {}
 type SubEntry = EntryTree | string
 
-export class DirTree {
+export default class DirTree {
   static separator = /[\/\\]/
   public tree: FileTree
 
-  constructor(private filepath: string) {
+  constructor(private filepath: string, private filter: FileFilter) {
     this.tree = this.init(filepath)
   }
 
   private init(filepath: string): FileTree {
-    const children = readdirSync(filepath, { withFileTypes: true }), subtree: FileTree = {}
+    const children = fs.readdirSync(filepath, { withFileTypes: true })
+    const subtree: FileTree = {}
     for (const child of children) {
-      const newPath = join(filepath, child.name)
-      subtree[child.name] = child.isFile() ? readFileSync(newPath, 'utf8') : this.init(newPath)
+      const newPath = path.join(filepath, child.name)
+      if (!this.filter.test(newPath)) continue
+      subtree[child.name] = child.isFile() ? fs.readFileSync(newPath, 'utf8') : this.init(newPath)
     }
     return subtree
   }
diff --git a/packages/test/data/marklet.json b/packages/test/data/marklet.json
index 9e26dfe..d901866 100644
--- a/packages/test/data/marklet.json
+++ b/packages/test/data/marklet.json
@@ -1 +1,6 @@
-{}
\ No newline at end of file
+{
+  "extensions": [
+    ".md",
+    ".mkl"
+  ]
+}
\ No newline at end of file

From 8d697c4be5a0385d71e0c163969035f265adee21 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 01:57:24 +0800
Subject: [PATCH 36/47] add some adjustments

---
 packages/dev-server/server/filter.ts  | 2 +-
 packages/dev-server/server/project.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dev-server/server/filter.ts b/packages/dev-server/server/filter.ts
index 59575d8..02e5943 100644
--- a/packages/dev-server/server/filter.ts
+++ b/packages/dev-server/server/filter.ts
@@ -1,7 +1,7 @@
 import { makeRe } from 'minimatch'
 import { extname } from 'path'
 
-type StringLike = string | RegExp
+export type StringLike = string | RegExp
 
 export default class FileFilter {
   private extensions: string[]
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 4d7217d..5beb2ab 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,7 +1,7 @@
 import { Server, Manager, WatchEventType } from './index'
+import FileFilter, { StringLike } from './filter'
 import debounce from 'lodash.debounce'
 import EventEmitter from 'events'
-import FileFilter from './filter'
 import DirTree from './tree'
 import * as yaml from 'js-yaml'
 import * as path from 'path'
@@ -10,7 +10,7 @@ import * as fs from 'fs'
 export interface ProjectConfig {
   baseDir?: string
   extensions?: string[]
-  ignore?: string[]
+  ignore?: StringLike[]
 }
 
 const JSON_EXTENSIONS = ['.js', '.json']

From c662e2215c3ea776fa8b8be1f27c17e50776eaaf Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 02:28:31 +0800
Subject: [PATCH 37/47] fix test & check parse options

---
 packages/cli/package.json             |  1 -
 packages/dev-server/package.json      |  1 +
 packages/dev-server/server/project.ts | 49 ++++++++++++++++++++-------
 packages/test/index.js                | 11 +++---
 4 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/packages/cli/package.json b/packages/cli/package.json
index 96a53d4..8e471fa 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -23,7 +23,6 @@
     "@marklet/parser": "^1.5.2",
     "chalk": "^2.4.1",
     "commander": "^2.18.0",
-    "js-yaml": "^3.12.0",
     "opn": "^5.4.0"
   }
 }
\ No newline at end of file
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 860ef01..14c841e 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "@marklet/parser": "^1.5.2",
     "@marklet/renderer": "^1.3.2",
+    "fast-deep-equal": "^2.0.1",
     "lodash.debounce": "^4.0.8",
     "js-yaml": "^3.12.0",
     "minimatch": "^3.0.4",
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 5beb2ab..9a6db67 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,6 +1,8 @@
 import { Server, Manager, WatchEventType } from './index'
 import FileFilter, { StringLike } from './filter'
+import { LexerConfig } from '@marklet/parser'
 import debounce from 'lodash.debounce'
+import equal from 'fast-deep-equal'
 import EventEmitter from 'events'
 import DirTree from './tree'
 import * as yaml from 'js-yaml'
@@ -11,23 +13,31 @@ export interface ProjectConfig {
   baseDir?: string
   extensions?: string[]
   ignore?: StringLike[]
+  parseOptions?: LexerConfig
 }
 
 const JSON_EXTENSIONS = ['.js', '.json']
 const YAML_EXTENSIONS = ['.yml', '.yaml']
 
+interface ServerMessage {
+  type: string
+  [ key: string ]: any
+}
+
 export default class ProjectManager extends EventEmitter implements Manager {
   static EXTENSIONS = [...JSON_EXTENSIONS, ...YAML_EXTENSIONS]
 
   private tree: DirTree
+  private server: Server
   private filter: FileFilter
   private config: ProjectConfig
+  private oldConfig: ProjectConfig
   private folderWatcher: fs.FSWatcher
   private configWatcher: fs.FSWatcher
   private debouncedUpdate: () => void
   private delSet: Set<string> = new Set()
   private addSet: Set<string> = new Set()
-  private msgQueue: string[] = []
+  private msgQueue: ServerMessage[] = []
   private configUpdated: boolean
   private basepath: string
   private basename: string
@@ -43,6 +53,19 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.filter = new FileFilter(config.extensions, config.ignore)
     this.tree = new DirTree(config.baseDir, this.filter)
 
+    this.on('update', (data) => {
+      if (!this.server) {
+        let index = this.msgQueue.findIndex(({ type }) => type === data.type)
+        if (index >= 0) {
+          this.msgQueue[index] = data
+        } else {
+          this.msgQueue.push(data)
+        }
+      } else {
+        this.server.wsServer.broadcast(JSON.stringify(data))
+      }
+    })
+
     this.update()
     this.debouncedUpdate = debounce(this.update.bind(this), 200)
 
@@ -69,6 +92,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
   }
 
   private getConfig() {
+    this.oldConfig = this.config || {}
     const beforeCreate = !this.config
     function takeTry(task: Function) {
       try {
@@ -88,6 +112,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
     config.baseDir = path.resolve(this.basepath, config.baseDir || '')
     if (!config.extensions) config.extensions = ['.mkl']
     if (!config.ignore) config.ignore = []
+    if (!config.parseOptions) config.parseOptions = {}
     if (this.filepath.startsWith(config.baseDir)) {
       config.ignore.push(this.filepath.slice(config.baseDir.length + 1))
     }
@@ -106,27 +131,27 @@ export default class ProjectManager extends EventEmitter implements Manager {
       } catch (_) {}
     }
     this.addSet.clear()
-    const entriesMessage = JSON.stringify({
+    this.emit('update', {
       type: 'entries',
       tree: this.tree.entryTree,
     })
-    this.msgQueue.push(entriesMessage)
-    this.emit('update', entriesMessage)
     if (this.configUpdated) {
-      const configMessage = JSON.stringify({
-        type: 'config',
-        config: this.config,
-      })
-      this.msgQueue.push(configMessage)
-      this.emit('update', configMessage)
+      if (!equal(this.config.parseOptions, this.oldConfig.parseOptions)) {
+        this.emit('update', {
+          type: 'parseOptions',
+          config: this.config,
+        })
+      }
       this.configUpdated = false
     }
     // FIXME: events when a file content was changed
   }
 
   public bind(server: Server): this {
+    this.server = server
+    this.once('close', reason => server.dispose(reason))
     server.wsServer.on('connection', (ws) => {
-      this.msgQueue.forEach(msg => ws.send(msg))
+      this.msgQueue.forEach(msg => ws.send(JSON.stringify(msg)))
       ws.on('message', data => {
         const parsed = JSON.parse(<string>data)
         switch (parsed.type) {
@@ -136,8 +161,6 @@ export default class ProjectManager extends EventEmitter implements Manager {
         }
       })
     })
-    this.on('update', msg => server.wsServer.broadcast(msg))
-    this.once('close', reason => server.dispose(reason))
     return this
   }
 
diff --git a/packages/test/index.js b/packages/test/index.js
index 6309ba3..86992f8 100644
--- a/packages/test/index.js
+++ b/packages/test/index.js
@@ -5,10 +5,13 @@ const fs = require('fs')
 
 const lexer = new DocumentLexer()
 
-const testFiles = fs.readdirSync(path.join(__dirname, 'data')).map((file) => ({
-  name: file.slice(0, -4),
-  content: fs.readFileSync(path.join(__dirname, 'data', file)).toString()
-}))
+const testFiles = fs
+  .readdirSync(path.join(__dirname, 'data'))
+  .filter(file => path.extname(file) === '.mkl')
+  .map((file) => ({
+    name: file.slice(0, -4),
+    content: fs.readFileSync(path.join(__dirname, 'data', file)).toString()
+  }))
 
 const parsedFiles = testFiles.map((file) => ({
   name: file.name,

From 9b75c8eb1ef89266d6bc1786434692923500e6ad Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 10:40:23 +0800
Subject: [PATCH 38/47] fix some bugs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 修复一处 serverType 写成 type 的问题
2. 修复 test 无法获取深层 data 的问题
3. 修复 dirtree 错误过滤文件夹的问题
---
 packages/dev-server/server/index.html          |  2 +-
 packages/dev-server/server/tree.ts             |  9 +++++++--
 packages/test/data/{ => syntax}/codeblock.mkl  |  0
 packages/test/data/{ => syntax}/inlinelist.mkl |  0
 packages/test/data/{ => syntax}/list.mkl       |  0
 packages/test/data/{ => syntax}/section.mkl    |  0
 packages/test/data/{ => syntax}/table.mkl      |  0
 packages/test/data/{ => syntax}/text.mkl       |  0
 packages/test/index.js                         | 16 ++++++++++++++--
 9 files changed, 22 insertions(+), 5 deletions(-)
 rename packages/test/data/{ => syntax}/codeblock.mkl (100%)
 rename packages/test/data/{ => syntax}/inlinelist.mkl (100%)
 rename packages/test/data/{ => syntax}/list.mkl (100%)
 rename packages/test/data/{ => syntax}/section.mkl (100%)
 rename packages/test/data/{ => syntax}/table.mkl (100%)
 rename packages/test/data/{ => syntax}/text.mkl (100%)

diff --git a/packages/dev-server/server/index.html b/packages/dev-server/server/index.html
index 61576ed..847481a 100644
--- a/packages/dev-server/server/index.html
+++ b/packages/dev-server/server/index.html
@@ -18,7 +18,7 @@
     <div id="app"></div>
     <script>
       marklet.create('#app')
-      if (marklet.type === 'edit') {
+      if (marklet.serverType === 'edit') {
         require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
         require(['vs/editor/editor.main'], () => {
           marklet.$emit('monaco.loaded', monaco)
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
index 34e124e..2672747 100644
--- a/packages/dev-server/server/tree.ts
+++ b/packages/dev-server/server/tree.ts
@@ -22,8 +22,13 @@ export default class DirTree {
     const subtree: FileTree = {}
     for (const child of children) {
       const newPath = path.join(filepath, child.name)
-      if (!this.filter.test(newPath)) continue
-      subtree[child.name] = child.isFile() ? fs.readFileSync(newPath, 'utf8') : this.init(newPath)
+      if (child.isFile()) {
+        if (this.filter.test(newPath)) {
+          subtree[child.name] = fs.readFileSync(newPath, 'utf8')
+        }
+      } else {
+        subtree[child.name] = this.init(newPath)
+      }
     }
     return subtree
   }
diff --git a/packages/test/data/codeblock.mkl b/packages/test/data/syntax/codeblock.mkl
similarity index 100%
rename from packages/test/data/codeblock.mkl
rename to packages/test/data/syntax/codeblock.mkl
diff --git a/packages/test/data/inlinelist.mkl b/packages/test/data/syntax/inlinelist.mkl
similarity index 100%
rename from packages/test/data/inlinelist.mkl
rename to packages/test/data/syntax/inlinelist.mkl
diff --git a/packages/test/data/list.mkl b/packages/test/data/syntax/list.mkl
similarity index 100%
rename from packages/test/data/list.mkl
rename to packages/test/data/syntax/list.mkl
diff --git a/packages/test/data/section.mkl b/packages/test/data/syntax/section.mkl
similarity index 100%
rename from packages/test/data/section.mkl
rename to packages/test/data/syntax/section.mkl
diff --git a/packages/test/data/table.mkl b/packages/test/data/syntax/table.mkl
similarity index 100%
rename from packages/test/data/table.mkl
rename to packages/test/data/syntax/table.mkl
diff --git a/packages/test/data/text.mkl b/packages/test/data/syntax/text.mkl
similarity index 100%
rename from packages/test/data/text.mkl
rename to packages/test/data/syntax/text.mkl
diff --git a/packages/test/index.js b/packages/test/index.js
index 86992f8..71461e6 100644
--- a/packages/test/index.js
+++ b/packages/test/index.js
@@ -5,8 +5,20 @@ const fs = require('fs')
 
 const lexer = new DocumentLexer()
 
-const testFiles = fs
-  .readdirSync(path.join(__dirname, 'data'))
+function traverse(basedir) {
+  return Array.from(function* walk(filename = '') {
+    const filepath = path.join(basedir, filename)
+    if (fs.statSync(filepath).isFile()) {
+      yield filename
+    } else {
+      for (const name of fs.readdirSync(filepath)) {
+        yield* walk(path.join(filename, name))
+      }
+    }
+  }())
+}
+
+const testFiles = traverse(path.join(__dirname, 'data'))
   .filter(file => path.extname(file) === '.mkl')
   .map((file) => ({
     name: file.slice(0, -4),

From 2b9e3c47b44c0f37ef290204ce1e4f0708fe04ed Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 11:41:17 +0800
Subject: [PATCH 39/47] file init

---
 packages/dev-server/client/file.ts    | 75 +++++++++++++++++++++++++++
 packages/dev-server/client/index.ts   |  7 ++-
 packages/dev-server/server/file.ts    |  4 +-
 packages/dev-server/server/index.ts   | 30 ++++++++---
 packages/dev-server/server/project.ts | 26 ++++++++--
 packages/dev-server/server/tree.ts    |  4 +-
 packages/test/data/marklet.json       |  6 ---
 packages/test/data/marklet.yml        |  9 ++++
 8 files changed, 139 insertions(+), 22 deletions(-)
 create mode 100644 packages/dev-server/client/file.ts
 delete mode 100644 packages/test/data/marklet.json
 create mode 100644 packages/test/data/marklet.yml

diff --git a/packages/dev-server/client/file.ts b/packages/dev-server/client/file.ts
new file mode 100644
index 0000000..58a7c52
--- /dev/null
+++ b/packages/dev-server/client/file.ts
@@ -0,0 +1,75 @@
+import Monaco from 'monaco-editor'
+import Marklet from './index'
+
+declare global {
+  export const monaco: typeof Monaco
+  export const marklet: typeof Marklet
+}
+
+let count = 0
+
+export interface FileOptions {
+  title?: string
+  value?: string
+  path?: string
+  origin?: string
+  id?: string
+  changed?: boolean
+}
+
+export default class MarkletFile {
+  public value: string
+  public title: string
+  public path: string
+  public origin: string
+  public changed: boolean
+  public id: string
+
+  private model: Monaco.editor.ITextModel
+
+  constructor(options: FileOptions = {}) {
+    this.value = options.value
+    this.path = options.path
+    this.origin = options.origin
+    this.changed = options.changed
+    this.title = options.title || `Untitled ${++count}`
+    this.id = options.id || Math.floor(Math.random() * 36 ** 6).toString(36).padStart(6, '0')
+    Object.defineProperty(this, 'model', {
+      configurable: false,
+      value: monaco.editor.createModel(this.value, 'marklet')
+    })
+  }
+
+  onModelChange(listener: (event: Monaco.editor.IModelContentChangedEvent) => void) {
+    this.model.onDidChangeContent(listener)
+  }
+
+  dispose() {
+    this.model.dispose()
+  }
+
+  checkChange(data: string) {
+    if (data !== undefined) this.origin = data
+    this.value = this.model.getValue(
+      marklet.editOptions.line_ending === 'LF' ? 1 : 2
+    )
+    this.changed = this.origin !== this.value
+  }
+
+  isEmpty() {
+    return this.path === null && this.origin === '' && this.model.getValue(1) === ''
+  }
+
+  save() {
+    // FIXME
+  }
+
+  toJSON() {
+    return {
+      title: this.title,
+      value: this.value,
+      path: this.path,
+      id: this.id,
+    }
+  }
+}
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 758ecb1..68e7a9b 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -1,9 +1,10 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
+import MarkletFile from './file'
 import defineLanguage from './language'
 import * as renderer from '@marklet/renderer'
 import { LexerConfig } from '@marklet/parser'
-import { SourceType, ServerType } from '../server'
+import { SourceType, ServerType, EditorConfig } from '../server'
 
 declare global {
   export const Vue: typeof VueConstructor
@@ -118,9 +119,11 @@ export default new class Marklet {
   app: VueConstructor
   serverType: ServerType
   sourceType: SourceType
-  config: LexerConfig
+  editOptions: EditorConfig
+  parseOptions: LexerConfig
   events = eventBus
   client = client
+  File = MarkletFile
   
   create(el: string | HTMLElement) {
     document.title = 'Marklet - ' + typeMap[this.serverType]
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index f0e5ff8..a45497c 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -19,7 +19,7 @@ export default class FileManager extends EventEmitter implements Manager {
     this.debouncedUpdate = debounce(() => this.update(), 200)
     this.watcher = fs.watch(this.filepath, (type: WatchEventType) => {
       if (type === 'rename') {
-        this.dispose('Source file is gone.')
+        this.dispose('Source file has been removed.')
       } else {
         this.debouncedUpdate()
       }
@@ -32,7 +32,7 @@ export default class FileManager extends EventEmitter implements Manager {
       this.content = temp
       this.msg = JSON.stringify({
         type: 'document',
-        filepath: this.filepath,
+        path: this.filepath,
         data: this.content,
       })
       this.emit('update', this.msg)
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index 8f7d0f2..f8d0192 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -26,6 +26,10 @@ ws.Server.prototype.broadcast = function (data) {
   })
 }
 
+export interface EditorConfig {
+  line_ending?: 'LF' | 'CRLF'
+}
+
 interface MarkletManager extends EventEmitter {
   bind(server: MarkletServer): this
   dispose(): void
@@ -37,19 +41,31 @@ export type WatchEventType = 'rename' | 'change'
 
 interface ServerOptions {
   port?: number
+  editOptions?: EditorConfig
   parseOptions?: LexerConfig
 }
 
+function assignment(dataMap: Record<string, any>) {
+  return `\
+(function(marklet) {
+${Object.keys(dataMap).map((key) => `\
+  marklet.${key} = ${JSON.stringify(dataMap[key])}
+`).join('')}\
+})(marklet)`
+}
+
 class MarkletServer<T extends ServerType = ServerType> {
   public port: number
   public manager: MarkletManager
   public sourceType: SourceType
+  public editOptions: EditorConfig
   public parseOptions: LexerConfig
   public wsServer: ws.Server
   public httpServer: http.Server
 
   constructor(public serverType: T, public filepath = '', options: ServerOptions = {}) {
     this.parseOptions = options.parseOptions || {}
+    this.editOptions = options.editOptions || {}
     this.port = options.port || DEFAULT_PORT
     this.createServer()
     this.setupManager()
@@ -79,12 +95,13 @@ class MarkletServer<T extends ServerType = ServerType> {
           return
         }
       } else if (pathname === 'initialize.js') {
-        handleData(`
-          marklet.serverType = '${this.serverType}'
-          marklet.filepath = ${JSON.stringify(this.filepath)}
-          marklet.sourceType = '${this.sourceType}'
-          marklet.parseOptions = ${JSON.stringify(this.parseOptions)}
-        `)
+        handleData(assignment({
+          filepath: this.filepath,
+          serverType: this.serverType,
+          sourceType: this.sourceType,
+          editOptions: this.editOptions,
+          parseOptions: this.parseOptions,
+        }))
         return
       } else {
         filepath = path.join(__dirname, '..', pathname || 'index.html')
@@ -147,6 +164,7 @@ export { MarkletServer as Server, MarkletManager as Manager }
 
 export interface WatchOptions extends ServerOptions {
   filepath: string
+  editOptions: never
 }
 
 export function watch(options: WatchOptions): MarkletServer<'watch'> {
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 9a6db67..138e210 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,4 +1,4 @@
-import { Server, Manager, WatchEventType } from './index'
+import { Server, Manager, WatchEventType, EditorConfig } from './index'
 import FileFilter, { StringLike } from './filter'
 import { LexerConfig } from '@marklet/parser'
 import debounce from 'lodash.debounce'
@@ -13,6 +13,7 @@ export interface ProjectConfig {
   baseDir?: string
   extensions?: string[]
   ignore?: StringLike[]
+  editOptions?: EditorConfig
   parseOptions?: LexerConfig
 }
 
@@ -30,6 +31,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
   private tree: DirTree
   private server: Server
   private filter: FileFilter
+  private rawConfig: string
   private config: ProjectConfig
   private oldConfig: ProjectConfig
   private folderWatcher: fs.FSWatcher
@@ -83,7 +85,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
 
     this.configWatcher = fs.watch(this.filepath, (type: WatchEventType) => {
       if (type === 'rename') {
-        this.dispose('Configuration file has been removed or renamed.')
+        this.dispose('Configuration file has been removed.')
       } else {
         this.getConfig()
         this.debouncedUpdate()
@@ -103,15 +105,17 @@ export default class ProjectManager extends EventEmitter implements Manager {
     }
 
     let config: ProjectConfig
+    this.rawConfig = fs.readFileSync(this.filepath).toString()
     if (JSON_EXTENSIONS.includes(this.extension)) {
       require.cache[this.filepath] = null
       takeTry(() => config = require(this.filepath))
     } else if (YAML_EXTENSIONS.includes(this.extension)) {
-      takeTry(() => config = yaml.safeLoad(fs.readFileSync(this.filepath).toString()))
+      takeTry(() => config = yaml.safeLoad(this.rawConfig))
     }
     config.baseDir = path.resolve(this.basepath, config.baseDir || '')
     if (!config.extensions) config.extensions = ['.mkl']
     if (!config.ignore) config.ignore = []
+    if (!config.editOptions) config.editOptions = {}
     if (!config.parseOptions) config.parseOptions = {}
     if (this.filepath.startsWith(config.baseDir)) {
       config.ignore.push(this.filepath.slice(config.baseDir.length + 1))
@@ -133,13 +137,25 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.addSet.clear()
     this.emit('update', {
       type: 'entries',
+      path: this.config.baseDir,
       tree: this.tree.entryTree,
     })
     if (this.configUpdated) {
+      this.emit('update', {
+        type: 'config',
+        config: this.config,
+        content: this.rawConfig,
+      })
       if (!equal(this.config.parseOptions, this.oldConfig.parseOptions)) {
         this.emit('update', {
-          type: 'parseOptions',
-          config: this.config,
+          type: 'config.parseOptions',
+          options: this.config.parseOptions,
+        })
+      }
+      if (!equal(this.config.editOptions, this.oldConfig.editOptions)) {
+        this.emit('update', {
+          type: 'config.editOptions',
+          options: this.config.editOptions,
         })
       }
       this.configUpdated = false
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
index 2672747..9698ec2 100644
--- a/packages/dev-server/server/tree.ts
+++ b/packages/dev-server/server/tree.ts
@@ -74,7 +74,9 @@ export default class DirTree {
   }
 
   get entryTree() {
-    return DirTree.generateEntryTree(this.tree)
+    const rootTree = DirTree.generateEntryTree(this.tree)
+    rootTree.unshift(path.basename(this.filepath))
+    return rootTree
   }
 
   static generateEntryTree(tree: FileTree) {
diff --git a/packages/test/data/marklet.json b/packages/test/data/marklet.json
deleted file mode 100644
index d901866..0000000
--- a/packages/test/data/marklet.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extensions": [
-    ".md",
-    ".mkl"
-  ]
-}
\ No newline at end of file
diff --git a/packages/test/data/marklet.yml b/packages/test/data/marklet.yml
new file mode 100644
index 0000000..b491ef7
--- /dev/null
+++ b/packages/test/data/marklet.yml
@@ -0,0 +1,9 @@
+extensions:
+  - .md
+  - .mkl
+
+editOptions:
+  line_ending: LF
+
+parseOptions:
+  default_language: marklet
\ No newline at end of file

From 84f07837e16d962bc86cba83d7d9378bb722edb3 Mon Sep 17 00:00:00 2001
From: jjyyxx <obfishstudio@gmail.com>
Date: Sun, 28 Oct 2018 12:04:35 +0800
Subject: [PATCH 40/47] fix a critical typo

---
 packages/dev-server/themes/dark.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dev-server/themes/dark.yaml b/packages/dev-server/themes/dark.yaml
index 0913784..127dadd 100644
--- a/packages/dev-server/themes/dark.yaml
+++ b/packages/dev-server/themes/dark.yaml
@@ -76,4 +76,4 @@ colors:
 
 rules:
   - token: heading
-    forground: 'a6e22e'
+    foreground: 'a6e22e'

From 37d5599c4ef030bb782b8931338c3de8776a48b3 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Sun, 28 Oct 2018 15:37:45 +0800
Subject: [PATCH 41/47] explorer

---
 packages/dev-server/client/file.ts     | 99 +++++++++++++-------------
 packages/dev-server/client/index.ts    |  4 +-
 packages/dev-server/comp/app.vue       | 12 ++--
 packages/dev-server/comp/editor.js     | 16 ++++-
 packages/dev-server/comp/tree.vue      | 35 +++++++++
 packages/dev-server/server/project.ts  | 18 ++---
 packages/dev-server/server/tree.ts     | 36 ++++++----
 packages/dev-server/themes/dark.scss   |  1 +
 packages/dev-server/themes/simple.scss |  1 +
 9 files changed, 143 insertions(+), 79 deletions(-)
 create mode 100644 packages/dev-server/comp/tree.vue

diff --git a/packages/dev-server/client/file.ts b/packages/dev-server/client/file.ts
index 58a7c52..6459bc5 100644
--- a/packages/dev-server/client/file.ts
+++ b/packages/dev-server/client/file.ts
@@ -1,11 +1,6 @@
 import Monaco from 'monaco-editor'
 import Marklet from './index'
 
-declare global {
-  export const monaco: typeof Monaco
-  export const marklet: typeof Marklet
-}
-
 let count = 0
 
 export interface FileOptions {
@@ -17,59 +12,63 @@ export interface FileOptions {
   changed?: boolean
 }
 
-export default class MarkletFile {
-  public value: string
-  public title: string
-  public path: string
-  public origin: string
-  public changed: boolean
-  public id: string
+export default function(marklet: typeof Marklet) {
+  return class MarkletFile {
+    public value: string
+    public title: string
+    public path: string
+    public origin: string
+    public changed: boolean
+    public id: string
 
-  private model: Monaco.editor.ITextModel
+    private model: Monaco.editor.ITextModel
 
-  constructor(options: FileOptions = {}) {
-    this.value = options.value
-    this.path = options.path
-    this.origin = options.origin
-    this.changed = options.changed
-    this.title = options.title || `Untitled ${++count}`
-    this.id = options.id || Math.floor(Math.random() * 36 ** 6).toString(36).padStart(6, '0')
-    Object.defineProperty(this, 'model', {
-      configurable: false,
-      value: monaco.editor.createModel(this.value, 'marklet')
-    })
-  }
+    constructor(options: FileOptions = {}) {
+      this.value = options.value
+      this.path = options.path
+      this.origin = options.origin
+      this.changed = options.changed
+      this.title = options.title || `Untitled ${++count}`
+      this.id = options.id || Math.floor(Math.random() * 36 ** 6).toString(36).padStart(6, '0')
+      marklet.$on('monaco.loaded', (monaco: typeof Monaco) => {
+        Object.defineProperty(this, 'model', {
+          configurable: false,
+          value: monaco.editor.createModel(this.value, 'marklet')
+        })
+      })
+    }
 
-  onModelChange(listener: (event: Monaco.editor.IModelContentChangedEvent) => void) {
-    this.model.onDidChangeContent(listener)
-  }
+    onModelChange(listener: (event: Monaco.editor.IModelContentChangedEvent) => void) {
+      this.model.onDidChangeContent(listener)
+    }
 
-  dispose() {
-    this.model.dispose()
-  }
+    dispose() {
+      this.model.dispose()
+    }
 
-  checkChange(data: string) {
-    if (data !== undefined) this.origin = data
-    this.value = this.model.getValue(
-      marklet.editOptions.line_ending === 'LF' ? 1 : 2
-    )
-    this.changed = this.origin !== this.value
-  }
+    checkChange(data: string) {
+      if (data !== undefined) this.origin = data
+      this.value = this.model.getValue(
+        marklet.editOptions.line_ending === 'LF' ? 1 : 2
+      )
+      this.changed = this.origin !== this.value
+    }
 
-  isEmpty() {
-    return this.path === null && this.origin === '' && this.model.getValue(1) === ''
-  }
+    isEmpty() {
+      return this.path === null && this.origin === '' && this.model.getValue(1) === ''
+    }
 
-  save() {
-    // FIXME
-  }
+    save() {
+      // FIXME
+    }
 
-  toJSON() {
-    return {
-      title: this.title,
-      value: this.value,
-      path: this.path,
-      id: this.id,
+    toJSON() {
+      return {
+        title: this.title,
+        value: this.value,
+        path: this.path,
+        id: this.id,
+      }
     }
   }
 }
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 68e7a9b..046c253 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -1,6 +1,6 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
-import MarkletFile from './file'
+import fileConstructor from './file'
 import defineLanguage from './language'
 import * as renderer from '@marklet/renderer'
 import { LexerConfig } from '@marklet/parser'
@@ -123,7 +123,7 @@ export default new class Marklet {
   parseOptions: LexerConfig
   events = eventBus
   client = client
-  File = MarkletFile
+  File = fileConstructor(this)
   
   create(el: string | HTMLElement) {
     document.title = 'Marklet - ' + typeMap[this.serverType]
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index ff5126b..e3ad030 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -9,6 +9,10 @@ module.exports = {
     require('./editor'),
   ],
 
+  components: {
+    fileTree: require('./tree.vue')
+  },
+
   data: () => ({
     themes,
     theme: 'dark',
@@ -16,15 +20,15 @@ module.exports = {
     display: {
       document: {
         show: true,
-        width: 0.35,
+        width: 0.4,
       },
       editor: {
         show: true,
-        width: 0.35,
+        width: 0.4,
       },
       explorer: {
         show: false,
-        width: 0.3,
+        width: 0.2,
       },
     },
   }),
@@ -221,7 +225,7 @@ module.exports = {
 <template>
   <div :class="[theme, { dragging }]" class="marklet">
     <ob-menubar class="menubar" from="menubar"/>
-    <div class="view explorer" :style="explorerStyle"/>
+    <file-tree class="view explorer" :style="explorerStyle" :tree="tree"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
       @mousedown.stop="startDrag('left', $event)"/>
     <div class="view editor" ref="editor" :style="editorStyle"/>
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 8b3a1e5..a23a6be 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -2,11 +2,13 @@ const { DocumentLexer, defaultConfig } = require('@marklet/parser')
 
 module.exports = {
   data: () => ({
+    tree: [],
     nodes: [],
     origin: '',
     source: '',
     loaded: false,
     changed: false,
+    files: {},
     config: {
       ...defaultConfig,
       ...marklet.parseOptions,
@@ -42,8 +44,16 @@ module.exports = {
       })
     }
 
-    marklet.$on('server.document', ({ data }) => {
-      this.openFile(data)
+    marklet.$on('server.entries', ({ tree }) => {
+      this.tree = tree
+    })
+
+    marklet.$on('server.document', ({ value, path }) => {
+      if (this.files[path]) {
+        this.files[path].value = value
+      } else {
+        this.files[path] = new marklet.File({ path, value })
+      }
     })
 
     marklet.$on('monaco.theme.loaded', (monaco) => {
@@ -62,7 +72,7 @@ module.exports = {
       this._editor = monaco.editor.create(this.$refs.editor, {
         model: null,
         language: 'marklet',
-        lineDecorationsWidth: 4,
+        lineDecorationsWidth: 8,
         scrollBeyondLastLine: false,
         minimap: { enabled: false },
         scrollbar: {
diff --git a/packages/dev-server/comp/tree.vue b/packages/dev-server/comp/tree.vue
new file mode 100644
index 0000000..ba87029
--- /dev/null
+++ b/packages/dev-server/comp/tree.vue
@@ -0,0 +1,35 @@
+<script>
+
+module.exports = {
+  name: 'file-tree',
+  props: ['tree'],
+}
+
+</script>
+
+<template>
+  <div>
+    <div v-if="tree.length" class="title">{{ tree[0] }}</div>
+    <template v-for="(item, index) in tree.slice(1)">
+      <div :key="index" class="item" v-if="typeof item === 'string'">{{ item }}</div>
+      <file-tree :key="index" v-else class="children" :tree="item">
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+& {
+  font-size: 16px;
+  user-select: none;
+}
+
+> .title, .item {
+  line-height: 1.5em;
+}
+
+> .item, > .children {
+  margin-left: 16px;
+}
+
+</style>
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 138e210..e9ad712 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -57,19 +57,15 @@ export default class ProjectManager extends EventEmitter implements Manager {
 
     this.on('update', (data) => {
       if (!this.server) {
-        let index = this.msgQueue.findIndex(({ type }) => type === data.type)
-        if (index >= 0) {
-          this.msgQueue[index] = data
-        } else {
-          this.msgQueue.push(data)
-        }
+        this.msgQueue.push(data)
       } else {
         this.server.wsServer.broadcast(JSON.stringify(data))
       }
     })
 
-    this.update()
+    this.tree.entryList.forEach(filepath => this.addSet.add(filepath))
     this.debouncedUpdate = debounce(this.update.bind(this), 200)
+    this.update()
 
     this.folderWatcher = fs.watch(this.config.baseDir, {
       recursive: true
@@ -131,7 +127,13 @@ export default class ProjectManager extends EventEmitter implements Manager {
     this.delSet.clear()
     for (const item of this.addSet) {
       try {
-        this.tree.set(item, fs.readFileSync(path.join(this.config.baseDir, item), 'utf8'))        
+        const content = fs.readFileSync(path.join(this.config.baseDir, item), 'utf8')
+        this.tree.set(item, content)
+        this.emit('update', {
+          type: 'document',
+          path: item,
+          value: content,
+        })
       } catch (_) {}
     }
     this.addSet.clear()
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
index 9698ec2..0fad3d8 100644
--- a/packages/dev-server/server/tree.ts
+++ b/packages/dev-server/server/tree.ts
@@ -74,22 +74,34 @@ export default class DirTree {
   }
 
   get entryTree() {
-    const rootTree = DirTree.generateEntryTree(this.tree)
+    const rootTree = (function generateEntryTree(tree: FileTree) {
+      const entries: EntryTree = Object.keys(tree)
+      for (let i = 0; i < entries.length; i++) {
+        const element = entries[i]
+        const content = tree[<string>element]
+        if (typeof content === 'object') {
+          const sub = generateEntryTree(content)
+          sub.unshift(element)
+          entries.splice(i, 1, sub)
+        }
+      }
+      return entries
+    })(this.tree)
     rootTree.unshift(path.basename(this.filepath))
     return rootTree
   }
 
-  static generateEntryTree(tree: FileTree) {
-    const entries: EntryTree = Object.keys(tree)
-    for (let i = 0; i < entries.length; i++) {
-      const element = entries[i]
-      const content = tree[<string>element]
-      if (typeof content === 'object') {
-        const sub = this.generateEntryTree(content)
-        sub.unshift(element)
-        entries.splice(i, 1, sub)
+  get entryList() {
+    return Array.from(function* entries(tree: FileTree, basename = ''): IterableIterator<string> {
+      for (const key of Object.keys(tree)) {
+        const content = tree[key]
+        const filename = path.join(basename, key)
+        if (typeof content === 'string') {
+          yield filename
+        } else {
+          yield* entries(content, filename)
+        }
       }
-    }
-    return entries
+    }(this.tree)).map(filename => filename.replace(/\\/g, '/'))
   }
 }
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index dbbad83..115c5c1 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -3,6 +3,7 @@ $menu-shadow: #000000;
 $active-color: #acdeff;
 
 &, > .explorer {
+  color: #fafaf5;
   background-color: #272822;
 }
 
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 7911ba9..5d9cd15 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -3,6 +3,7 @@ $menu-shadow: #888888;
 $active-color: #409eff;
 
 &, > .explorer {
+  color: #24292e;
   background-color: #ffffff;
 }
 

From 76500dba9390a9102a902f0fc1b5a68dd7fa667d Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Mon, 29 Oct 2018 17:05:58 +0800
Subject: [PATCH 42/47] path in title

---
 packages/dev-server/client/monaco.scss    |  4 +++
 packages/dev-server/comp/app.vue          | 18 +++++++++-
 packages/dev-server/comp/editor.js        | 16 ++++-----
 packages/dev-server/comp/menu/manager.vue | 26 ++++++++++++---
 packages/dev-server/comp/menu/menubar.vue |  5 +--
 packages/dev-server/comp/menu/util.js     | 40 -----------------------
 packages/dev-server/server/file.ts        | 18 ++++++----
 packages/dev-server/server/project.ts     |  2 +-
 8 files changed, 63 insertions(+), 66 deletions(-)
 delete mode 100644 packages/dev-server/comp/menu/util.js

diff --git a/packages/dev-server/client/monaco.scss b/packages/dev-server/client/monaco.scss
index 047ae73..f6e0dd8 100644
--- a/packages/dev-server/client/monaco.scss
+++ b/packages/dev-server/client/monaco.scss
@@ -1,4 +1,8 @@
 .monaco-editor {
+  .margin-view-overlays {
+    user-select: none;
+  }
+  
   .decorationsOverviewRuler {
     display: none;
   }
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index e3ad030..47c0402 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -224,7 +224,10 @@ module.exports = {
 
 <template>
   <div :class="[theme, { dragging }]" class="marklet">
-    <ob-menubar class="menubar" from="menubar"/>
+    <div class="menubar">
+      <ob-menubar from="menubar"/>
+      <span class="title">{{ files[current].path || 'Untitled' }}</span>
+    </div>
     <file-tree class="view explorer" :style="explorerStyle" :tree="tree"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
       @mousedown.stop="startDrag('left', $event)"/>
@@ -251,7 +254,20 @@ $-menubar-height: 32px;
 }
 
 > .menubar {
+  width: 100%;
+  display: inline-flex;
   height: $-menubar-height;
+
+  > .ob-menubar {
+    width: auto;
+  }
+
+  > .title {
+    flex-grow: 1;
+    font-size: 14px;
+    text-align: center;
+    line-height: $-menubar-height;
+  }
 }
 
 > .view, > .border {
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index a23a6be..a547f3d 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -8,7 +8,10 @@ module.exports = {
     source: '',
     loaded: false,
     changed: false,
-    files: {},
+    files: {
+      __untitled__: new marklet.File({ title: 'untitled' }),
+    },
+    current: '__untitled__',
     config: {
       ...defaultConfig,
       ...marklet.parseOptions,
@@ -38,12 +41,6 @@ module.exports = {
   },
 
   mounted() {
-    if (process.env.MARKLET_ENV === 'development') {
-      marklet.$on('server.message', (event) => {
-        console.log('server.' + event.type, event)
-      })
-    }
-
     marklet.$on('server.entries', ({ tree }) => {
       this.tree = tree
     })
@@ -52,7 +49,10 @@ module.exports = {
       if (this.files[path]) {
         this.files[path].value = value
       } else {
-        this.files[path] = new marklet.File({ path, value })
+        this.$set(this.files, path, new marklet.File({ path, value }))
+      }
+      if (this.current === '__untitled__') {
+        this.current = path
       }
     })
 
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
index 019f28a..e2d0813 100644
--- a/packages/dev-server/comp/menu/manager.vue
+++ b/packages/dev-server/comp/menu/manager.vue
@@ -33,13 +33,15 @@ module.exports = {
       menu.forEach(item => item.context = context)
       this.menu.push(...menu)
     },
-    locateAtTopBottom(rect, style) {
-      if (rect.left + 200 > innerWidth) {
-        style.left = rect.left + rect.width - 200 + 'px'
+    locateAtTopBottom(style, ref, marginY = 0, offsetX = 0) {
+      if (ref.offsetLeft + 200 > innerWidth) {
+        style.left = null
+        style.right = ref.offsetRight - offsetX + 'px'
       } else {
-        style.left = rect.left + 'px'
+        style.left = ref.offsetLeft + offsetX + 'px'
+        style.right = null
       }
-      style.top = rect.top + rect.height + 'px'
+      style.top = ref.offsetBottom + marginY + 'px'
     },
     locateAtLeftRight(style, ref, offsetY = 0, marginX = 0) {
       if (ref.offsetRight + 200 > innerWidth) {
@@ -51,6 +53,20 @@ module.exports = {
       }
       style.top = ref.offsetTop + offsetY + 'px'
     },
+    locateAtMouseEvent(event, style) {
+      if (event.clientX + 200 > innerWidth) {
+        style.left = event.clientX - 200 + 'px'
+      } else {
+        style.left = event.clientX + 'px'
+      }
+      if (event.clientY > innerHeight / 2) {
+        style.top = ''
+        style.bottom = innerHeight - event.clientY + 'px'
+      } else {
+        style.top = event.clientY + 'px'
+        style.bottom = ''
+      }
+    },
     executeMethod(context, key, ...args) {
       const method = context[key]
       if (method instanceof Function) method(...args)
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
index c9d2253..3dfa000 100644
--- a/packages/dev-server/comp/menu/menubar.vue
+++ b/packages/dev-server/comp/menu/menubar.vue
@@ -1,7 +1,5 @@
 <script>
 
-const util = require('./util')
-
 module.exports = {
   props: {
     from: {
@@ -68,9 +66,8 @@ module.exports = {
       }
       this.focused = false
       const style = this.origin.$refs.standalone.style
-      const rect = this.$el.children[index].getBoundingClientRect()
       this.$menuManager.hideAllMenus()
-      util.locateAtTopBottom(rect, style)
+      this.$menuManager.locateAtTopBottom(style, this.$el.children[index])
       this.origin.current = index
     },
   }
diff --git a/packages/dev-server/comp/menu/util.js b/packages/dev-server/comp/menu/util.js
deleted file mode 100644
index 524efc9..0000000
--- a/packages/dev-server/comp/menu/util.js
+++ /dev/null
@@ -1,40 +0,0 @@
-function locateAtTopBottom(rect, style) {
-  if (rect.left + 200 > innerWidth) {
-    style.left = rect.left + rect.width - 200 + 'px'
-  } else {
-    style.left = rect.left + 'px'
-  }
-  style.top = rect.top + rect.height + 'px'
-}
-
-function locateAtLeftRight(style, ref) {
-  if (ref.offsetRight + 200 > innerWidth) {
-    style.left = null
-    style.right = ref.offsetLeft + 'px'
-  } else {
-    style.right = null
-    style.left = ref.offsetLeft + ref.offsetWidth + 'px'
-  }
-  style.top = ref.offsetTop + 'px'
-}
-
-function locateAtMouseEvent(event, style) {
-  if (event.clientX + 200 > innerWidth) {
-    style.left = event.clientX - 200 + 'px'
-  } else {
-    style.left = event.clientX + 'px'
-  }
-  if (event.clientY > innerHeight / 2) {
-    style.top = ''
-    style.bottom = innerHeight - event.clientY + 'px'
-  } else {
-    style.top = event.clientY + 'px'
-    style.bottom = ''
-  }
-}
-
-module.exports = {
-  locateAtLeftRight,
-  locateAtTopBottom,
-  locateAtMouseEvent,
-}
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index a45497c..b4c1153 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -11,12 +11,16 @@ export default class FileManager extends EventEmitter implements Manager {
   private content: string
   private watcher: fs.FSWatcher
   private debouncedUpdate: () => void
-  public msg: string
+  public generalFilepath: string
+  public unsentMessage: string
 
   constructor(private filepath: string) {
     super()
-    this.update()
+
+    this.generalFilepath = filepath.replace(/\\/g, '/')
     this.debouncedUpdate = debounce(() => this.update(), 200)
+    this.update()
+
     this.watcher = fs.watch(this.filepath, (type: WatchEventType) => {
       if (type === 'rename') {
         this.dispose('Source file has been removed.')
@@ -30,17 +34,17 @@ export default class FileManager extends EventEmitter implements Manager {
     const temp = fs.readFileSync(this.filepath, 'utf8')
     if (this.content !== temp) {
       this.content = temp
-      this.msg = JSON.stringify({
+      this.unsentMessage = JSON.stringify({
         type: 'document',
-        path: this.filepath,
-        data: this.content,
+        value: this.content,
+        path: this.generalFilepath,
       })
-      this.emit('update', this.msg)
+      this.emit('update', this.unsentMessage)
     }
   }
 
   public bind(server: Server) {
-    server.wsServer.on('connection', ws => ws.send(this.msg))
+    server.wsServer.on('connection', ws => ws.send(this.unsentMessage))
     this.on('update', msg => server.wsServer.broadcast(msg))
     this.once('close', reason => server.dispose(reason))
     return this
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index e9ad712..277bd71 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -131,8 +131,8 @@ export default class ProjectManager extends EventEmitter implements Manager {
         this.tree.set(item, content)
         this.emit('update', {
           type: 'document',
-          path: item,
           value: content,
+          path: item.replace(/\\/g, '/'),
         })
       } catch (_) {}
     }

From 74be6b2938d7065b03146f3a45926d10ccfa7e88 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Tue, 30 Oct 2018 17:09:18 +0800
Subject: [PATCH 43/47] switch document

---
 packages/dev-server/client/file.ts     |  3 ++-
 packages/dev-server/client/index.ts    |  2 +-
 packages/dev-server/comp/.eslintrc.yml |  1 +
 packages/dev-server/comp/app.vue       |  6 ++++-
 packages/dev-server/comp/editor.js     | 32 +++++++++++++++++++++++---
 packages/dev-server/comp/tree.vue      | 16 ++++++++++---
 packages/dev-server/server/tree.ts     |  6 ++---
 7 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/packages/dev-server/client/file.ts b/packages/dev-server/client/file.ts
index 6459bc5..1933cbd 100644
--- a/packages/dev-server/client/file.ts
+++ b/packages/dev-server/client/file.ts
@@ -21,7 +21,8 @@ export default function(marklet: typeof Marklet) {
     public changed: boolean
     public id: string
 
-    private model: Monaco.editor.ITextModel
+    public model: Monaco.editor.ITextModel
+    public viewState: Monaco.editor.ICodeEditorViewState
 
     constructor(options: FileOptions = {}) {
       this.value = options.value
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 046c253..150487b 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -25,12 +25,12 @@ eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
   eventBus.$emit('monaco.language.loaded', monaco)
   monaco.editor.defineTheme('dark', require('../themes/dark'))
   monaco.editor.defineTheme('simple', require('../themes/simple'))
-  eventBus.$emit('monaco.theme.loaded', monaco)
   if (!Vue.prototype.$colorize) {
     Vue.prototype.$colorize = function(code: string, lang: string) {
       return monaco.editor.colorize(code, lang, {})
     }
   }
+  eventBus.$emit('monaco.theme.loaded', monaco)
 })
 
 const client = new class MarkletClient {
diff --git a/packages/dev-server/comp/.eslintrc.yml b/packages/dev-server/comp/.eslintrc.yml
index 147b3ca..a36bd71 100644
--- a/packages/dev-server/comp/.eslintrc.yml
+++ b/packages/dev-server/comp/.eslintrc.yml
@@ -2,5 +2,6 @@ extends:
   - plugin:vue/essential
 
 globals:
+  monaco: true
   marklet: true
   
\ No newline at end of file
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index 47c0402..9398a1b 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -13,6 +13,10 @@ module.exports = {
     fileTree: require('./tree.vue')
   },
 
+  provide() {
+    return { $editor: this }
+  },
+
   data: () => ({
     themes,
     theme: 'dark',
@@ -226,7 +230,7 @@ module.exports = {
   <div :class="[theme, { dragging }]" class="marklet">
     <div class="menubar">
       <ob-menubar from="menubar"/>
-      <span class="title">{{ files[current].path || 'Untitled' }}</span>
+      <span class="title">{{ currentFile.path || 'Untitled' }}</span>
     </div>
     <file-tree class="view explorer" :style="explorerStyle" :tree="tree"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index a547f3d..52b95f5 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -11,13 +11,19 @@ module.exports = {
     files: {
       __untitled__: new marklet.File({ title: 'untitled' }),
     },
-    current: '__untitled__',
+    currentPath: '__untitled__',
     config: {
       ...defaultConfig,
       ...marklet.parseOptions,
     },
   }),
 
+  computed: {
+    currentFile() {
+      return this.files[this.currentPath]
+    },
+  },
+
   watch: {
     source(value) {
       this.nodes = this._lexer.parse(value)
@@ -51,8 +57,8 @@ module.exports = {
       } else {
         this.$set(this.files, path, new marklet.File({ path, value }))
       }
-      if (this.current === '__untitled__') {
-        this.current = path
+      if (this.currentPath === '__untitled__') {
+        this.currentPath = path
       }
     })
 
@@ -95,6 +101,13 @@ module.exports = {
   },
 
   methods: {
+    switchTo(path) {
+      if (this.currentPath === path) return
+      if (!this.files[path]) return
+      this.currentFile.viewState = this._editor.saveViewState()
+      this.currentPath = path
+      this.activate()
+    },
     openFile(doc) {
       if (this.loaded) {
         this._model.setValue(doc)
@@ -121,6 +134,19 @@ module.exports = {
       this.source = this._model.getValue()
       this.changed = this.origin !== this.source
     },
+    activate() {
+      if (!this._editor) return
+      monaco.editor.setTheme(this.theme)
+      this._editor.setModel(this.currentFile.model)
+      if (this.currentFile.viewState) {
+        this._editor.restoreViewState(this.currentFile.viewState)
+      }
+      const position = this._editor.getPosition()
+      this.row = position.lineNumber
+      this.column = position.column
+      this.nodes = this._lexer.parse(this.currentFile.value)
+      this.layout()
+    },
     layout(deltaTime = 0) {
       if (!this._editor) return
       const now = performance.now(), self = this
diff --git a/packages/dev-server/comp/tree.vue b/packages/dev-server/comp/tree.vue
index ba87029..84f9174 100644
--- a/packages/dev-server/comp/tree.vue
+++ b/packages/dev-server/comp/tree.vue
@@ -2,7 +2,16 @@
 
 module.exports = {
   name: 'file-tree',
-  props: ['tree'],
+
+  inject: ['$editor'],
+
+  props: {
+    tree: Array,
+    prefix: {
+      type: String,
+      default: '',
+    }
+  },
 }
 
 </script>
@@ -11,8 +20,9 @@ module.exports = {
   <div>
     <div v-if="tree.length" class="title">{{ tree[0] }}</div>
     <template v-for="(item, index) in tree.slice(1)">
-      <div :key="index" class="item" v-if="typeof item === 'string'">{{ item }}</div>
-      <file-tree :key="index" v-else class="children" :tree="item">
+      <div :key="index" class="item" v-if="typeof item === 'string'"
+        @click="$editor.switchTo(prefix + item)">{{ item }}</div>
+      <file-tree :key="index" v-else class="children" :tree="item" :prefix="prefix + item[0] + '/'">
     </template>
   </div>
 </template>
diff --git a/packages/dev-server/server/tree.ts b/packages/dev-server/server/tree.ts
index 0fad3d8..00095da 100644
--- a/packages/dev-server/server/tree.ts
+++ b/packages/dev-server/server/tree.ts
@@ -95,13 +95,13 @@ export default class DirTree {
     return Array.from(function* entries(tree: FileTree, basename = ''): IterableIterator<string> {
       for (const key of Object.keys(tree)) {
         const content = tree[key]
-        const filename = path.join(basename, key)
+        const filename = basename + key
         if (typeof content === 'string') {
           yield filename
         } else {
-          yield* entries(content, filename)
+          yield* entries(content, filename + '/')
         }
       }
-    }(this.tree)).map(filename => filename.replace(/\\/g, '/'))
+    }(this.tree))
   }
 }

From f8eaaf4d44af6e4ac02bcf12f6ae2bdc719bcc06 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 31 Oct 2018 00:19:45 +0800
Subject: [PATCH 44/47] using obui

---
 build/build.js                              |   3 +-
 packages/dev-server/client/index.ts         |   2 -
 packages/dev-server/comp/checkbox.vue       | 111 ---------
 packages/dev-server/comp/menu/index.js      |  61 -----
 packages/dev-server/comp/menu/manager.vue   | 138 -----------
 packages/dev-server/comp/menu/menu-item.vue |  77 -------
 packages/dev-server/comp/menu/menu-view.vue | 242 --------------------
 packages/dev-server/comp/menu/menubar.vue   | 118 ----------
 packages/dev-server/package.json            |   1 +
 packages/dev-server/server/index.html       |   3 +
 packages/dev-server/themes/dark.scss        |   4 +-
 packages/dev-server/themes/simple.scss      |   4 +-
 12 files changed, 10 insertions(+), 754 deletions(-)
 delete mode 100644 packages/dev-server/comp/checkbox.vue
 delete mode 100644 packages/dev-server/comp/menu/index.js
 delete mode 100644 packages/dev-server/comp/menu/manager.vue
 delete mode 100644 packages/dev-server/comp/menu/menu-item.vue
 delete mode 100644 packages/dev-server/comp/menu/menu-view.vue
 delete mode 100644 packages/dev-server/comp/menu/menubar.vue

diff --git a/build/build.js b/build/build.js
index b7eabf4..b33be0f 100644
--- a/build/build.js
+++ b/build/build.js
@@ -37,7 +37,8 @@ const bundle = (name, options) => new Promise((resolve, reject) => {
     entry: util.resolve(name, options.entry),
     resolve: {
       alias: {
-        '@': util.resolve(name, 'temp')
+        '@': util.resolve(name, 'temp'),
+        '@@': util.resolve('..'),
       }
     },
     output: {
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 150487b..9455cb3 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -11,8 +11,6 @@ declare global {
 }
 
 Vue.use(renderer)
-Vue.use(require('@/menu'))
-Vue.component('mkl-checkbox', require('@/checkbox.vue'))
 
 const eventBus = new Vue()
 
diff --git a/packages/dev-server/comp/checkbox.vue b/packages/dev-server/comp/checkbox.vue
deleted file mode 100644
index 1bb74d2..0000000
--- a/packages/dev-server/comp/checkbox.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script>
-
-module.exports = {
-  props: {
-    value: Boolean,
-    label: String,
-    disabled: Boolean,
-  },
-
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
-
-  data: () => ({
-    focused: false,
-  }),
-
-  methods: {
-    onFocus(event) {
-      this.focused = true
-      this.$emit('focus', event)
-    },
-    onBlur(event) {
-      this.focused = false
-      this.$emit('blur', event)
-    },
-  },
-}
-
-</script>
-
-<template>
-  <label class="marklet-checkbox" :class="{ focused, disabled, checked: value }">
-    <span class="box">
-      <span class="inner"></span>
-      <input type="checkbox" :disabled="disabled" :value="label" v-model="value"
-        @change="$emit('change', $event.target.checked)" @focus="onFocus" @blur="onBlur">
-    </span>
-    <span class="label" v-if="$slots.default || label">
-      <slot/>
-      <template v-if="!$slots.default">{{ label }}</template>
-    </span>
-  </label>
-</template>
-
-<style lang="scss" scoped>
-
-& {
-  font-size: 14px;
-  cursor: pointer;
-  user-select: none;
-  display: inline-block;
-  transition: 0.3s ease;
-  line-height: 1em;
-
-  > .box {
-    outline: 0;
-    line-height: 1em;
-    vertical-align: sub;
-
-    > .inner {
-      position: relative;
-      display: inline-block;
-      box-sizing: border-box;
-      transition: 0.3s ease;
-      border: 0.07em solid;
-      border-radius: 2px;
-      width: 1em;
-      height: 1em;
-    }
-
-    > .inner::after {
-      content: "";
-      box-sizing: content-box;
-      border: 0.07em solid;
-      border-left: 0;
-      border-top: 0;
-      height: 0.5em;
-      left: 0.29em;
-      top: 0.08em;
-      width: 0.21em;
-      position: absolute;
-      transform: rotate(45deg) scaleY(0);
-      transition: transform .15s ease-in .05s;
-      transform-origin: center;
-    }
-
-    > input {
-      position: absolute;
-      opacity: 0;
-      outline: 0;
-      margin: 0;
-      width: 0;
-      height: 0;
-      z-index: -1;
-    }
-  }
-
-  > .label {
-    line-height: 1em;
-    margin-left: 4px;
-    vertical-align: middle;
-  }
-
-  &.checked > .box > .inner::after {
-    transform: rotate(45deg) scaleY(1);
-  }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu/index.js b/packages/dev-server/comp/menu/index.js
deleted file mode 100644
index 7736323..0000000
--- a/packages/dev-server/comp/menu/index.js
+++ /dev/null
@@ -1,61 +0,0 @@
-const Mousetrap = require('mousetrap')
-const manager = require('./manager.vue')
-const menubar = require('./menubar.vue')
-
-// TODO: improve this pattern maybe. 
-// Cause: firing event inside textarea is blocked by mousetrap by default.
-Mousetrap.prototype.stopCallback = () => false
-
-function toKebab(camel) {
-  return camel.replace(/[A-Z]/g, char => '-' + char.toLowerCase())
-}
-
-module.exports = function(Vue) {
-  Vue.component('ob-menubar', menubar)
-
-  let $menuManager = null
-  const commandData = {}
-  const MenuManager = Vue.extend(manager)
-
-  Vue.prototype.$registerCommands = function(commands) {
-    commands.forEach((command) => {
-      command.context = this
-      const key = command.key ? command.key : toKebab(command.method)
-      commandData[key] = command
-      if (!command.bind || command.bind.startsWith('!')) return
-      Mousetrap.bind(command.bind, () => {
-        if (!$menuManager) return
-        $menuManager.executeCommand(command)
-        return false
-      })
-    })
-  }
-
-  Vue.prototype.$initializeMenu = function(parentNode) {
-    const element = document.createElement('div')
-    
-    $menuManager = new MenuManager()
-    $menuManager.commands = commandData
-    Vue.prototype.$menuManager = $menuManager
-
-    function mountMenuManager() {
-      if (!parentNode) parentNode = this.$el
-      $menuManager.$mount(parentNode.appendChild(element))
-      
-      parentNode.addEventListener('click', () => $menuManager.hideAllMenus())
-      parentNode.addEventListener('contextmenu', () => $menuManager.hideAllMenus())
-    }
-
-    if (this._isMounted) {
-      mountMenuManager()
-    } else {
-      this.$options.mounted.push(mountMenuManager)
-    }
-  }
-
-  Vue.prototype.$registerMenus = function(menu) {
-    if (!$menuManager) this.$initializeMenu()
-
-    $menuManager.registerMenus(this, menu)
-  }
-}
diff --git a/packages/dev-server/comp/menu/manager.vue b/packages/dev-server/comp/menu/manager.vue
deleted file mode 100644
index e2d0813..0000000
--- a/packages/dev-server/comp/menu/manager.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<script>
-
-const util = require('./util')
-const menuView = require('./menu-view.vue')
-
-module.exports = {
-  components: { menuView },
-
-  data: () => ({
-    menu: [],
-    loaded: false,
-    underlineMnemonic: false,
-  }),
-
-  computed: {
-    refs() {
-      const result = {}
-      this.menu.forEach((item, index) => {
-        if (item.ref) {
-          result[item.ref] = this.$refs.menus[index]
-        }
-      })
-      return result
-    },
-  },
-
-  mounted() {
-    this.loaded = true
-  },
-
-  methods: {
-    registerMenus(context, menu) {
-      menu.forEach(item => item.context = context)
-      this.menu.push(...menu)
-    },
-    locateAtTopBottom(style, ref, marginY = 0, offsetX = 0) {
-      if (ref.offsetLeft + 200 > innerWidth) {
-        style.left = null
-        style.right = ref.offsetRight - offsetX + 'px'
-      } else {
-        style.left = ref.offsetLeft + offsetX + 'px'
-        style.right = null
-      }
-      style.top = ref.offsetBottom + marginY + 'px'
-    },
-    locateAtLeftRight(style, ref, offsetY = 0, marginX = 0) {
-      if (ref.offsetRight + 200 > innerWidth) {
-        style.left = null
-        style.right = ref.offsetLeft - marginX + 'px'
-      } else {
-        style.right = null
-        style.left = ref.offsetLeft + marginX + ref.offsetWidth + 'px'
-      }
-      style.top = ref.offsetTop + offsetY + 'px'
-    },
-    locateAtMouseEvent(event, style) {
-      if (event.clientX + 200 > innerWidth) {
-        style.left = event.clientX - 200 + 'px'
-      } else {
-        style.left = event.clientX + 'px'
-      }
-      if (event.clientY > innerHeight / 2) {
-        style.top = ''
-        style.bottom = innerHeight - event.clientY + 'px'
-      } else {
-        style.top = event.clientY + 'px'
-        style.bottom = ''
-      }
-    },
-    executeMethod(context, key, ...args) {
-      const method = context[key]
-      if (method instanceof Function) method(...args)
-    },
-    executeCommand(command) {
-      if (typeof command === 'string') {
-        command = this.commands[command]
-      }
-      if (!command || !command.method || !command.context) return
-      const method = command.context[command.method]
-      if (!(method instanceof Function)) {
-        console.error(`No method ${command.method} was found!`)
-        return
-      }
-      let args = command.arguments
-      if (args === undefined) args = []
-      if (!(args instanceof Array)) args = [args]
-      method(...args.map(arg => this.parseArgument(arg, command.context)))
-    },
-    parseArgument(arg, ctx) {
-      if (typeof arg !== 'string') return arg
-      if (arg.startsWith('!$')) {
-        return !arg.slice(2).split('.').reduce((prev, curr) => prev[curr], ctx)
-      } else if (arg.startsWith('$')) {
-        return arg.slice(1).split('.').reduce((prev, curr) => prev[curr], ctx)
-      } else {
-        return arg
-      }
-    },
-    hideAllMenus() {
-      this.underlineMnemonic = false
-      this.$refs.menus.forEach(menu => menu.traverse((menu) => {
-        menu.current = null
-      }))
-    },
-    showContextMenu(key, event) {
-      const style = this.$refs[key][0].$el.style
-      this.hideAllMenus()
-      util.locateAtMouseEvent(event, style)
-      this.menuData[key].active = true
-    },
-  }
-}
-
-</script>
-
-<template>
-  <div class="ob-menu-manager" :class="{ 'underline-mnemonic': underlineMnemonic }">
-    <menu-view v-for="(item, index) in menu" :key="index"
-      :menu="item.children" :context="item.context" ref="menus"/>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-& {
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-&.underline-mnemonic {
-  .mnemonic {
-    text-decoration: underline;
-  }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu/menu-item.vue b/packages/dev-server/comp/menu/menu-item.vue
deleted file mode 100644
index 2cdc63b..0000000
--- a/packages/dev-server/comp/menu/menu-item.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script>
-
-module.exports = {
-  props: {
-    command: {
-      type: Object,
-      default: {},
-    },
-    mnemonic: {
-      type: String,
-      default: '',
-    },
-    binding: {
-      type: String,
-      default: '',
-    },
-    caption: {
-      type: String,
-      default: '',
-    },
-    context: {
-      type: Object
-    },
-  },
-
-  computed: {
-    disabled() {
-      if (!this.command.enabled) return
-      return !this.$menuManager.parseArgument(this.command.enabled, this.context)
-    },
-    keybinding() {
-      let binding = this.binding || this.command.bind
-      if (!binding) return ''
-      if (binding.charAt(0) === '!') binding = binding.slice(1)
-      return binding.replace(/[a-z]+/g, word => {
-        return word.charAt(0).toUpperCase() + word.slice(1)
-      }).replace(/ /g, ', ')
-    },
-  },
-
-  methods: {
-    handleClick(event) {
-      if (this.disabled) {
-        event.stopPropagation()
-      } else {
-        this.$menuManager.executeCommand(this.command)
-      }
-    }
-  },
-}
-
-</script>
-
-<template>
-  <div :class="['menu-item', { disabled }]" @click="handleClick">
-    <span class="label">
-      <mkl-checkbox v-if="command.checked !== undefined"
-        :value="$menuManager.parseArgument(command.checked, context)" @change="handleClick"/>
-      {{ caption || command.name }}
-      <template v-if="mnemonic"> (<span class="mnemonic">{{ mnemonic }}</span>)</template>
-      <template v-if="command.ellipsis"> ...</template>
-    </span>
-    <span class="binding">{{ keybinding }}</span>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-> .label {
-  .marklet-checkbox {
-    font-size: 12px;
-    margin-right: 4px;
-    vertical-align: .5px;
-  }
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu/menu-view.vue b/packages/dev-server/comp/menu/menu-view.vue
deleted file mode 100644
index 78c00f4..0000000
--- a/packages/dev-server/comp/menu/menu-view.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<script>
-
-const menuItem = require('./menu-item.vue')
-
-module.exports = {
-  name: 'menu-view',
-
-  components: { menuItem },
-
-  props: {
-    menu: Array,
-    context: Object,
-  },
-
-  data: () => ({
-    chosen: null,
-    active: false,
-    children: [],
-  }),
-
-  computed: {
-    current: {
-      get() {
-        const index = this.children.findIndex(submenu => submenu && submenu.active)
-        return index < 0 ? null : index
-      },
-      set(value) {
-        this.children.forEach((submenu, index) => {
-          if (!submenu) return
-          submenu.active = index === value
-        })
-      },
-    },
-    focused() {
-      return this.active && this.current === null
-    },
-  },
-
-  mounted() {
-    addEventListener('keydown', this.handleKeyDown)
-    addEventListener('keypress', this.handleKeyPress)
-
-    this.children = this.menu.map((item, index) => {
-      if (!item.children) return
-      return this.$refs[index][0]
-    })
-  },
-
-  beforeDestroy() {
-    removeEventListener('keydown', this.handleKeyDown)
-    removeEventListener('keypress', this.handleKeyPress)
-  },
-
-  methods: {
-    handleKeyDown(event) {
-      if (!this.focused) return
-      console.log(event.key, event.keyCode)
-      if (event.keyCode === 8) {
-        event.preventDefault()
-        event.stopPropagation()
-        this.$nextTick(() => this.$parent.current = null)
-      }
-    },
-    handleKeyPress(event) {
-      if (!this.focused) return
-      const key = event.key.toUpperCase()
-      const index = this.menu.findIndex(item => item.mnemonic === key)
-      if (index >= 0) {
-        event.preventDefault()
-        event.stopPropagation()
-        this.toggleMenuItem(index)
-        this.$menuManager.underlineMnemonic = true
-      }
-    },
-    toggleMenuItem(index) {
-      const item = this.menu[index]
-      if (item.children) {
-        this.enterMenuItem(index)
-      } else if (!item.disabled) {
-        if (item.command) {
-          this.$menuManager.hideAllMenus()
-          this.$menuManager.executeCommand(item.command)
-        }
-      }
-    },
-    enterMenuItem(index) {
-      const style = this.$refs.standalone.style
-      const button = this.$refs.body.children[index]
-      this.$menuManager.locateAtLeftRight(style, button, -2)
-      this.$refs[index][0].active = true
-    },
-    leaveMenuItem(index, event) {
-      const x = event.clientX
-      const y = event.clientY
-      const rect = this.$refs.body.getBoundingClientRect()
-      if (x >= rect.left && x <= rect.right && y >= rect.left && y <= rect.right) {
-        this.$refs[index][0].active = false
-      }
-    },
-    traverse(callback) {
-      callback(this)
-      this.menu.forEach((item, index) => {
-        if (item.children) {
-          const submenu = this.$refs[index][0]
-          callback(submenu)
-          submenu.traverse(callback)
-        }
-      })
-    },
-  },
-}
-
-</script>
-
-<template>
-  <span class="marklet-menu" :class="{ active }">
-    <!-- children --><!-- eslint-disable -->
-    <div ref="standalone" :class="{ standalone: current !== null }">
-      <menu-view v-for="(item, index) in menu" v-if="item.children" :key="index"
-        :menu="item.children" :context="context" :ref="index"/>
-    </div>
-
-    <div ref="body" v-show="active" :class="['menu-body', { focused }]">
-      <template v-for="(item, index) in menu">
-        <!-- submenu -->
-        <menu-item :key="index" v-if="item.children"
-          @click.native.stop binding=">" :context="context"
-          :caption="item.caption" :mnemonic="item.mnemonic"
-          @mouseenter.native="enterMenuItem(index, $event)"
-          @mouseleave.native="leaveMenuItem(index, $event)"/>
-
-        <!-- command -->
-        <menu-item :key="index" v-else-if="item.command" :context="context"
-          :mnemonic="item.mnemonic" :command="$menuManager.commands[item.command]"/>
-        
-        <!-- list -->
-        <transition-group :key="index" v-else-if="item.switch" name="ob-menu-list">
-          <menu-item v-for="(sub, index) in $menuManager.parseArgument(item.data, context)"
-            :key="index" :context="context" :caption="sub.name"
-            :class="{ active: sub.key === $menuManager.parseArgument(item.current, context) }"
-            @click.native="$menuManager.executeMethod(context, item.switch, sub.key)"/>
-        </transition-group>
-
-        <!-- caption -->
-        <div :key="index" v-else class="menu-item disabled" @click.stop>
-          <div v-if="item.caption === '-'" class="separator"/>
-          <div v-else class="caption">{{ item.caption }}</div>
-        </div>
-      </template>
-    </div>
-  </span>
-</template>
-
-<style lang="scss" scoped>
-
-& {
-  position: relative;
-}
-
-> .standalone {
-  z-index: 10;
-  padding: 0;
-  margin: 0;
-  outline: 0;
-  border: none;
-  min-width: 200px;
-  user-select: none;
-  width: max-content;
-  position: absolute;
-  transition: 0.3s ease;
-}
-
-.menu-body {
-  padding: 2px 0;
-
-  &:not(.focused) {
-    .mnemonic {
-      text-decoration: none;
-    }
-  }
-}
-
-.menu-item {
-  padding: 0;
-  display: flex;
-  cursor: pointer;
-  font-size: 12px;
-
-  > .separator {
-    margin: 0.3em 0.5em;
-    padding: 1px 0 0 0;
-    border-bottom: 1px solid;
-    width: 100%;
-  }
-
-  > .caption {
-    font-size: 12px;
-    margin: 0.4em auto 0.2em;
-  }
-
-  > .label {
-    flex: 1 1 auto;
-    padding: 0.8em 1em;
-    line-height: 1.1em;
-    background: none;
-    display: inline-block;
-    margin: 0;
-    
-    &.active { font-weight: bold }
-  }
-
-  > .binding {
-    display: inline-block;
-    flex: 2 1 auto;
-    padding: 0.8em 1em;
-    line-height: 1.1em;
-    text-align: right;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    cursor: default !important;
-  }
-}
-
-.ob-menu-enter-active,
-.ob-menu-leave-active {
-  opacity: 1;
-  transform: scaleY(1);
-  transform-origin: center top;
-  transition:
-    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
-    opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.ob-menu-enter,
-.ob-menu-leave-to {
-  opacity: 0;
-  transform: scaleY(0);
-}
-
-</style>
diff --git a/packages/dev-server/comp/menu/menubar.vue b/packages/dev-server/comp/menu/menubar.vue
deleted file mode 100644
index 3dfa000..0000000
--- a/packages/dev-server/comp/menu/menubar.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script>
-
-module.exports = {
-  props: {
-    from: {
-      type: String,
-      default: 'menubar',
-    }
-  },
-
-  data: () => ({
-    focused: false,
-  }),
-
-  computed: {
-    children() {
-      return this.$menuManager.menu.find(item => item.ref === this.from).children
-    },
-    origin() {
-      return this.$menuManager.refs[this.from]
-    },
-  },
-
-  mounted() {
-    addEventListener('keydown', this.handleKeyDown)
-    addEventListener('keypress', this.handleKeyPress)
-  },
-
-  beforeDestroy() {
-    removeEventListener('keydown', this.handleKeyDown)
-    removeEventListener('keypress', this.handleKeyPress)
-  },
-
-  methods: {
-    handleKeyDown(event) {
-      if (event.keyCode === 18) {
-        this.focused = !this.focused
-      } else if (event.keyCode === 27 && this.focused) {
-        this.focused = false
-        this.$menuManager.underlineMnemonic = false
-      } else return
-      event.preventDefault()
-      event.stopPropagation()
-    },
-    handleKeyPress(event) {
-      if (!this.focused) return
-      const key = event.key.toUpperCase()
-      const index = this.children.findIndex(menu => menu.mnemonic === key)
-      if (index >= 0) {
-        this.toggleMenu(index)
-        this.$menuManager.underlineMnemonic = true
-        event.preventDefault()
-        event.stopPropagation()
-      }
-    },
-    hoverMenu(index) {
-      const current = this.origin.current
-      if (current !== null && current !== index) {
-        this.toggleMenu(index)
-      }
-    },
-    toggleMenu(index) {
-      if (this.origin.current === index) {
-        this.origin.current = null
-        return
-      }
-      this.focused = false
-      const style = this.origin.$refs.standalone.style
-      this.$menuManager.hideAllMenus()
-      this.$menuManager.locateAtTopBottom(style, this.$el.children[index])
-      this.origin.current = index
-    },
-  }
-}
-
-</script>
-
-<template>
-  <div :class="['ob-menubar', { focused }]">
-    <template v-if="$menuManager.loaded">
-      <div v-for="(menu, index) in children" :key="index" class="item"
-        @click.stop="toggleMenu(index)" @mouseover.stop="hoverMenu(index)"
-        :class="{ active: origin.current === index }" @contextmenu.stop>
-        {{ menu.caption }} (<span class="mnemonic">{{ menu.mnemonic }}</span>)&nbsp;
-      </div>
-    </template>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-
-& {
-  overflow: hidden;
-  font-size: 14px;
-  left: 0;
-  width: 100%;
-  float: left;
-  z-index: 11;
-  user-select: none;
-  position: relative;
-
-  .item {
-    line-height: 24px;
-    padding: 4px;
-    transition:
-      color 0.3s ease,
-      background-color 0.3s ease;
-    display: inline-block;
-  }
-}
-
-&.focused {
-  .mnemonic {
-    text-decoration: underline;
-  }
-}
-
-</style>
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 14c841e..63d950d 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -35,6 +35,7 @@
     "minimatch": "^3.0.4",
     "monaco-editor": "^0.14.3",
     "mousetrap": "^1.6.2",
+    "obui": "^1.1.1",
     "vue": "^2.5.17",
     "ws": "^6.0.0"
   }
diff --git a/packages/dev-server/server/index.html b/packages/dev-server/server/index.html
index 847481a..76f10e1 100644
--- a/packages/dev-server/server/index.html
+++ b/packages/dev-server/server/index.html
@@ -6,7 +6,9 @@
     <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
     <link href="~/@marklet/renderer/dist/marklet.min.css" rel="stylesheet">
     <link href="~/@marklet/renderer/dist/themes.min.css" rel="stylesheet">
+    <link href="~/obui/dist/index.css" rel="stylesheet">
     <script src="~/vue/dist/vue.runtime.min.js"></script>
+    <script src="~/obui/dist/index.js"></script>
     <link href="client.min.css" rel="stylesheet">
     <link href="themes.min.css" rel="stylesheet">
     <link href="monaco.min.css" rel="stylesheet">
@@ -17,6 +19,7 @@
   <body>
     <div id="app"></div>
     <script>
+      Vue.use(obui)
       marklet.create('#app')
       if (marklet.serverType === 'edit') {
         require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
diff --git a/packages/dev-server/themes/dark.scss b/packages/dev-server/themes/dark.scss
index 115c5c1..b983640 100644
--- a/packages/dev-server/themes/dark.scss
+++ b/packages/dev-server/themes/dark.scss
@@ -25,7 +25,7 @@ $active-color: #acdeff;
   &:hover, &.active { background-color: #999999 }
 }
 
-.marklet-menu > .standalone {
+.ob-menu > .standalone {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 
@@ -56,7 +56,7 @@ $active-color: #acdeff;
   }
 }
 
-.marklet-checkbox {
+.ob-checkbox {
   color: #666666;
 
   > .box {
diff --git a/packages/dev-server/themes/simple.scss b/packages/dev-server/themes/simple.scss
index 5d9cd15..acbee5d 100644
--- a/packages/dev-server/themes/simple.scss
+++ b/packages/dev-server/themes/simple.scss
@@ -25,7 +25,7 @@ $active-color: #409eff;
   &:hover, &.active { background-color: #aaaaaa }
 }
 
-.marklet-menu > .standalone {
+.ob-menu > .standalone {
   background-color: $menu-bgcolor;
   box-shadow: 0 2px 8px $menu-shadow;
 
@@ -56,7 +56,7 @@ $active-color: #409eff;
   }
 }
 
-.marklet-checkbox {
+.ob-checkbox {
   color: #606266;
 
   > .box {

From dbbac4730d36393c2826c5deba30f4407f6d5674 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 31 Oct 2018 16:08:55 +0800
Subject: [PATCH 45/47] abstract manager

---
 packages/dev-server/client/index.ts   |  4 +--
 packages/dev-server/server/file.ts    | 23 ++++---------
 packages/dev-server/server/index.ts   |  9 ++---
 packages/dev-server/server/manager.ts | 49 +++++++++++++++++++++++++++
 packages/dev-server/server/project.ts | 48 ++++----------------------
 5 files changed, 67 insertions(+), 66 deletions(-)
 create mode 100644 packages/dev-server/server/manager.ts

diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 9455cb3..1c77b4b 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -93,8 +93,8 @@ const client = new class MarkletClient {
     this.ws.addEventListener('open', () => {
       eventBus.$emit('ws.open')
     })
-    eventBus.$on('client.message', (type: string, data: string | Object) => {
-      this.msgQueue.push(JSON.stringify({ type, data }))
+    eventBus.$on('client.message', (data: object) => {
+      this.msgQueue.push(JSON.stringify({ data }))
     })
   }
 
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index b4c1153..31bfd58 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -1,16 +1,14 @@
-import { Server, Manager, WatchEventType } from './index'
-import debounce from 'lodash.debounce'
-import EventEmitter from 'events'
+import { WatchEventType } from './index'
+import MarkletManager from './manager'
 import * as fs from 'fs'
 
 export const MARKUP_EXTENSIONS = ['.md', '.mkl']
 
-export default class FileManager extends EventEmitter implements Manager {
-  static EXTENSIONS = ['.md', '.mkl']
+export default class FileManager extends MarkletManager {
+  static EXTENSIONS = MARKUP_EXTENSIONS
   
   private content: string
   private watcher: fs.FSWatcher
-  private debouncedUpdate: () => void
   public generalFilepath: string
   public unsentMessage: string
 
@@ -18,8 +16,8 @@ export default class FileManager extends EventEmitter implements Manager {
     super()
 
     this.generalFilepath = filepath.replace(/\\/g, '/')
-    this.debouncedUpdate = debounce(() => this.update(), 200)
-    this.update()
+
+    this.initialize()
 
     this.watcher = fs.watch(this.filepath, (type: WatchEventType) => {
       if (type === 'rename') {
@@ -30,7 +28,7 @@ export default class FileManager extends EventEmitter implements Manager {
     })
   }
 
-  private update() {
+  public update() {
     const temp = fs.readFileSync(this.filepath, 'utf8')
     if (this.content !== temp) {
       this.content = temp
@@ -43,13 +41,6 @@ export default class FileManager extends EventEmitter implements Manager {
     }
   }
 
-  public bind(server: Server) {
-    server.wsServer.on('connection', ws => ws.send(this.unsentMessage))
-    this.on('update', msg => server.wsServer.broadcast(msg))
-    this.once('close', reason => server.dispose(reason))
-    return this
-  }
-
   public dispose(reason = '') {
     this.watcher.close()
     this.emit('close', reason)
diff --git a/packages/dev-server/server/index.ts b/packages/dev-server/server/index.ts
index f8d0192..dad6217 100644
--- a/packages/dev-server/server/index.ts
+++ b/packages/dev-server/server/index.ts
@@ -6,7 +6,7 @@ import ws from 'ws'
 
 import { LexerConfig } from '@marklet/parser'
 import { getContentType } from './util'
-import { EventEmitter } from 'events'
+import MarkletManager from './manager'
 import ProjectManager from './project'
 import FileManager from './file'
 
@@ -30,11 +30,6 @@ export interface EditorConfig {
   line_ending?: 'LF' | 'CRLF'
 }
 
-interface MarkletManager extends EventEmitter {
-  bind(server: MarkletServer): this
-  dispose(): void
-}
-
 export type ServerType = 'watch' | 'edit'
 export type SourceType = 'file' | 'project'
 export type WatchEventType = 'rename' | 'change'
@@ -160,7 +155,7 @@ class MarkletServer<T extends ServerType = ServerType> {
   }
 }
 
-export { MarkletServer as Server, MarkletManager as Manager }
+export { MarkletServer as Server }
 
 export interface WatchOptions extends ServerOptions {
   filepath: string
diff --git a/packages/dev-server/server/manager.ts b/packages/dev-server/server/manager.ts
new file mode 100644
index 0000000..56a1029
--- /dev/null
+++ b/packages/dev-server/server/manager.ts
@@ -0,0 +1,49 @@
+import debounce from 'lodash.debounce'
+import EventEmitter from 'events'
+import { Server } from './index'
+
+interface ServerMessage {
+  type: string
+  [ key: string ]: any
+}
+
+export default class MarkletManager extends EventEmitter {
+  private messageQueue: ServerMessage[] = []
+  private server: Server
+
+  public update?(): void
+  public dispose?(reason: string): void
+  public debouncedUpdate: () => void
+
+  public initialize() {
+    this.on('update', (data) => {
+      if (!this.server) {
+        this.messageQueue.push(data)
+      } else {
+        this.server.wsServer.broadcast(JSON.stringify(data))
+      }
+    })
+
+    this.debouncedUpdate = debounce(() => this.update(), 200)
+    this.update()
+  }
+
+  public bind(server: Server) {
+    this.server = server
+    this.once('close', reason => server.dispose(reason))
+    server.wsServer.on('connection', (ws) => {
+      this.messageQueue.forEach(msg => ws.send(JSON.stringify(msg)))
+      if (server.serverType !== 'edit') return
+      ws.on('message', (message: string) => {
+        try {
+          const data = JSON.parse(message)
+          this.emit('client.message', data)
+          this.emit('client.' + data.type, data)
+        } catch (error) {
+          this.emit('client.error', error)
+        }
+      })
+    })
+    return this
+  }
+}
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index 277bd71..d3d5fed 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -1,9 +1,8 @@
-import { Server, Manager, WatchEventType, EditorConfig } from './index'
+import { WatchEventType, EditorConfig } from './index'
 import FileFilter, { StringLike } from './filter'
 import { LexerConfig } from '@marklet/parser'
-import debounce from 'lodash.debounce'
+import MarkletManager from './manager'
 import equal from 'fast-deep-equal'
-import EventEmitter from 'events'
 import DirTree from './tree'
 import * as yaml from 'js-yaml'
 import * as path from 'path'
@@ -20,26 +19,18 @@ export interface ProjectConfig {
 const JSON_EXTENSIONS = ['.js', '.json']
 const YAML_EXTENSIONS = ['.yml', '.yaml']
 
-interface ServerMessage {
-  type: string
-  [ key: string ]: any
-}
-
-export default class ProjectManager extends EventEmitter implements Manager {
+export default class ProjectManager extends MarkletManager {
   static EXTENSIONS = [...JSON_EXTENSIONS, ...YAML_EXTENSIONS]
 
   private tree: DirTree
-  private server: Server
   private filter: FileFilter
   private rawConfig: string
   private config: ProjectConfig
   private oldConfig: ProjectConfig
   private folderWatcher: fs.FSWatcher
   private configWatcher: fs.FSWatcher
-  private debouncedUpdate: () => void
   private delSet: Set<string> = new Set()
   private addSet: Set<string> = new Set()
-  private msgQueue: ServerMessage[] = []
   private configUpdated: boolean
   private basepath: string
   private basename: string
@@ -47,6 +38,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
 
   constructor(private filepath: string) {
     super()
+
     this.basepath = path.dirname(filepath)
     this.basename = path.basename(filepath)
     this.extension = path.extname(filepath).toLowerCase()
@@ -54,18 +46,9 @@ export default class ProjectManager extends EventEmitter implements Manager {
     const config = this.getConfig()
     this.filter = new FileFilter(config.extensions, config.ignore)
     this.tree = new DirTree(config.baseDir, this.filter)
-
-    this.on('update', (data) => {
-      if (!this.server) {
-        this.msgQueue.push(data)
-      } else {
-        this.server.wsServer.broadcast(JSON.stringify(data))
-      }
-    })
-
     this.tree.entryList.forEach(filepath => this.addSet.add(filepath))
-    this.debouncedUpdate = debounce(this.update.bind(this), 200)
-    this.update()
+
+    this.initialize()
 
     this.folderWatcher = fs.watch(this.config.baseDir, {
       recursive: true
@@ -120,7 +103,7 @@ export default class ProjectManager extends EventEmitter implements Manager {
     return this.config = config
   }
 
-  private update() {
+  public update() {
     for (const item of this.delSet) {
       this.tree.del(item)
     }
@@ -165,23 +148,6 @@ export default class ProjectManager extends EventEmitter implements Manager {
     // FIXME: events when a file content was changed
   }
 
-  public bind(server: Server): this {
-    this.server = server
-    this.once('close', reason => server.dispose(reason))
-    server.wsServer.on('connection', (ws) => {
-      this.msgQueue.forEach(msg => ws.send(JSON.stringify(msg)))
-      ws.on('message', data => {
-        const parsed = JSON.parse(<string>data)
-        switch (parsed.type) {
-          case 'content':
-            this.getContent(parsed.data)            
-            break
-        }
-      })
-    })
-    return this
-  }
-
   public getContent(path: string) {
     return this.tree.get(path)
   }

From 97c4bc269d94de5c4f4a39460a2701b6fc100103 Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 31 Oct 2018 19:26:09 +0800
Subject: [PATCH 46/47] client refactor

---
 packages/dev-server/client/file.ts    |  75 ------------
 packages/dev-server/client/files.ts   | 110 ++++++++++++++++++
 packages/dev-server/client/index.ts   | 159 +++++++++++++-------------
 packages/dev-server/comp/app.vue      |   2 +-
 packages/dev-server/comp/editor.js    |  94 ++++++---------
 packages/dev-server/server/file.ts    |   4 +
 packages/dev-server/server/index.html |   2 +-
 packages/dev-server/server/project.ts |   4 +
 8 files changed, 232 insertions(+), 218 deletions(-)
 delete mode 100644 packages/dev-server/client/file.ts
 create mode 100644 packages/dev-server/client/files.ts

diff --git a/packages/dev-server/client/file.ts b/packages/dev-server/client/file.ts
deleted file mode 100644
index 1933cbd..0000000
--- a/packages/dev-server/client/file.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import Monaco from 'monaco-editor'
-import Marklet from './index'
-
-let count = 0
-
-export interface FileOptions {
-  title?: string
-  value?: string
-  path?: string
-  origin?: string
-  id?: string
-  changed?: boolean
-}
-
-export default function(marklet: typeof Marklet) {
-  return class MarkletFile {
-    public value: string
-    public title: string
-    public path: string
-    public origin: string
-    public changed: boolean
-    public id: string
-
-    public model: Monaco.editor.ITextModel
-    public viewState: Monaco.editor.ICodeEditorViewState
-
-    constructor(options: FileOptions = {}) {
-      this.value = options.value
-      this.path = options.path
-      this.origin = options.origin
-      this.changed = options.changed
-      this.title = options.title || `Untitled ${++count}`
-      this.id = options.id || Math.floor(Math.random() * 36 ** 6).toString(36).padStart(6, '0')
-      marklet.$on('monaco.loaded', (monaco: typeof Monaco) => {
-        Object.defineProperty(this, 'model', {
-          configurable: false,
-          value: monaco.editor.createModel(this.value, 'marklet')
-        })
-      })
-    }
-
-    onModelChange(listener: (event: Monaco.editor.IModelContentChangedEvent) => void) {
-      this.model.onDidChangeContent(listener)
-    }
-
-    dispose() {
-      this.model.dispose()
-    }
-
-    checkChange(data: string) {
-      if (data !== undefined) this.origin = data
-      this.value = this.model.getValue(
-        marklet.editOptions.line_ending === 'LF' ? 1 : 2
-      )
-      this.changed = this.origin !== this.value
-    }
-
-    isEmpty() {
-      return this.path === null && this.origin === '' && this.model.getValue(1) === ''
-    }
-
-    save() {
-      // FIXME
-    }
-
-    toJSON() {
-      return {
-        title: this.title,
-        value: this.value,
-        path: this.path,
-        id: this.id,
-      }
-    }
-  }
-}
diff --git a/packages/dev-server/client/files.ts b/packages/dev-server/client/files.ts
new file mode 100644
index 0000000..05a79d2
--- /dev/null
+++ b/packages/dev-server/client/files.ts
@@ -0,0 +1,110 @@
+import Monaco from 'monaco-editor'
+import Marklet from './index'
+
+let count = 0
+
+export interface FileOptions {
+  title?: string
+  value?: string
+  path?: string
+  origin?: string
+  id?: string
+  changed?: boolean
+}
+
+class MarkletModel {
+  public value: string
+  public title: string
+  public path: string
+  public origin: string
+  public changed: boolean
+  public id: string
+
+  private marklet: typeof Marklet
+  public model: Monaco.editor.ITextModel
+  public viewState: Monaco.editor.ICodeEditorViewState
+
+  constructor(marklet: typeof Marklet, options: FileOptions = {}) {
+    this.value = options.value
+    this.path = options.path
+    this.origin = options.origin
+    this.changed = options.changed
+    this.title = options.title || `Untitled ${++count}`
+    this.id = options.id || Math.floor(Math.random() * 36 ** 6).toString(36).padStart(6, '0')
+    Object.defineProperty(this, 'marklet', {
+      configurable: false,
+      value: marklet,
+    })
+    marklet.$on('monaco.loaded', (monaco: typeof Monaco) => {
+      Object.defineProperty(this, 'model', {
+        configurable: false,
+        value: monaco.editor.createModel(this.value, 'marklet')
+      })
+      this.model.onDidChangeContent(() => this.checkChange())
+    })
+  }
+
+  dispose() {
+    this.model.dispose()
+  }
+
+  checkChange(data?: string) {
+    if (data !== undefined) this.origin = data
+    this.value = this.model.getValue(
+      this.marklet.editOptions.line_ending === 'LF' ? 1 : 2
+    )
+    this.changed = this.origin !== this.value
+  }
+
+  isEmpty() {
+    return this.path === null && this.origin === '' && this.model.getValue(1) === ''
+  }
+
+  toJSON() {
+    return {
+      title: this.title,
+      value: this.value,
+      path: this.path,
+      id: this.id,
+    }
+  }
+}
+
+export default class ContentManager {
+  public data: MarkletModel[] = []
+  private marklet: typeof Marklet
+
+  constructor(marklet: typeof Marklet) {
+    // FIXME: get data from local storage
+    Object.defineProperty(this, 'marklet', {
+      configurable: false,
+      value: marklet,
+    })
+    this.add({
+      path: '__untitled__',
+      title: 'untitled',
+    })
+
+    addEventListener('beforeunload', () => {
+      // FIXME: save to local storage
+    })
+  }
+
+  add(options: FileOptions) {
+    const instance = this.get(options.path)
+    if (instance) {
+      // FIXME: handle other properties updating
+      instance.value = options.value
+    } else {
+      this.data.push(new MarkletModel(this.marklet, options))
+    }
+  }
+
+  get(path: string) {
+    return this.data.find(instance => path === instance.path)
+  }
+
+  toJSON() {
+    return this.data
+  }
+}
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 1c77b4b..35e9bab 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -1,6 +1,6 @@
 import VueConstructor from 'vue'
 import Monaco from 'monaco-editor'
-import fileConstructor from './file'
+import ContentManager from './files'
 import defineLanguage from './language'
 import * as renderer from '@marklet/renderer'
 import { LexerConfig } from '@marklet/parser'
@@ -12,33 +12,29 @@ declare global {
 
 Vue.use(renderer)
 
-const eventBus = new Vue()
-
-eventBus.$on('monaco.loaded', (monaco: typeof Monaco) => {
-  monaco.languages.register({
-    id: 'marklet',
-    extensions: ['mkl', 'md'],
-  })
-  monaco.languages.setMonarchTokensProvider('marklet', defineLanguage())
-  eventBus.$emit('monaco.language.loaded', monaco)
-  monaco.editor.defineTheme('dark', require('../themes/dark'))
-  monaco.editor.defineTheme('simple', require('../themes/simple'))
-  if (!Vue.prototype.$colorize) {
-    Vue.prototype.$colorize = function(code: string, lang: string) {
-      return monaco.editor.colorize(code, lang, {})
-    }
-  }
-  eventBus.$emit('monaco.theme.loaded', monaco)
-})
+const typeMap = {
+  edit: '编辑',
+  watch: '监视',
+}
+
+const app = require('@/app.vue')
+
+export default new class MarkletClient {
+  public app: VueConstructor
+  public serverType: ServerType
+  public sourceType: SourceType
+  public editOptions: EditorConfig
+  public parseOptions: LexerConfig
+  public files: ContentManager
 
-const client = new class MarkletClient {
   private url: string
   private retry: boolean
-  private _timeout: number
+  private timeout: number
   private _interval: number
-  private ws: WebSocket
   private msgQueue: string[]
   private timerRef: number
+  private socket: WebSocket
+  private events: VueConstructor
 
   constructor({
     url = `ws://${location.host}/`,
@@ -48,95 +44,96 @@ const client = new class MarkletClient {
   } = {}) {
     this.url = url
     this.retry = retry
-    this._timeout = timeout
+    this.timeout = timeout
     this.msgQueue = []
+    this.events = new Vue()
+    this.files = new ContentManager(this)
     this.createWebSocket()
     this.interval = interval
+
+    this.$on('monaco.loaded', (monaco: typeof Monaco) => {
+      monaco.languages.register({
+        id: 'marklet',
+        extensions: ['mkl', 'md'],
+      })
+      monaco.languages.setMonarchTokensProvider('marklet', defineLanguage())
+      this.$emit('monaco.language.loaded', monaco)
+      monaco.editor.defineTheme('dark', require('../themes/dark'))
+      monaco.editor.defineTheme('simple', require('../themes/simple'))
+      if (!Vue.prototype.$colorize) {
+        Vue.prototype.$colorize = function(code: string, lang: string) {
+          return monaco.editor.colorize(code, lang, {})
+        }
+      }
+      this.$emit('monaco.theme.loaded', monaco)
+    })
+
+    addEventListener('beforeunload', () => this.dispose())
+  }
+  
+  public start(el: string | HTMLElement) {
+    document.title = 'Marklet - ' + typeMap[this.serverType]
+    return this.app = new Vue(app).$mount(el)
+  }
+
+  public $on(event: string | string[], callback: Function) {
+    this.events.$on(event, callback)
+  }
+
+  public $once(event: string, callback: Function) {
+    this.events.$once(event, callback)
   }
 
-  get interval() {
+  public $emit(event: string, ...args: any[]) {
+    this.events.$emit(event, ...args)
+  }
+
+  public get interval() {
     return this._interval
   }
 
-  set interval(value: number) {
+  public set interval(value: number) {
     this._interval = value
     window.clearInterval(this.timerRef)
     this.timerRef = window.setInterval(() => {
-      while (this.msgQueue.length > 0 && this.ws.readyState === 1) {
-        this.ws.send(this.msgQueue.shift())
+      while (this.msgQueue.length > 0 && this.socket.readyState === 1) {
+        this.socket.send(this.msgQueue.shift())
       }
     }, this._interval)
   }
 
-  createWebSocket() {
-    this.ws = new WebSocket(this.url)
-    this.ws.addEventListener('close', (event) => {
+  private createWebSocket() {
+    this.socket = new WebSocket(this.url)
+    this.socket.addEventListener('close', (event) => {
       if (event.code !== 1000 && this.retry) {
-        eventBus.$emit('ws.reconnect')
-        setTimeout(() => this.createWebSocket(), this._timeout)
+        this.$emit('ws.reconnect')
+        setTimeout(() => this.createWebSocket(), this.timeout)
       } else {
-        eventBus.$emit('ws.close')
+        this.$emit('ws.close')
       }
     })
-    this.ws.addEventListener('error', () => {
-      eventBus.$emit('ws.error')
+    this.socket.addEventListener('error', () => {
+      this.$emit('ws.error')
     })
-    this.ws.addEventListener('message', (event) => {
+    this.socket.addEventListener('message', (event) => {
       try {
         const data = JSON.parse(event.data)
-        eventBus.$emit('server.message', data)
-        eventBus.$emit('server.' + data.type, data)
+        this.$emit('server.message', data)
+        this.$emit('server.' + data.type, data)
       } catch (error) {
-        eventBus.$emit('server.error', error)
+        this.$emit('server.error', error)
       }
     })
-    this.ws.addEventListener('open', () => {
-      eventBus.$emit('ws.open')
+    this.socket.addEventListener('open', () => {
+      this.$emit('ws.open')
     })
-    eventBus.$on('client.message', (data: object) => {
+    this.$on('client.message', (data: object) => {
       this.msgQueue.push(JSON.stringify({ data }))
     })
   }
 
-  dispose() {
-    if (this.ws.readyState < 2) this.ws.close()
+  private dispose() {
+    if (this.socket.readyState < 2) this.socket.close()
     clearInterval(this.timerRef)
   }
-}()
-
-addEventListener('beforeunload', () => client.dispose())
-
-const typeMap = {
-  edit: '编辑',
-  watch: '监视',
-}
-
-const app = require('@/app.vue')
-
-export default new class Marklet {
-  app: VueConstructor
-  serverType: ServerType
-  sourceType: SourceType
-  editOptions: EditorConfig
-  parseOptions: LexerConfig
-  events = eventBus
-  client = client
-  File = fileConstructor(this)
-  
-  create(el: string | HTMLElement) {
-    document.title = 'Marklet - ' + typeMap[this.serverType]
-    return this.app = new Vue(app).$mount(el)
-  }
-
-  $on(event: string | string[], callback: Function) {
-    this.events.$on(event, callback)
-  }
-
-  $once(event: string, callback: Function) {
-    this.events.$once(event, callback)
-  }
-
-  $emit(event: string, ...args: any[]) {
-    this.events.$emit(event, ...args)
-  }
 }
diff --git a/packages/dev-server/comp/app.vue b/packages/dev-server/comp/app.vue
index 9398a1b..e545951 100644
--- a/packages/dev-server/comp/app.vue
+++ b/packages/dev-server/comp/app.vue
@@ -230,7 +230,7 @@ module.exports = {
   <div :class="[theme, { dragging }]" class="marklet">
     <div class="menubar">
       <ob-menubar from="menubar"/>
-      <span class="title">{{ currentFile.path || 'Untitled' }}</span>
+      <span class="title">{{ current.path || 'Untitled' }}</span>
     </div>
     <file-tree class="view explorer" :style="explorerStyle" :tree="tree"/>
     <div class="border left" ref="left" :style="leftBorderStyle"
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index 52b95f5..ccd3f81 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -5,13 +5,9 @@ module.exports = {
     tree: [],
     nodes: [],
     origin: '',
-    source: '',
-    loaded: false,
     changed: false,
-    files: {
-      __untitled__: new marklet.File({ title: 'untitled' }),
-    },
-    currentPath: '__untitled__',
+    files: marklet.files,
+    path: '__untitled__',
     config: {
       ...defaultConfig,
       ...marklet.parseOptions,
@@ -19,20 +15,22 @@ module.exports = {
   }),
 
   computed: {
-    currentFile() {
-      return this.files[this.currentPath]
+    current() {
+      return this.files.get(this.path)
     },
   },
 
   watch: {
-    source(value) {
-      this.nodes = this._lexer.parse(value)
+    'current.value': 'parse',
+    path() {
+      if (!this._editor) return
+      this._editor.setModel(this.current.model)
     },
     config: {
       deep: true,
-      handler(value) {
-        this._lexer = new DocumentLexer(value)
-        this.nodes = this._lexer.parse(this.source)
+      handler(config) {
+        this._lexer = new DocumentLexer(config)
+        this.parse()
       },
     },
   },
@@ -41,9 +39,6 @@ module.exports = {
     this._enableEdit = marklet.serverType === 'edit'
     this._isProject = marklet.sourceType !== 'file'
     this._lexer = new DocumentLexer(this.config)
-
-    const source = localStorage.getItem('source')
-    if (typeof source === 'string') this.source = source
   },
 
   mounted() {
@@ -52,13 +47,9 @@ module.exports = {
     })
 
     marklet.$on('server.document', ({ value, path }) => {
-      if (this.files[path]) {
-        this.files[path].value = value
-      } else {
-        this.$set(this.files, path, new marklet.File({ path, value }))
-      }
-      if (this.currentPath === '__untitled__') {
-        this.currentPath = path
+      this.files.add({ value, path })
+      if (this.path === '__untitled__') {
+        this.path = path
       }
     })
 
@@ -67,13 +58,6 @@ module.exports = {
     })
 
     marklet.$on('monaco.loaded', (monaco) => {
-      const model = monaco.editor.createModel(this.source, 'marklet')
-      model.onDidChangeContent(() => this.checkChange())
-      const nodes = this.nodes
-      this.nodes = []
-      this.$nextTick(() => this.nodes = nodes)
-      this._model = model
-
       if (this._editor) return
       this._editor = monaco.editor.create(this.$refs.editor, {
         model: null,
@@ -90,61 +74,51 @@ module.exports = {
         this.row = event.position.lineNumber
         this.column = event.position.column
       })
-      this._editor.setModel(this._model)
-      this.$nextTick(() => this.layout())
-      this.loaded = true
-    })
-
-    addEventListener('beforeunload', () => {
-      localStorage.setItem('source', this.source)
+      this.$nextTick(() => this.activate())
     })
   },
 
   methods: {
+    parse(source = this.current.value) {
+      this.nodes = this._lexer.parse(source)
+    },
     switchTo(path) {
-      if (this.currentPath === path) return
-      if (!this.files[path]) return
-      this.currentFile.viewState = this._editor.saveViewState()
-      this.currentPath = path
+      if (this.path === path) return
+      if (!this.files.get(path)) return
+      this.current.viewState = this._editor.saveViewState()
+      this.path = path
       this.activate()
     },
-    openFile(doc) {
-      if (this.loaded) {
-        this._model.setValue(doc)
-      } else {
-        this.source = doc
-      }
+    openFile() {
+      // 
     },
     save() {
-      // try to use functional APIs instead of events
-      // TODO: maybe file name is needed. depend on backend impl
-      marklet.$emit('client.message', 'save', this.source)
+      console.log({
+        type: 'save',
+        value: this.current.value,
+      })
+      // marklet.$emit('client.message', 'save', this.source)
     },
     saveAs() {
       marklet.$emit('client.message', 'saveAs', {
-        source: this.source,
+        source: this.current.value,
         name: '' // TODO: read file name
       })
     },
     saveAll() {
       // TODO: unclear requirement
     },
-    checkChange(data) {
-      if (data !== undefined) this.origin = data
-      this.source = this._model.getValue()
-      this.changed = this.origin !== this.source
-    },
     activate() {
       if (!this._editor) return
       monaco.editor.setTheme(this.theme)
-      this._editor.setModel(this.currentFile.model)
-      if (this.currentFile.viewState) {
-        this._editor.restoreViewState(this.currentFile.viewState)
+      this._editor.setModel(this.current.model)
+      if (this.current.viewState) {
+        this._editor.restoreViewState(this.current.viewState)
       }
       const position = this._editor.getPosition()
       this.row = position.lineNumber
       this.column = position.column
-      this.nodes = this._lexer.parse(this.currentFile.value)
+      this.parse()
       this.layout()
     },
     layout(deltaTime = 0) {
diff --git a/packages/dev-server/server/file.ts b/packages/dev-server/server/file.ts
index 31bfd58..2f187c0 100644
--- a/packages/dev-server/server/file.ts
+++ b/packages/dev-server/server/file.ts
@@ -26,6 +26,10 @@ export default class FileManager extends MarkletManager {
         this.debouncedUpdate()
       }
     })
+
+    this.on('client.save', ({ value }) => {
+      fs.writeFileSync(this.filepath, value)
+    })
   }
 
   public update() {
diff --git a/packages/dev-server/server/index.html b/packages/dev-server/server/index.html
index 76f10e1..aff83e5 100644
--- a/packages/dev-server/server/index.html
+++ b/packages/dev-server/server/index.html
@@ -20,7 +20,7 @@
     <div id="app"></div>
     <script>
       Vue.use(obui)
-      marklet.create('#app')
+      marklet.start('#app')
       if (marklet.serverType === 'edit') {
         require.config({ paths: { vs: '~/monaco-editor/min/vs' }})
         require(['vs/editor/editor.main'], () => {
diff --git a/packages/dev-server/server/project.ts b/packages/dev-server/server/project.ts
index d3d5fed..39a997f 100644
--- a/packages/dev-server/server/project.ts
+++ b/packages/dev-server/server/project.ts
@@ -70,6 +70,10 @@ export default class ProjectManager extends MarkletManager {
         this.debouncedUpdate()
       }
     })
+
+    this.on('client.save', ({ path: filepath, value }) => {
+      fs.writeFileSync(path.resolve(this.config.baseDir, filepath), value)
+    })
   }
 
   private getConfig() {

From 67b7d3ddeca98be9c3178f320ed6de5cb17a038e Mon Sep 17 00:00:00 2001
From: Shigma <1700011071@pku.edu.cn>
Date: Wed, 31 Oct 2018 21:14:58 +0800
Subject: [PATCH 47/47] save

---
 packages/dev-server/client/files.ts |  7 ++++++-
 packages/dev-server/client/index.ts |  2 +-
 packages/dev-server/comp/editor.js  | 24 +++++++++++++++---------
 packages/dev-server/comp/menus.json | 13 +++++++------
 packages/dev-server/package.json    |  3 ++-
 5 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/packages/dev-server/client/files.ts b/packages/dev-server/client/files.ts
index 05a79d2..d61217f 100644
--- a/packages/dev-server/client/files.ts
+++ b/packages/dev-server/client/files.ts
@@ -71,7 +71,7 @@ class MarkletModel {
 }
 
 export default class ContentManager {
-  public data: MarkletModel[] = []
+  private data: MarkletModel[] = []
   private marklet: typeof Marklet
 
   constructor(marklet: typeof Marklet) {
@@ -95,6 +95,7 @@ export default class ContentManager {
     if (instance) {
       // FIXME: handle other properties updating
       instance.value = options.value
+      if (instance.model) instance.model.setValue(options.value)
     } else {
       this.data.push(new MarkletModel(this.marklet, options))
     }
@@ -104,6 +105,10 @@ export default class ContentManager {
     return this.data.find(instance => path === instance.path)
   }
 
+  each(callback: (file: MarkletModel, index: number) => void) {
+    this.data.forEach(callback)
+  }
+
   toJSON() {
     return this.data
   }
diff --git a/packages/dev-server/client/index.ts b/packages/dev-server/client/index.ts
index 35e9bab..dcf8137 100644
--- a/packages/dev-server/client/index.ts
+++ b/packages/dev-server/client/index.ts
@@ -128,7 +128,7 @@ export default new class MarkletClient {
       this.$emit('ws.open')
     })
     this.$on('client.message', (data: object) => {
-      this.msgQueue.push(JSON.stringify({ data }))
+      this.msgQueue.push(JSON.stringify(data))
     })
   }
 
diff --git a/packages/dev-server/comp/editor.js b/packages/dev-server/comp/editor.js
index ccd3f81..c9bde48 100644
--- a/packages/dev-server/comp/editor.js
+++ b/packages/dev-server/comp/editor.js
@@ -1,11 +1,10 @@
 const { DocumentLexer, defaultConfig } = require('@marklet/parser')
+const saveAs = require('file-saver')
 
 module.exports = {
   data: () => ({
     tree: [],
     nodes: [],
-    origin: '',
-    changed: false,
     files: marklet.files,
     path: '__untitled__',
     config: {
@@ -90,23 +89,30 @@ module.exports = {
       this.activate()
     },
     openFile() {
-      // 
+      //
     },
     save() {
-      console.log({
+      marklet.$emit('client.message', {
         type: 'save',
+        path: this.path,
         value: this.current.value,
       })
-      // marklet.$emit('client.message', 'save', this.source)
     },
     saveAs() {
-      marklet.$emit('client.message', 'saveAs', {
-        source: this.current.value,
-        name: '' // TODO: read file name
+      const blob = new Blob([this.current.value], {
+        type: 'text/plain;charset=utf-8'
       })
+      saveAs(blob, this.path.match(/[^/]*$/)[0] || 'download.mkl')
     },
     saveAll() {
-      // TODO: unclear requirement
+      this.files.each((file) => {
+        if (!file.changed) return
+        marklet.$emit('client.message', {
+          type: 'save',
+          path: file.path,
+          value: file.value,
+        })
+      })
     },
     activate() {
       if (!this._editor) return
diff --git a/packages/dev-server/comp/menus.json b/packages/dev-server/comp/menus.json
index e70f9b3..960b625 100644
--- a/packages/dev-server/comp/menus.json
+++ b/packages/dev-server/comp/menus.json
@@ -5,15 +5,16 @@
       "caption": "文件",
       "mnemonic": "F",
       "children": [
-        { "command": "open-file", "mnemonic": "O" },
+        { "command": "open-file", "mnemonic": "O", "show": false },
         { "caption": "-" },
         { "command": "save", "mnemonic": "S" },
-        { "command": "save-as", "mnemonic": "A" },
+        { "command": "save-as", "mnemonic": "A", "show": false },
         { "command": "save-all", "mnemonic": "L" }
       ]
     },
     {
       "caption": "编辑",
+      "show": "$_enableEdit",
       "mnemonic": "E",
       "children": [
         { "command": "undo", "mnemonic": "U" },
@@ -32,11 +33,11 @@
       "caption": "视图",
       "mnemonic": "V",
       "children": [
-        { "command": "trigger-explorer", "mnemonic": "R" },
-        { "command": "trigger-editor", "mnemonic": "E" },
+        { "command": "trigger-explorer", "mnemonic": "R", "show": "$_isProject" },
+        { "command": "trigger-editor", "mnemonic": "E", "show": "$_enableEdit" },
         { "command": "trigger-document", "mnemonic": "D" },
-        { "caption": "-" },
-        { "command": "command-palette", "mnemonic": "C" },
+        { "caption": "-", "show": "$_enableEdit" },
+        { "command": "command-palette", "mnemonic": "C", "show": "$_enableEdit" },
         { "caption": "-" },
         {
           "caption": "主题",
diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
index 63d950d..8f28c8e 100644
--- a/packages/dev-server/package.json
+++ b/packages/dev-server/package.json
@@ -30,12 +30,13 @@
     "@marklet/parser": "^1.5.2",
     "@marklet/renderer": "^1.3.2",
     "fast-deep-equal": "^2.0.1",
+    "file-saver": "^2.0.0-rc.4",
     "lodash.debounce": "^4.0.8",
     "js-yaml": "^3.12.0",
     "minimatch": "^3.0.4",
     "monaco-editor": "^0.14.3",
     "mousetrap": "^1.6.2",
-    "obui": "^1.1.1",
+    "obui": "^1.1.3",
     "vue": "^2.5.17",
     "ws": "^6.0.0"
   }