99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<script>
|
|
|
|
import ResultCode from '../components/ResultCode.vue';
|
|
import CodeEditor from '../components/CodeEditor.vue';
|
|
import settingsService from '../services/settingsService';
|
|
import codeService from '../services/codeService';
|
|
|
|
import Worker from '../file.worker.js?worker';
|
|
|
|
// const lodash = await fetch('https://registry.npmjs.org/lodash');
|
|
|
|
import Splitter from 'primevue/splitter';
|
|
import SplitterPanel from 'primevue/splitterpanel';
|
|
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Splitter, SplitterPanel,
|
|
ResultCode, CodeEditor,
|
|
},
|
|
data() {
|
|
codeService.ee.on('change', code => this.run(code));
|
|
return {
|
|
worker: null,
|
|
result: '',
|
|
}
|
|
},
|
|
methods: {
|
|
run(code) {
|
|
this.terminate();
|
|
this.result = '';
|
|
|
|
this.worker = new Worker();
|
|
|
|
this.worker.onmessage = ({ data }) => {
|
|
if (data === '') return;
|
|
this.result += `${data}\n`;
|
|
};
|
|
|
|
this.worker.onerror = error => {
|
|
this.result += error.message;
|
|
};
|
|
|
|
this.worker.postMessage({
|
|
code,
|
|
settings: settingsService.get(),
|
|
});
|
|
},
|
|
terminate() {
|
|
if (this.worker) {
|
|
this.worker.terminate();
|
|
this.worker = null;
|
|
}
|
|
},
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
main {
|
|
height: 100%;
|
|
}
|
|
|
|
.left-pane {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.right-pane {
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
outline-width: 0;
|
|
}
|
|
</style>
|
|
<style>
|
|
.p-splitter {
|
|
border: none !important;
|
|
}
|
|
.p-splitter-gutter {
|
|
outline-width: 0;
|
|
}
|
|
.p-splitter-gutter-handle:focus {
|
|
box-shadow: none !important;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<main>
|
|
<Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
|
|
<SplitterPanel class="left-pane">
|
|
<CodeEditor/>
|
|
</SplitterPanel>
|
|
<SplitterPanel class="right-pane">
|
|
<ResultCode :data="result"/>
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
</main>
|
|
</template>
|