2020-06-14 16:18:50 +08:00
|
|
|
/* eslint-disable no-console */
|
|
|
|
// eslint-disable-next-line import/no-unresolved
|
2020-06-13 11:23:47 +08:00
|
|
|
import * as monaco from 'monaco-editor';
|
2020-06-14 16:18:50 +08:00
|
|
|
import { h, createApp } from 'vue';
|
2020-06-13 11:23:47 +08:00
|
|
|
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
|
|
|
|
|
2020-06-14 16:18:50 +08:00
|
|
|
createApp(
|
|
|
|
() => h('h1', null, 'Vue JSX Explorer'),
|
|
|
|
).mount('#header');
|
|
|
|
|
2020-06-13 11:23:47 +08:00
|
|
|
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);
|
2020-06-14 16:18:50 +08:00
|
|
|
console.clear();
|
2020-06-13 11:23:47 +08:00
|
|
|
transform(src, {
|
|
|
|
babelrc: false,
|
2020-06-14 16:18:50 +08:00
|
|
|
plugins: [[babelPluginJSx, { transformOn: true }]],
|
|
|
|
ast: true,
|
2020-06-13 11:23:47 +08:00
|
|
|
}, (err, result) => {
|
|
|
|
if (!err) {
|
2020-06-14 16:18:50 +08:00
|
|
|
console.log('AST', result.ast);
|
2020-06-13 11:23:47 +08:00
|
|
|
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);
|
|
|
|
});
|
|
|
|
}
|