refactor(jsx-explorer): dogfooding of JSX syntax

Author: sxzz

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

@@ -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/src/options.tsx

@@ -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,