Marklet v1.4

.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
+packages/app/index.html

build/build.js

@@ -37,20 +37,25 @@ 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: {
       path: util.resolve(name, 'dist'),
       filename: options.output,
-      library: 'Marklet',
+      library: 'marklet',
       libraryTarget: 'umd',
       libraryExport: options.libraryExport,
       globalObject: 'typeof self !== \'undefined\' ? self : this'
     }
   })
 
   new webpack.ProgressPlugin().apply(compiler)
+
+  new webpack.DefinePlugin({
+    'process.env.MARKLET_ENV': JSON.stringify(env),
+  }).apply(compiler)
 
   compiler.run((error, stat) => {
     if (error) {
@@ -104,14 +109,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,14 +131,9 @@ Promise.resolve().then(() => {
     }
   }
 
-  minifyHTML('edit')
-  minifyHTML('watch')
+  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,
@@ -143,10 +144,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)
       }
@@ -167,7 +169,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)
@@ -176,9 +178,9 @@ Promise.resolve().then(() => {
       })
     })
   }).then(() => bundle('dev-server', {
-    entry: 'dist/client.js',
+    entry: 'dist/client/index.js',
     output: 'client.min.js',
-    libraryExport: 'Marklet',
+    libraryExport: 'default',
   }))
 }).catch((error) => {
   console.log(error)

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",

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"

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

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.')
@@ -6,6 +8,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 = path.resolve(process.cwd(), filepath)
     console.log(options)
   })

packages/cli/commands/edit.js

@@ -1,13 +1,17 @@
 const open = require('opn')
+const util = require('../util')
 const server = require('@marklet/dev-server')
 
 module.exports = program => program
   .command('edit [filepath|dirpath]')
   .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()
+    if (filepath) {
+      options.filepath = util.fullPath(filepath)
+    }
     server.edit(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)

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.')
     }
   })

packages/cli/commands/watch.js

@@ -1,13 +1,15 @@
 const open = require('opn')
+const util = require('../util')
 const server = require('@marklet/dev-server')
 
 module.exports = program => program
   .command('watch [filepath|dirpath]')
   .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 = util.fullPath(filepath)
     server.watch(options)
     if (this.open) {
       open(`http://localhost:${options.port || 8080}`)

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,11 +19,10 @@
     "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",
     "opn": "^5.4.0"
   }
 }