Browse Source

Merge pull request #114 from csbun/feature/cli-with-editor

可以通过命令行打开 iMove 编辑器/GUI
master
Yang Pei 4 years ago
committed by GitHub
parent
commit
70d876d0a4
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 13
      mlc_config.json
  2. 26
      packages/cli/README.md
  3. 5
      packages/cli/index.js
  4. 9
      packages/cli/package.json
  5. 35
      packages/cli/src/cmd/editor/build.js
  6. 79
      packages/cli/src/cmd/editor/index.js
  7. 5
      packages/cli/src/cmd/editor/template/app.jsx
  8. 13
      packages/cli/src/cmd/editor/template/index.html
  9. 2
      packages/cli/src/cmd/index.js
  10. 7
      packages/cli/src/utils/server/index.js

13
mlc_config.json

@ -0,0 +1,13 @@
{
"ignorePatterns": [
{
"pattern": "^https?://0.0.0.0:\\d+"
},
{
"pattern": "^https?://127.0.0.1:\\d+"
},
{
"pattern": "^https?://localhost:\\d+"
}
]
}

26
packages/cli/README.md

@ -1 +1,27 @@
## iMove-cli
### Install
```bash
npm i -g @imove/cli
```
### Usage
- 初始化项目,创建 `imove.config.js`
```bash
imove -i
# OR
imove --init
```
- 启动开发服务及编辑器
```bash
imove -de
# OR
imove --dev --editor
```
浏览器打开 [http://127.0.0.1:3500/](http://127.0.0.1:3500/)

5
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();
}
});

9
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"
}
}

35
packages/cli/src/cmd/editor/build.js

@ -0,0 +1,35 @@
/* 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/dist/app.bundle.js'),
plugins: [
// fix import('antd/dist/antd.less')
{
name: 'resolve-antd-dist-less',
setup: (build) => {
build.onResolve(
{ filter: /antd\/dist\/antd\.less$/, namespace: 'file' },
() => {
return {
path: '',
watchFiles: undefined,
};
},
);
},
},
// less
lessLoader({
javascriptEnabled: true,
}),
],
})
.then(() => {
console.log('imove editor builded');
})
.catch(() => process.exit(1));

79
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._dbFile || (this.config || '').dbFile;
return dbFile;
}
set dbFile(val) {
this._dbFile = 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();
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;

5
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(<IMove />, document.getElementById('root'));

13
packages/cli/src/cmd/editor/template/index.html

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iMove Editor</title>
<link rel="stylesheet" href="dist/app.bundle.css" />
</head>
<body>
<div id="root" style="height:100vh"></div>
<script type="module" src="dist/app.bundle.js"></script>
</body>
</html>

2
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,
};

7
packages/cli/src/utils/server/index.js

@ -1,8 +1,15 @@
const express = require('express');
const bodyParser = require('body-parser');
const cachedServer = {};
const createServer = (port = 3500) => {
if (cachedServer[port]) {
return cachedServer[port];
}
const app = express();
cachedServer[port] = app;
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ extended: false }));
app.use((req, res, next) => {

Loading…
Cancel
Save