2020-06-13 11:23:47 +08:00

89 lines
2.0 KiB
JavaScript

import * as monaco from 'monaco-editor';
import { transform } from '@babel/core';
import babelPluginJSx from '../../babel-plugin-jsx/src';
import './index.css';
// or import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
// if shipping only a subset of the features & languages is desired
if (module.hot) {
module.hot.accept('../../babel-plugin-jsx/src', () => {
compile();
});
}
const sharedEditorOptions = {
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowJs: true,
allowNonTsExtensions: true,
lib: [],
jsx: monaco.languages.typescript.JsxEmit.React,
target: monaco.languages.typescript.ScriptTarget.Latest,
typeRoots: ['node_modules/@types'],
});
const editor = monaco.editor.create(document.getElementById('source'), {
value: localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
language: 'javascript',
tabSize: 2,
...sharedEditorOptions,
});
const output = monaco.editor.create(document.getElementById('output'), {
value: '',
language: 'javascript',
readOnly: true,
tabSize: 2,
...sharedEditorOptions,
});
const compile = () => {
const src = editor.getValue();
localStorage.setItem('state', src);
transform(src, {
babelrc: false,
plugins: [babelPluginJSx],
}, (err, result) => {
if (!err) {
output.setValue(result.code);
} else {
output.setValue(err.message);
}
});
};
// handle resize
window.addEventListener('resize', () => {
editor.layout();
output.layout();
});
compile();
// update compile output when input changes
editor.onDidChangeModelContent(debounce(compile));
function debounce(fn, delay = 300) {
let prevTimer = null;
return ((...args) => {
if (prevTimer) {
clearTimeout(prevTimer);
}
prevTimer = window.setTimeout(() => {
fn(...args);
prevTimer = null;
}, delay);
});
}