package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-jsx-monorepo",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
-  "packageManager": "pnpm@8.14.1",
+  "packageManager": "pnpm@8.15.1",
   "type": "module",
   "scripts": {
     "build": "pnpm run -r build",
@@ -23,19 +23,19 @@
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-module-imports": "^7.18.3",
     "@types/babel__helper-plugin-utils": "^7.10.3",
-    "@types/node": "^20.11.5",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@vitest/coverage-v8": "^1.2.1",
+    "@types/node": "^20.11.16",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@vitest/coverage-v8": "^1.2.2",
     "@vue/babel-plugin-jsx": "workspace:*",
     "bumpp": "^9.3.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "jsdom": "^24.0.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.2.5",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vitest": "^1.2.2"
   }
 }

packages/babel-helper-vue-transform-on/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/babel-helper-vue-transform-on",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "to help transform on",
   "author": "Amour1688 <lcz_1996@foxmail.com>",
   "license": "MIT",

packages/babel-plugin-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/babel-plugin-jsx",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Babel plugin for Vue 3 JSX",
   "author": "Amour1688 <lcz_1996@foxmail.com>",
   "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-jsx#readme",
@@ -23,26 +23,26 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/helper-module-imports": "^7.22.15",
+    "@babel/helper-module-imports": "~7.22.15",
     "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/plugin-syntax-jsx": "^7.23.3",
-    "@babel/template": "^7.22.15",
-    "@babel/traverse": "^7.23.7",
-    "@babel/types": "^7.23.6",
+    "@babel/template": "^7.23.9",
+    "@babel/traverse": "^7.23.9",
+    "@babel/types": "^7.23.9",
     "@vue/babel-helper-vue-transform-on": "workspace:*",
     "@vue/babel-plugin-resolve-type": "workspace:*",
     "camelcase": "^6.3.0",
     "html-tags": "^3.3.1",
     "svg-tags": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/core": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.5",
     "@types/svg-tags": "^1.0.2",
     "@vue/runtime-dom": "^3.4.15",
-    "@vue/test-utils": "^2.4.3",
+    "@vue/test-utils": "^2.4.4",
     "regenerator-runtime": "^0.14.1",
     "vue": "^3.4.15"
   },

packages/babel-plugin-resolve-type/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/babel-plugin-resolve-type",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Babel plugin for resolving Vue types.",
   "author": "三咲智子 <sxzz@sxzz.moe>",
   "homepage": "https://github.com/vuejs/babel-plugin-jsx/tree/dev/packages/babel-plugin-resolve-type#readme",
@@ -44,13 +44,13 @@
   },
   "dependencies": {
     "@babel/code-frame": "^7.23.5",
-    "@babel/helper-module-imports": "^7.22.15",
+    "@babel/helper-module-imports": "~7.22.15",
     "@babel/helper-plugin-utils": "^7.22.5",
-    "@babel/parser": "^7.23.6",
+    "@babel/parser": "^7.23.9",
     "@vue/compiler-sfc": "^3.4.15"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@types/babel__code-frame": "^7.0.6",
     "vue": "^3.4.15"
   }

packages/jsx-explorer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/jsx-explorer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "type": "module",
   "private": true,
   "scripts": {
@@ -9,12 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@vue/babel-plugin-jsx": "workspace:*",
     "monaco-editor": "^0.45.0",
     "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

@@ -2,6 +2,8 @@ import * as monaco from 'monaco-editor';
 import { watchEffect } from 'vue';
 import { transform } from '@babel/core';
 import babelPluginJsx from '@vue/babel-plugin-jsx';
+// @ts-expect-error missing types
+import typescript from '@babel/plugin-syntax-typescript';
 import {
   type VueJSXPluginOptions,
   compilerOptions,
@@ -25,6 +27,8 @@ function main() {
 
   const sharedEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
     {
+      language: 'typescript',
+      tabSize: 2,
       theme: 'vs-dark',
       fontSize: 14,
       wordWrap: 'on',
@@ -36,29 +40,39 @@ function main() {
       },
     };
 
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+  });
   monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
     allowJs: true,
     allowNonTsExtensions: true,
     jsx: monaco.languages.typescript.JsxEmit.Preserve,
     target: monaco.languages.typescript.ScriptTarget.Latest,
+    module: monaco.languages.typescript.ModuleKind.ESNext,
+    isolatedModules: true,
   });
 
   const editor = monaco.editor.create(document.getElementById('source')!, {
-    value:
-      decodeURIComponent(window.location.hash.slice(1)) ||
-      persistedState.src ||
-      'const App = () => <div>Hello World</div>',
-    language: 'typescript',
-    tabSize: 2,
     ...sharedEditorOptions,
+    model: monaco.editor.createModel(
+      decodeURIComponent(window.location.hash.slice(1)) ||
+        persistedState.src ||
+        `import { defineComponent } from 'vue'
+
+const App = defineComponent((props) => <div>Hello World</div>)`,
+      'typescript',
+      monaco.Uri.parse('file:///app.tsx')
+    ),
   });
 
   const output = monaco.editor.create(document.getElementById('output')!, {
-    value: '',
-    language: 'javascript',
     readOnly: true,
-    tabSize: 2,
     ...sharedEditorOptions,
+    model: monaco.editor.createModel(
+      '',
+      'typescript',
+      monaco.Uri.parse('file:///output.tsx')
+    ),
   });
 
   const reCompile = () => {
@@ -74,7 +88,10 @@ function main() {
       src,
       {
         babelrc: false,
-        plugins: [[babelPluginJsx, compilerOptions]],
+        plugins: [
+          [babelPluginJsx, { ...compilerOptions }],
+          [typescript, { isTSX: true }],
+        ],
         ast: true,
       },
       (err, result = {}) => {