Skip to content

Commit b9b1445

Browse files
g0ngjieg0ngjie
authored
Merge pull request #31 from g0ngjie/feature/function-override
Feature/function override
2 parents a687ce7 + ddccc2b commit b9b1445

30 files changed

+2603
-1170
lines changed

‎packages/code-editor/.babelrc

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"plugins": [
3+
[
4+
"component",
5+
{
6+
// 组件库的名字，需要和 package.json 里的 name 相同；
7+
"libraryName": "@proxy/code-editor",
8+
// 存放组件的文件夹，如果不想配置此项，默认文件夹的名字为 lib；
9+
"libDir": "lib"
10+
}
11+
]
12+
]
13+
}

‎packages/code-editor/babel.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: ['@vue/cli-plugin-babel/preset']
3+
}

‎packages/code-editor/examples/App.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<div>
3+
<div>code-editor demo</div>
4+
<vue-code-editor
5+
ref="codeEditor"
6+
v-model="codeText"
7+
@change="handleChange"
8+
/>
9+
<button type="button" @click="reset">reset</button>
10+
</div>
11+
</template>
12+
13+
<script>
14+
import { VueCodeEditor } from "../packages/index";
15+
export default {
16+
data() {
17+
return {
18+
codeText: "",
19+
};
20+
},
21+
22+
components: {
23+
VueCodeEditor,
24+
},
25+
26+
methods: {
27+
handleChange(value) {
28+
// console.log("value:", value);
29+
},
30+
reset() {
31+
this.$refs.codeEditor.setValue();
32+
},
33+
},
34+
};
35+
</script>

‎packages/code-editor/examples/main.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
4+
new Vue({
5+
render: h => h(App),
6+
}).$mount('#app')

‎packages/code-editor/package.json

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
{
2+
"name": "@proxy/code-editor",
3+
"version": "1.0.0",
4+
"private": true,
5+
"description": "A code editor of vue",
6+
"main": "lib/index.common.js",
7+
"files": [
8+
"lib"
9+
],
10+
"scripts": {
11+
"build": "vue-cli-service build --target lib --name index --dest lib packages/index.js",
12+
"serve": "vue-cli-service serve"
13+
},
14+
"dependencies": {
15+
"ace-builds": "^1.13.1",
16+
"core-js": "^3.6.5",
17+
"vue": "2.6.10"
18+
},
19+
"eslintConfig": {
20+
"root": true,
21+
"env": {
22+
"node": true
23+
},
24+
"extends": [
25+
"plugin:vue/essential",
26+
"eslint:recommended"
27+
],
28+
"parserOptions": {
29+
"parser": "babel-eslint"
30+
},
31+
"rules": {}
32+
},
33+
"browserslist": [
34+
"> 1%",
35+
"last 2 versions",
36+
"not dead"
37+
],
38+
"devDependencies": {
39+
"@vue/cli-plugin-babel": "~4.5.0",
40+
"@vue/cli-service": "~4.5.0",
41+
"babel-eslint": "^10.1.0",
42+
"eslint": "^6.7.2",
43+
"eslint-plugin-vue": "^6.2.2",
44+
"vue-template-compiler": "2.6.10"
45+
}
46+
}

‎packages/code-editor/packages/index.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import VueCodeEditor from "./index.vue";
2+
3+
// 动态引入src目录下的所有index.js
4+
function install(Vue) {
5+
Vue.component(VueCodeEditor.name, VueCodeEditor);
6+
}
7+
8+
if (typeof window !== "undefined" && window.Vue) {
9+
install(window.Vue);
10+
}
11+
12+
export default { install };
13+
export { VueCodeEditor }

‎packages/code-editor/packages/index.vue

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div ref="ace"></div>
3+
</template>
4+
5+
<script>
6+
import { getDefaultContent, useInit } from "./useEditor";
7+
// this.aceEditor.getSession().on('change', () => {
8+
// this.aceEditor.getSession().getValue()
9+
// })
10+
export default {
11+
name: "CodeEditor",
12+
props: {
13+
value: {
14+
type: String,
15+
default: "",
16+
},
17+
},
18+
watch: {
19+
value: {
20+
immediate: true,
21+
async handler(val) {
22+
if (!this.internalChange) {
23+
this.setValue(val);
24+
}
25+
},
26+
deep: true,
27+
},
28+
},
29+
data() {
30+
return {
31+
aceEditor: null,
32+
internalChange: false,
33+
};
34+
},
35+
36+
methods: {
37+
initEditor() {
38+
this.aceEditor = useInit(this.$refs.ace);
39+
40+
this.aceEditor.getSession().on("change", () => {
41+
this.$emit("change", this.aceEditor.getSession().getValue());
42+
this.internalChange = true;
43+
this.$emit("input", this.aceEditor.getSession().getValue());
44+
this.$nextTick(() => {
45+
this.internalChange = false;
46+
});
47+
});
48+
this.setValue(this.value);
49+
},
50+
setValue(value) {
51+
if (this.aceEditor) {
52+
if (!value) this.aceEditor.setValue(getDefaultContent());
53+
else this.aceEditor.setValue(value);
54+
}
55+
},
56+
},
57+
mounted() {
58+
this.initEditor();
59+
},
60+
};
61+
</script>
62+
63+
<style></style>

