images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2024-11-10 09:39:14 +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
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
6 changed files with 205 additions and 119 deletions
Show Stats 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,

89
pnpm-lock.yaml
View File

@ -175,6 +175,12 @@ importers:
specifier: ^3.4.15
version: 3.4.15(typescript@5.3.3)
devDependencies:
'@vitejs/plugin-vue-jsx':
specifier: ^3.1.0
version: 3.1.0(vite@5.0.12)(vue@3.4.15)
vite-plugin-monaco-editor:
specifier: ^1.1.0
version: 1.1.0(monaco-editor@0.45.0)
vite-plugin-node-polyfills:
specifier: ^0.19.0
version: 0.19.0(vite@5.0.12)
@ -596,7 +602,6 @@ packages:
dependencies:
'@babel/core': 7.23.7
'@babel/helper-plugin-utils': 7.22.5
dev: false
/@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.7):
resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
@ -1182,6 +1187,19 @@ packages:
'@babel/helper-plugin-utils': 7.22.5
dev: true
/@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.7):
resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/core': 7.23.7
'@babel/helper-annotate-as-pure': 7.22.5
'@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7)
'@babel/helper-plugin-utils': 7.22.5
'@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7)
dev: true
/@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.7):
resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==}
engines: {node: '>=6.9.0'}
@ -2097,6 +2115,22 @@ packages:
resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
dev: true
/@vitejs/plugin-vue-jsx@3.1.0(vite@5.0.12)(vue@3.4.15):
resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0 || ^5.0.0
vue: ^3.0.0
dependencies:
'@babel/core': 7.23.7
'@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7)
'@vue/babel-plugin-jsx': 1.2.1(@babel/core@7.23.7)
vite: 5.0.12(@types/node@20.11.5)
vue: 3.4.15(typescript@5.3.3)
transitivePeerDependencies:
- supports-color
dev: true
/@vitest/coverage-v8@1.2.1(vitest@1.2.1):
resolution: {integrity: sha512-fJEhKaDwGMZtJUX7BRcGxooGwg1Hl0qt53mVup/ZJeznhvL5EodteVnb/mcByhEcvVWbK83ZF31c7nPEDi4LOQ==}
peerDependencies:
@ -2159,6 +2193,47 @@ packages:
pretty-format: 29.7.0
dev: true
/@vue/babel-helper-vue-transform-on@1.2.1:
resolution: {integrity: sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==}
dev: true
/@vue/babel-plugin-jsx@1.2.1(@babel/core@7.23.7):
resolution: {integrity: sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==}
peerDependencies:
'@babel/core': ^7.0.0-0
peerDependenciesMeta:
'@babel/core':
optional: true
dependencies:
'@babel/core': 7.23.7
'@babel/helper-module-imports': 7.22.15
'@babel/helper-plugin-utils': 7.22.5
'@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7)
'@babel/template': 7.22.15
'@babel/traverse': 7.23.7
'@babel/types': 7.23.6
'@vue/babel-helper-vue-transform-on': 1.2.1
'@vue/babel-plugin-resolve-type': 1.2.1(@babel/core@7.23.7)
camelcase: 6.3.0
html-tags: 3.3.1
svg-tags: 1.0.0
transitivePeerDependencies:
- supports-color
dev: true
/@vue/babel-plugin-resolve-type@1.2.1(@babel/core@7.23.7):
resolution: {integrity: sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/code-frame': 7.23.5
'@babel/core': 7.23.7
'@babel/helper-module-imports': 7.22.15
'@babel/helper-plugin-utils': 7.22.5
'@babel/parser': 7.23.6
'@vue/compiler-sfc': 3.4.15
dev: true
/@vue/compiler-core@3.4.15:
resolution: {integrity: sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==}
dependencies:
@ -2660,7 +2735,6 @@ packages:
/camelcase@6.3.0:
resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
engines: {node: '>=10'}
dev: false
/caniuse-lite@1.0.30001579:
resolution: {integrity: sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==}
@ -3715,7 +3789,6 @@ packages:
/html-tags@3.3.1:
resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
engines: {node: '>=8'}
dev: false
/http-proxy-agent@7.0.0:
resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==}
@ -4361,7 +4434,6 @@ packages:
/monaco-editor@0.45.0:
resolution: {integrity: sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==}
dev: false
/ms@2.1.2:
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@ -5266,7 +5338,6 @@ packages:
/svg-tags@1.0.0:
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
dev: false
/symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@ -5614,6 +5685,14 @@ packages:
- terser
dev: true
/vite-plugin-monaco-editor@1.1.0(monaco-editor@0.45.0):
resolution: {integrity: sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==}
peerDependencies:
monaco-editor: '>=0.33.0'
dependencies:
monaco-editor: 0.45.0
dev: true
/vite-plugin-node-polyfills@0.19.0(vite@5.0.12):
resolution: {integrity: sha512-AhdVxAmVnd1doUlIRGUGV6ZRPfB9BvIwDF10oCOmL742IsvsFIAV4tSMxSfu5e0Px0QeJLgWVOSbtHIvblzqMw==}
peerDependencies: