feat: add support for tsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/repl",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Vue component for editing Vue components",
   "main": "dist/ssr-stub.js",
   "module": "dist/vue-repl.js",
@@ -34,16 +34,19 @@
   },
   "homepage": "https://github.com/vuejs/repl#readme",
   "devDependencies": {
-    "@babel/types": "^7.15.6",
+    "@babel/core": "^7.20.12",
+    "@babel/standalone": "^7.20.14",
+    "@babel/types": "^7.20.7",
     "@microsoft/api-extractor": "^7.19.2",
     "@types/codemirror": "^5.60.2",
-    "@types/node": "^16.11.12",
+    "@types/node": "^18.11.18",
     "@vitejs/plugin-vue": "^3.0.0",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "assert": "^2.0.0",
     "codemirror": "^5.62.3",
     "fflate": "^0.7.3",
     "hash-sum": "^2.0.0",
     "rimraf": "^3.0.2",
-    "sucrase": "^3.20.1",
     "typescript": "^4.5.4",
     "vite": "^3.1.0",
     "vue": "^3.2.39",

src/babel.ts

@@ -0,0 +1,7 @@
+// @ts-ignore
+import { registerPlugin, transform } from '@babel/standalone'
+
+import BabelPluginJsx from '@vue/babel-plugin-jsx'
+registerPlugin('@vue/babel-plugin-jsx', BabelPluginJsx)
+
+export {transform}

src/transform.ts

@@ -6,15 +6,26 @@ import {
   transformRef,
   CompilerOptions
 } from 'vue/compiler-sfc'
-import { transform } from 'sucrase'
+import { transform } from './babel'
 // @ts-ignore
 import hashId from 'hash-sum'
 
 export const COMP_IDENTIFIER = `__sfc__`
 
+function testTs(lang: string | null | undefined) {
+  return ['ts', 'tsx'].includes(lang!)
+}
+
 async function transformTS(src: string) {
   return transform(src, {
-    transforms: ['typescript']
+    filename: 'code.tsx',
+    presets: [
+      'react',
+      'typescript'
+    ],
+    plugins: [
+      '@vue/babel-plugin-jsx'
+    ],
   }).code
 }
 
@@ -74,7 +85,7 @@ export async function compileFile(
   const scriptLang =
     (descriptor.script && descriptor.script.lang) ||
     (descriptor.scriptSetup && descriptor.scriptSetup.lang)
-  const isTS = scriptLang === 'ts'
+  const isTS = testTs(scriptLang)
   if (scriptLang && !isTS) {
     store.state.errors = [`Only lang="ts" is supported for <script> blocks.`]
     return
@@ -253,7 +264,7 @@ async function doCompileScript(
           expressionPlugins
         )
 
-      if ((descriptor.script || descriptor.scriptSetup)!.lang === 'ts') {
+      if (testTs((descriptor.script || descriptor.scriptSetup)!.lang)) {
         code = await transformTS(code)
       }
 
@@ -304,7 +315,7 @@ async function doCompileTemplate(
       `$1 ${fnName}`
     )}` + `\n${COMP_IDENTIFIER}.${fnName} = ${fnName}`
 
-  if ((descriptor.script || descriptor.scriptSetup)?.lang === 'ts') {
+  if (testTs((descriptor.script || descriptor.scriptSetup)?.lang)) {
     code = await transformTS(code)
   }
 

tsconfig.build.json

@@ -3,13 +3,15 @@
     "baseUrl": ".",
     "outDir": "dist",
     "sourceMap": false,
-    "target": "es2016",
+    "target": "esnext",
     "useDefineForClassFields": false,
     "module": "esnext",
     "moduleResolution": "node",
+    "jsx": "preserve",
     "allowJs": false,
     "strict": true,
     "noUnusedLocals": true,
+    "skipLibCheck": true,
     "experimentalDecorators": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,

vite.config.ts

@@ -14,6 +14,10 @@ const genStub: Plugin = {
 }
 
 export default defineConfig({
+  define: {
+    'process.env': process.env,
+    'process.platform': '""'
+  },
   plugins: [vue(), genStub],
   build: {
     target: 'esnext',