‎packages/code-editor/packages/useEditor.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import ace from "ace-builds";
2+
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
3+
// 根据自己的需求按需引入
4+
import "ace-builds/src-noconflict/ext-language_tools";
5+
import "ace-builds/src-noconflict/theme-monokai"; // 主题
6+
import "ace-builds/src-noconflict/mode-javascript"; // 语言模式
7+
import "ace-builds/src-noconflict/snippets/javascript"; //代码提示
8+
9+
// https://ace.c9.io/#nav=howto
10+
// 初始化
11+
export function useInit(container) {
12+
// 初始化
13+
const target = ace.edit(container, {
14+
maxLines: 20, // 最大行数，超过会自动出现滚动条
15+
minLines: 20, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
16+
fontSize: 14, // 编辑器内字体大小
17+
theme: "ace/theme/monokai", // 主题
18+
mode: "ace/mode/javascript", // 默认设置的语言模式
19+
tabSize: 4, // 制表符设置为 4 个空格大小
20+
});
21+
target.setOptions({
22+
enableSnippets: true,
23+
enableLiveAutocompletion: true,
24+
enableBasicAutocompletion: true,
25+
});
26+
27+
// TODO: 自定义提示
28+
// customCompletions(target)
29+
30+
return target;
31+
}
32+
33+
// 自定义提示
34+
function customCompletions(target) {
35+
target.completers.push({
36+
getCompletions: function (state, session, pos, prefix, callback) {
37+
if (prefix.length === 0) {
38+
callback(null, []);
39+
return;
40+
}
41+
callback(null, [
42+
{ meta: 'todo', caption: 'AND', value: 'AND', score: 1 },
43+
]);
44+
},
45+
});
46+
}
47+
48+
// 默认内容
49+
export function getDefaultContent() {
50+
const defaultContent =
51+
`
52+
function setup(req, res, next) {
53+
// ...todo
54+
// type next = { override?: string, status?: string | number }
55+
// override === "" // use default override
56+
// status === "" // use default customStatusCode
57+
next({ override: "", status: "" });
58+
}
59+
`
60+
return defaultContent
61+
}

‎packages/code-editor/public/index.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<title>
9+
<%= htmlWebpackPlugin.options.title %>
10+
</title>
11+
</head>
12+
13+
<body>
14+
<noscript>
15+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
16+
Please enable it to continue.</strong>
17+
</noscript>
18+
<div id="app"></div>
19+
<!-- built files will be auto injected -->
20+
</body>
21+
22+
</html>

‎packages/code-editor/vue.config.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
const isProduction = process.env.NODE_ENV === "production";
3+
4+
module.exports = {
5+
publicPath: './',
6+
runtimeCompiler: true,
7+
// 修改 src 为 examples
8+
pages: {
9+
index: {
10+
entry: "examples/main.js",
11+
template: "public/index.html",
12+
filename: "index.html",
13+
},
14+
},
15+
productionSourceMap: false,
16+
configureWebpack: (config) => {
17+
if (isProduction) {
18+
config.module.rules.push({
19+
test: /\.mjs$/,
20+
include: /node_modules/,
21+
type: "javascript/auto"
22+
});
23+
// 取消webpack警告的性能提示
24+
config.performance = {
25+
hints: "warning",
26+
//入口起点的最大体积
27+
maxEntrypointSize: 50000000,
28+
//生成文件的最大体积
29+
maxAssetSize: 30000000,
30+
};
31+
}
32+
},
33+
}

‎packages/json-editor/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"dependencies": {
1515
"core-js": "^3.6.5",
1616
"jsoneditor": "^9.9.2",
17-
"vue": "2.6.10"
17+
"vue": "^2.6.11"
1818
},
1919
"eslintConfig": {
2020
"root": true,
@@ -41,6 +41,6 @@
4141
"babel-eslint": "^10.1.0",
4242
"eslint": "^6.7.2",
4343
"eslint-plugin-vue": "^6.2.2",
44-
"vue-template-compiler": "2.6.10"
44+
"vue-template-compiler": "2.6.11"
4545
}
4646
}

0 commit comments

Comments
 (0)