From d99206b059b2faca00821e924831f7fc301ae281 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Wed, 24 Jan 2024 02:42:21 +0800 Subject: [PATCH] refactor(jsx-explorer): dogfooding of JSX syntax --- packages/jsx-explorer/package.json | 2 + packages/jsx-explorer/src/index.ts | 2 +- packages/jsx-explorer/src/options.ts | 113 -------------------------- packages/jsx-explorer/src/options.tsx | 111 +++++++++++++++++++++++++ packages/jsx-explorer/vite.config.ts | 7 ++ pnpm-lock.yaml | 89 ++++++++++++++++++-- 6 files changed, 205 insertions(+), 119 deletions(-) delete mode 100644 packages/jsx-explorer/src/options.ts create mode 100644 packages/jsx-explorer/src/options.tsx diff --git a/packages/jsx-explorer/package.json b/packages/jsx-explorer/package.json index d77052a..7b6b208 100644 --- a/packages/jsx-explorer/package.json +++ b/packages/jsx-explorer/package.json @@ -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" } } diff --git a/packages/jsx-explorer/src/index.ts b/packages/jsx-explorer/src/index.ts index a45e551..033d91b 100644 --- a/packages/jsx-explorer/src/index.ts +++ b/packages/jsx-explorer/src/index.ts @@ -74,7 +74,7 @@ function main() { src, { babelrc: false, - plugins: [[babelPluginJsx, compilerOptions]], + plugins: [[babelPluginJsx, { ...compilerOptions }]], ast: true, }, (err, result = {}) => { diff --git a/packages/jsx-explorer/src/options.ts b/packages/jsx-explorer/src/options.ts deleted file mode 100644 index 3f5711e..0000000 --- a/packages/jsx-explorer/src/options.ts +++ /dev/null @@ -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')!); -} diff --git a/packages/jsx-explorer/src/options.tsx b/packages/jsx-explorer/src/options.tsx new file mode 100644 index 0000000..f9c6e75 --- /dev/null +++ b/packages/jsx-explorer/src/options.tsx @@ -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 () => [ + <> +

Vue 3 JSX Explorer

+ + History + +
+
Options ↘
+ +
+ , + ]; + }, +}); + +export function initOptions() { + createApp(App).mount(document.getElementById('header')!); +} diff --git a/packages/jsx-explorer/vite.config.ts b/packages/jsx-explorer/vite.config.ts index 4db4517..3253531 100644 --- a/packages/jsx-explorer/vite.config.ts +++ b/packages/jsx-explorer/vite.config.ts @@ -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, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 64f8bba..14eebdb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: