vue3-yuanma/packages/template-explorer/src/index.ts

84 lines
1.7 KiB
TypeScript
Raw Normal View History

2019-10-04 17:08:06 +00:00
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()
})
}