images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-07-03 10:33:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: with TypeScript (#24)

Browse Source 
* refactor: add ts support (#19)

Co-authored-by: 逆寒 <869732751@qq.com>
This commit is contained in:
Amour1688
2020-07-09 20:51:47 +08:00
committed by GitHub
parent 3d49271878
commit bc4ef2c028
18 changed files with 430 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/jsx-explorer/package.json
View File

@ -8,12 +8,13 @@
"devDependencies": {
"@ant-design-vue/babel-plugin-jsx": "^1.0.0-alpha.6",
"@babel/core": "^7.0.0",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"monaco-editor-webpack-plugin": "^1.9.0",
"style-loader": "^1.2.1",
"ts-loader": "^8.0.0",
"typescript": "^3.9.6",
"url-loader": "^4.1.0",
"vue": "3.0.0-beta.20",
"webpack": "^4.43.0",

36
packages/jsx-explorer/src/index.js → packages/jsx-explorer/src/index.ts
View File

@ -12,13 +12,15 @@ createApp(
() => h('h1', null, 'Vue JSX Explorer'),
).mount('#header');
// @ts-ignore
if (module.hot) {
// @ts-ignore
module.hot.accept('../../babel-plugin-jsx/src', () => {
compile();
});
}
const sharedEditorOptions = {
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
@ -39,14 +41,14 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
typeRoots: ['node_modules/@types'],
});
const editor = monaco.editor.create(document.getElementById('source'), {
const editor = monaco.editor.create(document.getElementById('source')!, {
value: decodeURIComponent(window.location.hash.slice(1)) || localStorage.getItem('state') || 'const App = () => <div>Hello World</div>',
language: 'javascript',
tabSize: 2,
...sharedEditorOptions,
});
const output = monaco.editor.create(document.getElementById('output'), {
const output = monaco.editor.create(document.getElementById('output')!, {
value: '',
language: 'javascript',
readOnly: true,
@ -63,12 +65,13 @@ const compile = () => {
babelrc: false,
plugins: [[babelPluginJSx, { transformOn: true }]],
ast: true,
}, (err, result) => {
}, (err, result = {}) => {
const res = result!;
if (!err) {
console.log('AST', result.ast);
output.setValue(result.code);
console.log('AST', res.ast!);
output.setValue(res.code!);
} else {
output.setValue(err.message);
output.setValue(err.message!);
}
});
};
@ -84,15 +87,18 @@ compile();
// update compile output when input changes
editor.onDidChangeModelContent(debounce(compile));
function debounce(fn, delay = 300) {
let prevTimer = null;
return ((...args) => {
function debounce<T extends (...args: any[]) => any>(
fn: T,
delay: number = 300
): T {
let prevTimer: number | null = null
return ((...args: any[]) => {
if (prevTimer) {
clearTimeout(prevTimer);
clearTimeout(prevTimer)
}
prevTimer = window.setTimeout(() => {
fn(...args);
prevTimer = null;
}, delay);
});
fn(...args)
prevTimer = null
}, delay)
}) as any
}