refactor(jsx-explorer): dogfooding of JSX syntax

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"
   }
 }

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 = {}) => {

packages/jsx-explorer/src/options.ts

@@ -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')!);
-}

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 () => [
+      <>
+        <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')!);
+}

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,

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: