This commit is contained in:
parent
8750255b39
commit
ab21195e4b
|
@ -1,105 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<codemirror
|
|
||||||
v-model="welcomeCode"
|
|
||||||
placeholder="Code goes here..."
|
|
||||||
:style="{ height: '400px' }"
|
|
||||||
:autofocus="true"
|
|
||||||
:indent-with-tab="true"
|
|
||||||
:tab-size="2"
|
|
||||||
:extensions="extensions"
|
|
||||||
@blur="change()"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<component v-bind:is="currentTabComponent"></component>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref } from "vue";
|
|
||||||
import { Codemirror } from "vue-codemirror";
|
|
||||||
import { javascript } from "@codemirror/lang-javascript";
|
|
||||||
import { oneDark } from "@codemirror/theme-one-dark";
|
|
||||||
import { compileFile } from "@/compiler/sfc-compiler.js";
|
|
||||||
import { babelParse } from "@vue/compiler-sfc";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import { table } from "@/compiler/testCode";
|
|
||||||
|
|
||||||
// 这个 id 是 scopeId,用于 css scope,保证唯一即可
|
|
||||||
const id = Date.now().toString();
|
|
||||||
const scopeId = `data-v-${id}`;
|
|
||||||
|
|
||||||
const welcomeCode = ref(table);
|
|
||||||
|
|
||||||
const extensions = [javascript(), oneDark];
|
|
||||||
|
|
||||||
const change = (e) => {
|
|
||||||
console.log("change", e);
|
|
||||||
generateComponent(e);
|
|
||||||
};
|
|
||||||
|
|
||||||
const currentTabComponent = ref(eval(""));
|
|
||||||
|
|
||||||
const generateComponent = () => {
|
|
||||||
let compiled = {};
|
|
||||||
compileFile("TestCode.vue", welcomeCode.value, compiled);
|
|
||||||
|
|
||||||
if (compiled.errors.length > 0) {
|
|
||||||
ElMessage({
|
|
||||||
type: "error",
|
|
||||||
duration: 0,
|
|
||||||
showClose: true,
|
|
||||||
message: `
|
|
||||||
发生错误:
|
|
||||||
${compiled.errors[0]}
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
console.error(`发生错误`);
|
|
||||||
console.error(compiled.errors[0]);
|
|
||||||
throw compiled.errors[0];
|
|
||||||
} else {
|
|
||||||
var code = compiled.js;
|
|
||||||
var ast = babelParse(code, {
|
|
||||||
sourceType: "module",
|
|
||||||
});
|
|
||||||
var replaceCode = (node, subCode) =>
|
|
||||||
code.substring(0, node.start) + subCode + code.substring(node.end);
|
|
||||||
for (var i = ast.program.body.length - 1; i >= 0; i--) {
|
|
||||||
var node = ast.program.body[i];
|
|
||||||
if (node.type === "ImportDeclaration") {
|
|
||||||
code = replaceCode(
|
|
||||||
node,
|
|
||||||
node.specifiers
|
|
||||||
.map(
|
|
||||||
(it) =>
|
|
||||||
`const ${
|
|
||||||
it.local?.name || it.imported?.name || "*"
|
|
||||||
} = ___grape__import__('${node.source.value}', '${
|
|
||||||
it.imported?.name || "*"
|
|
||||||
}');`
|
|
||||||
)
|
|
||||||
.join("\r\n")
|
|
||||||
);
|
|
||||||
} else if (node.type === "ExportDefaultDeclaration") {
|
|
||||||
code = replaceCode(node, `return ${node.declaration.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
code = `(function(){
|
|
||||||
${code}
|
|
||||||
})()`;
|
|
||||||
|
|
||||||
var componentStyle = document.createElement("style");
|
|
||||||
componentStyle.innerHTML = compiled.css;
|
|
||||||
document.head.appendChild(componentStyle);
|
|
||||||
currentTabComponent.value = eval(code);
|
|
||||||
// app.component(item.name, eval(code));
|
|
||||||
// console.log(code);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
generateComponent()
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -70,7 +70,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { nextTick, ref, watch } from "vue";
|
import { nextTick, ref, watch } from "vue";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import { Message } from "@arco-design/web-vue";
|
// import { Message } from "@arco-design/web-vue";
|
||||||
|
|
||||||
import UIHeader from "./ui/ui-header.vue";
|
import UIHeader from "./ui/ui-header.vue";
|
||||||
import UITableDataModel from "./ui/ui-table-datamodel.vue";
|
import UITableDataModel from "./ui/ui-table-datamodel.vue";
|
||||||
|
|
Loading…
Reference in New Issue