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

refactor: upgrade project setup (#646)

Browse Source
This commit is contained in:
三咲智子 Kevin Deng
2023-06-22 12:14:02 +08:00
committed by GitHub
parent 687be8aca8
commit dbba3205e4
53 changed files with 6861 additions and 12397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/jsx-explorer/src/index.css
View File

@ -1,6 +1,7 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#header {

93
packages/jsx-explorer/src/index.ts
View File

@ -1,42 +1,40 @@
/* eslint-disable no-console */
// eslint-disable-next-line import/no-unresolved
import * as m from 'monaco-editor';
import * as monaco from 'monaco-editor';
import { watchEffect } from 'vue';
import { transform } from '@babel/core';
import babelPluginJsx from '../../babel-plugin-jsx/src';
import { initOptions, compilerOptions, VueJSXPluginOptions } from './options';
import babelPluginJsx from '@vue/babel-plugin-jsx';
import {
type VueJSXPluginOptions,
compilerOptions,
initOptions,
} from './options';
import './index.css';
declare global {
interface Window {
monaco: typeof m
init: () => void
}
}
main();
interface PersistedState {
src: string
options: VueJSXPluginOptions
src: string;
options: VueJSXPluginOptions;
}
window.init = () => {
const { monaco } = window;
const persistedState: PersistedState = JSON.parse(localStorage.getItem('state') || '{}');
function main() {
const persistedState: PersistedState = JSON.parse(
localStorage.getItem('state') || '{}'
);
Object.assign(compilerOptions, persistedState.options);
const sharedEditorOptions: m.editor.IStandaloneEditorConstructionOptions = {
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
{
theme: 'vs-dark',
fontSize: 14,
wordWrap: 'on',
scrollBeyondLastLine: false,
renderWhitespace: 'selection',
contextmenu: false,
minimap: {
enabled: false,
},
};
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
allowJs: true,
@ -46,7 +44,10 @@ window.init = () => {
});
const editor = monaco.editor.create(document.getElementById('source')!, {
value: decodeURIComponent(window.location.hash.slice(1)) || persistedState.src || 'const App = () => <div>Hello World</div>',
value:
decodeURIComponent(window.location.hash.slice(1)) ||
persistedState.src ||
'const App = () => <div>Hello World</div>',
language: 'typescript',
tabSize: 2,
...sharedEditorOptions,
@ -69,19 +70,23 @@ window.init = () => {
localStorage.setItem('state', state);
window.location.hash = encodeURIComponent(src);
console.clear();
transform(src, {
babelrc: false,
plugins: [[babelPluginJsx, compilerOptions]],
ast: true,
}, (err, result = {}) => {
const res = result!;
if (!err) {
console.log('AST', res.ast!);
output.setValue(res.code!);
} else {
output.setValue(err.message!);
transform(
src,
{
babelrc: false,
plugins: [[babelPluginJsx, compilerOptions]],
ast: true,
},
(err, result = {}) => {
const res = result!;
if (!err) {
console.log('AST', res.ast!);
output.setValue(res.code!);
} else {
output.setValue(err.message!);
}
}
});
);
};
// handle resize
@ -95,11 +100,9 @@ window.init = () => {
// update compile output when input changes
editor.onDidChangeModelContent(debounce(reCompile));
};
}
function debounce<T extends(...args: any[]) => any>(
fn: T,
delay = 300): T {
function debounce<T extends (...args: any[]) => any>(fn: T, delay = 300): T {
let prevTimer: number | null = null;
return ((...args: any[]) => {
if (prevTimer) {

29
packages/jsx-explorer/src/options.ts
View File

@ -1,7 +1,5 @@
import {
h, reactive, createApp,
} from 'vue';
import { VueJSXPluginOptions } from '../../babel-plugin-jsx/src';
import { createApp, h, reactive } from 'vue';
import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
export { VueJSXPluginOptions };
@ -19,16 +17,15 @@ const App = {
h(
'a',
{
href: 'https://app.netlify.com/sites/vue-next-jsx-explorer/deploys',
href: 'https://app.netlify.com/sites/vue-jsx-explorer/deploys',
target: '_blank',
},
'History',
'History'
),
h('div', { id: 'options-wrapper' }, [
h('div', { id: 'options-label' }, 'Options ↘'),
h('ul', { id: 'options' }, [
// mergeProps
h('li', [
h('input', {
@ -37,7 +34,9 @@ const App = {
name: 'mergeProps',
checked: compilerOptions.mergeProps,
onChange(e: Event) {
compilerOptions.mergeProps = (e.target as HTMLInputElement).checked;
compilerOptions.mergeProps = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'mergeProps' }, 'mergeProps'),
@ -50,7 +49,9 @@ const App = {
id: 'optimize',
checked: compilerOptions.optimize,
onChange(e: Event) {
compilerOptions.optimize = (e.target as HTMLInputElement).checked;
compilerOptions.optimize = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'optimize' }, 'optimize'),
@ -63,7 +64,9 @@ const App = {
id: 'transformOn',
checked: compilerOptions.transformOn,
onChange(e: Event) {
compilerOptions.transformOn = (e.target as HTMLInputElement).checked;
compilerOptions.transformOn = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'transformOn' }, 'transformOn'),
@ -73,10 +76,12 @@ const App = {
h('li', [
h('input', {
type: 'checkbox',
id: 'transformOn',
id: 'enableObjectSlots',
checked: compilerOptions.enableObjectSlots,
onChange(e: Event) {
compilerOptions.enableObjectSlots = (e.target as HTMLInputElement).checked;
compilerOptions.enableObjectSlots = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'enableObjectSlots' }, 'enableObjectSlots'),