images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-07-02 01:53:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(jsx-explorer): dogfooding of JSX syntax

Browse Source
This commit is contained in:
三咲智子 Kevin Deng
2024-01-24 02:42:21 +08:00
parent 9d97341d04
commit d99206b059
6 changed files with 205 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,8 @@
"vue": "^3.4.15"
},
"devDependencies": {
"@vitejs/plugin-vue-jsx": "^3.1.0",
"vite-plugin-monaco-editor": "^1.1.0",
"vite-plugin-node-polyfills": "^0.19.0"
}
}

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

@ -74,7 +74,7 @@ function main() {
src,
{
babelrc: false,
plugins: [[babelPluginJsx, compilerOptions]],
plugins: [[babelPluginJsx, { ...compilerOptions }]],
ast: true,
},
(err, result = {}) => {

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

@ -1,113 +0,0 @@
import { createApp, h, reactive } from 'vue';
import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
export { VueJSXPluginOptions };
export const compilerOptions: VueJSXPluginOptions = reactive({
mergeProps: true,
optimize: false,
transformOn: false,
enableObjectSlots: true,
resolveType: false,
});
const App = {
setup() {
return () => [
h('h1', 'Vue 3 JSX Explorer'),
h(
'a',
{
href: 'https://app.netlify.com/sites/vue-jsx-explorer/deploys',
target: '_blank',
},
'History'
),
h('div', { id: 'options-wrapper' }, [
h('div', { id: 'options-label' }, 'Options ↘'),
h('ul', { id: 'options' }, [
// mergeProps
h('li', [
h('input', {
type: 'checkbox',
id: 'mergeProps',
name: 'mergeProps',
checked: compilerOptions.mergeProps,
onChange(e: Event) {
compilerOptions.mergeProps = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'mergeProps' }, 'mergeProps'),
]),
// optimize
h('li', [
h('input', {
type: 'checkbox',
id: 'optimize',
checked: compilerOptions.optimize,
onChange(e: Event) {
compilerOptions.optimize = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'optimize' }, 'optimize'),
]),
// transformOn
h('li', [
h('input', {
type: 'checkbox',
id: 'transformOn',
checked: compilerOptions.transformOn,
onChange(e: Event) {
compilerOptions.transformOn = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'transformOn' }, 'transformOn'),
]),
// enableObjectSlots
h('li', [
h('input', {
type: 'checkbox',
id: 'enableObjectSlots',
checked: compilerOptions.enableObjectSlots,
onChange(e: Event) {
compilerOptions.enableObjectSlots = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'enableObjectSlots' }, 'enableObjectSlots'),
]),
// resolveType
h('li', [
h('input', {
type: 'checkbox',
id: 'resolveType',
checked: compilerOptions.resolveType,
onChange(e: Event) {
compilerOptions.resolveType = (
e.target as HTMLInputElement
).checked;
},
}),
h('label', { for: 'resolveType' }, 'resolveType'),
]),
]),
]),
];
},
};
export function initOptions() {
createApp(App).mount(document.getElementById('header')!);
}

111
packages/jsx-explorer/src/options.tsx Normal file
View File

@ -0,0 +1,111 @@
import { createApp, defineComponent, reactive } from 'vue';
import { type VueJSXPluginOptions } from '@vue/babel-plugin-jsx';
export { VueJSXPluginOptions };
export const compilerOptions: VueJSXPluginOptions = reactive({
mergeProps: true,
optimize: false,
transformOn: false,
enableObjectSlots: true,
resolveType: false,
});
const App = defineComponent({
setup() {
return () => [
<>
<h1>Vue 3 JSX Explorer</h1>
<a
href="https://app.netlify.com/sites/vue-jsx-explorer/deploys"
target="_blank"
>
History
</a>
<div id="options-wrapper">
<div id="options-label">Options ↘</div>
<ul id="options">
<li>
<input
type="checkbox"
id="mergeProps"
name="mergeProps"
checked={compilerOptions.mergeProps}
onChange={(e: Event) => {
compilerOptions.mergeProps = (
e.target as HTMLInputElement
).checked;
}}
/>
<label for="mergeProps">mergeProps</label>
</li>
<li>
<input
type="checkbox"
id="optimize"
name="optimize"
checked={compilerOptions.optimize}
onChange={(e: Event) => {
compilerOptions.optimize = (
e.target as HTMLInputElement
).checked;
}}
/>
<label for="optimize">optimize</label>
</li>
<li>
<input
type="checkbox"
id="transformOn"
name="transformOn"
checked={compilerOptions.transformOn}
onChange={(e: Event) => {
compilerOptions.transformOn = (
e.target as HTMLInputElement
).checked;
}}
/>
<label for="transformOn">transformOn</label>
</li>
<li>
<input
type="checkbox"
id="enableObjectSlots"
name="enableObjectSlots"
checked={compilerOptions.enableObjectSlots}
onChange={(e: Event) => {
compilerOptions.enableObjectSlots = (
e.target as HTMLInputElement
).checked;
}}
/>
<label for="enableObjectSlots">enableObjectSlots</label>
</li>
<li>
<input
type="checkbox"
id="resolveType"
name="resolveType"
checked={!!compilerOptions.resolveType}
onChange={(e: Event) => {
compilerOptions.resolveType = (
e.target as HTMLInputElement
).checked;
}}
/>
<label for="resolveType">resolveType</label>
</li>
</ul>
</div>
</>,
];
},
});
export function initOptions() {
createApp(App).mount(document.getElementById('header')!);
}

7
packages/jsx-explorer/vite.config.ts
View File

@ -1,5 +1,7 @@
import { defineConfig } from 'vite';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import VueJSX from '@vitejs/plugin-vue-jsx';
import MonacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
resolve: {
@ -8,6 +10,11 @@ export default defineConfig({
},
},
plugins: [
VueJSX(),
// @ts-expect-error
(MonacoEditorPlugin.default as typeof MonacoEditorPlugin)({
languageWorkers: ['editorWorkerService', 'typescript'],
}),
nodePolyfills({
globals: {
process: true,