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
+
+
+ ,
+ ];
+ },
+});
+
+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: