From 0d60cd5259a3a4811a58611109d1b78f66dde4cd Mon Sep 17 00:00:00 2001 From: Hans Chan Date: Wed, 14 Jul 2021 15:43:40 +0800 Subject: [PATCH] feat(cli): add cli-editor to open local editor --- .gitignore | 2 +- packages/cli/.gitignore | 1 + packages/cli/.npmignore | 1 + packages/cli/index.js | 5 +- packages/cli/package.json | 9 ++- packages/cli/src/cmd/editor/build.js | 30 +++++++ packages/cli/src/cmd/editor/index.js | 79 +++++++++++++++++++ packages/cli/src/cmd/editor/template/app.jsx | 5 ++ .../cli/src/cmd/editor/template/index.html | 14 ++++ packages/cli/src/cmd/index.js | 2 + 10 files changed, 143 insertions(+), 5 deletions(-) create mode 100644 packages/cli/.gitignore create mode 100644 packages/cli/src/cmd/editor/build.js create mode 100644 packages/cli/src/cmd/editor/index.js create mode 100644 packages/cli/src/cmd/editor/template/app.jsx create mode 100644 packages/cli/src/cmd/editor/template/index.html diff --git a/.gitignore b/.gitignore index 215f97b..fc6cd88 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,4 @@ example/src/.umi-test example/.env.local # eslint -.eslint-error.log \ No newline at end of file +.eslint-error.log diff --git a/packages/cli/.gitignore b/packages/cli/.gitignore new file mode 100644 index 0000000..332d941 --- /dev/null +++ b/packages/cli/.gitignore @@ -0,0 +1 @@ +src/cmd/editor/template/*.bundle.* diff --git a/packages/cli/.npmignore b/packages/cli/.npmignore index 3c3629e..e037888 100644 --- a/packages/cli/.npmignore +++ b/packages/cli/.npmignore @@ -1 +1,2 @@ node_modules +src/cmd/editor/template/*.bundle.* diff --git a/packages/cli/index.js b/packages/cli/index.js index 2eea6c2..1fb6e33 100755 --- a/packages/cli/index.js +++ b/packages/cli/index.js @@ -8,13 +8,14 @@ const pkg = require(path.join(__dirname, './package.json')); program .version(pkg.version) .option('-d, --dev', '本地开发') + .option('-e, --editor', '开启编辑器') .option('-i, --init', '初始化配置文件') .parse(process.argv); Object.keys(cmds).forEach((cmd) => { const CmdCtor = cmds[cmd]; - if(program[cmd]) { - const cmdInst = new CmdCtor({config: getConfig()}); + if (program[cmd]) { + const cmdInst = new CmdCtor({ config: getConfig() }); cmdInst.run(); } }); diff --git a/packages/cli/package.json b/packages/cli/package.json index c72d0b3..0137d24 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -11,7 +11,8 @@ "compile" ], "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "build:editor": "node src/cmd/editor/build.js", + "postinstall": "npm run build:editor" }, "repository": { "type": "git", @@ -21,11 +22,15 @@ "license": "MIT", "dependencies": { "@imove/compile-code": "^0.1.0", + "@imove/core": "^0.3.0", "body-parser": "^1.19.0", "commander": "^6.0.0", "cors": "^2.8.5", + "esbuild": "^0.12.15", + "esbuild-plugin-less": "^1.0.7", "eventemitter3": "^4.0.7", "express": "^4.17.1", - "fs-extra": "^9.0.1" + "fs-extra": "^9.0.1", + "lowdb": "^1.0.0" } } diff --git a/packages/cli/src/cmd/editor/build.js b/packages/cli/src/cmd/editor/build.js new file mode 100644 index 0000000..1b540ec --- /dev/null +++ b/packages/cli/src/cmd/editor/build.js @@ -0,0 +1,30 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const path = require('path'); +const { lessLoader } = require('esbuild-plugin-less'); + +require('esbuild') + .build({ + bundle: true, + entryPoints: [path.join(__dirname, 'template/app.jsx')], + outfile: path.join(__dirname, 'template/app.bundle.js'), + plugins: [ + { + name: 'resolve-antd-dist-less', + setup: (build) => { + build.onResolve( + { filter: /antd\/dist\/antd\.less$/, namespace: 'file' }, + () => { + return { + path: '', + watchFiles: undefined, + }; + }, + ); + }, + }, + lessLoader({ + javascriptEnabled: true, + }), + ], + }) + .catch(() => process.exit(1)); diff --git a/packages/cli/src/cmd/editor/index.js b/packages/cli/src/cmd/editor/index.js new file mode 100644 index 0000000..e356e34 --- /dev/null +++ b/packages/cli/src/cmd/editor/index.js @@ -0,0 +1,79 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +const fs = require('fs-extra'); +const path = require('path'); +const low = require('lowdb'); +const FileSync = require('lowdb/adapters/FileSync'); +const express = require('express'); +const Base = require('../base'); +const { createServer } = require('../../utils/server'); + +class Editor extends Base { + constructor(...args) { + super(...args); + if (!this.dbFile) { + fs.ensureDirSync(this.outputPath); + this.dbFile = path.join(this.outputPath, 'db.json'); + } + // make sure dbFile existed + fs.createFileSync(this.dbFile); + + const adapter = new FileSync(this.dbFile); + this.db = low(adapter); + } + + get projectName() { + const { projectName = 'default' } = this.config || ''; + return projectName; + } + + get outputPath() { + const { outputPath } = this.config || ''; + return outputPath; + } + + get dbFile() { + const { dbFile } = this._dfFile || this.config || ''; + return dbFile; + } + + set dbFile(val) { + this._dfFile = val; + } + + queryGraph(req, res) { + const data = this.db.get(this.projectName).value() || []; + res.send({ status: 200, code: 0, success: true, data: { cells: data } }); + } + + modifyGraph(req, res) { + const { actions = [] } = req.body; + const projectData = this.db.get(this.projectName).value() || []; + actions.forEach((action) => { + const { data, actionType } = action; + if (actionType === 'create') { + projectData.push(data); + } else if (actionType === 'update') { + const foundIdx = projectData.findIndex((item) => item.id === data.id); + if (foundIdx > -1) { + projectData[foundIdx] = data; + } + } else if (actionType === 'remove') { + const foundIdx = projectData.findIndex((item) => item.id === data.id); + if (foundIdx > -1) { + projectData.splice(foundIdx, 1); + } + } + }); + this.db.set(this.projectName, projectData).write(); + res.send({ status: 200, code: 0, success: true, data: [] }); + } + + run() { + const server = createServer(8000); + server.use(express.static(path.join(__dirname, './template'))); + server.post('/api/queryGraph', this.queryGraph.bind(this)); + server.post('/api/modifyGraph', this.modifyGraph.bind(this)); + } +} + +module.exports = Editor; diff --git a/packages/cli/src/cmd/editor/template/app.jsx b/packages/cli/src/cmd/editor/template/app.jsx new file mode 100644 index 0000000..f2250a0 --- /dev/null +++ b/packages/cli/src/cmd/editor/template/app.jsx @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import IMove from '@imove/core'; + +ReactDOM.render(, document.getElementById('root')); diff --git a/packages/cli/src/cmd/editor/template/index.html b/packages/cli/src/cmd/editor/template/index.html new file mode 100644 index 0000000..b2240f8 --- /dev/null +++ b/packages/cli/src/cmd/editor/template/index.html @@ -0,0 +1,14 @@ + + + + + + iMove Editor + + + + +
+ + + diff --git a/packages/cli/src/cmd/index.js b/packages/cli/src/cmd/index.js index ffe5e78..f901674 100644 --- a/packages/cli/src/cmd/index.js +++ b/packages/cli/src/cmd/index.js @@ -1,7 +1,9 @@ const Dev = require('./dev'); const Init = require('./init'); +const Editor = require('./editor'); module.exports = { dev: Dev, init: Init, + editor: Editor, };