84 lines
1.7 KiB
TypeScript
84 lines
1.7 KiB
TypeScript
|
import * as m from 'monaco-editor'
|
||
|
import { compile } from '@vue/compiler-dom'
|
||
|
|
||
|
const self = window as any
|
||
|
|
||
|
self.init = () => {
|
||
|
const monaco = (window as any).monaco as typeof m
|
||
|
const persistedContent =
|
||
|
decodeURIComponent(window.location.hash.slice(1)) ||
|
||
|
`<div>{{ foo + bar }}</div>`
|
||
|
|
||
|
self.compilerOptions = {
|
||
|
mode: 'module',
|
||
|
prefixIdentifiers: true,
|
||
|
hoistStatic: true
|
||
|
}
|
||
|
|
||
|
function compileCode(source: string): string {
|
||
|
console.clear()
|
||
|
try {
|
||
|
const { code, ast } = compile(source, self.compilerOptions)
|
||
|
|
||
|
console.log(ast)
|
||
|
return code
|
||
|
} catch (e) {
|
||
|
console.error(e)
|
||
|
return `/* See console for error */`
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const sharedOptions = {
|
||
|
theme: 'vs-dark',
|
||
|
fontSize: 14,
|
||
|
wordWrap: 'on',
|
||
|
scrollBeyondLastLine: false,
|
||
|
minimap: {
|
||
|
enabled: false
|
||
|
}
|
||
|
} as const
|
||
|
|
||
|
const editor = monaco.editor.create(
|
||
|
document.getElementById('source') as HTMLElement,
|
||
|
{
|
||
|
value: persistedContent,
|
||
|
language: 'html',
|
||
|
...sharedOptions
|
||
|
}
|
||
|
)
|
||
|
|
||
|
const model = editor.getModel()!
|
||
|
|
||
|
model.updateOptions({
|
||
|
tabSize: 2
|
||
|
})
|
||
|
|
||
|
model.onDidChangeContent(() => {
|
||
|
const src = editor.getValue()
|
||
|
window.location.hash = encodeURIComponent(src)
|
||
|
const res = compileCode(src)
|
||
|
if (res) {
|
||
|
output.setValue(res)
|
||
|
}
|
||
|
})
|
||
|
|
||
|
const output = monaco.editor.create(
|
||
|
document.getElementById('output') as HTMLElement,
|
||
|
{
|
||
|
value: compileCode(persistedContent),
|
||
|
language: 'javascript',
|
||
|
readOnly: true,
|
||
|
...sharedOptions
|
||
|
}
|
||
|
)
|
||
|
|
||
|
output.getModel()!.updateOptions({
|
||
|
tabSize: 2
|
||
|
})
|
||
|
|
||
|
window.addEventListener('resize', () => {
|
||
|
editor.layout()
|
||
|
output.layout()
|
||
|
})
|
||
|
}
|