fix(core|utils): not propertly handling type stripping

Close #17

Author: nekomeowww

apps/playground/package.json

@@ -60,8 +60,6 @@
     "monaco-editor-core": "^0.52.2",
     "reka-ui": "^2.2.1",
     "splitpanes": "^4.0.3",
-    "sucrase": "^3.35.0",
-    "superjson": "^2.2.2",
     "unplugin-vue-router": "^0.12.0",
     "vite": "^6.3.5",
     "vscode-uri": "^3.1.0",

apps/playground/src/components/Editor/transform.ts

@@ -2,16 +2,15 @@
 
 // https://github.com/vuejs/repl/blob/5e092b6111118f5bb5fc419f0f8f3f84cd539366/src/transform.ts
 
-import type { Transform } from 'sucrase'
 import type {
   BindingMetadata,
   CompilerOptions,
   SFCDescriptor,
 } from 'vue/compiler-sfc'
 import type { File, Store } from './store'
 
+import { transformTS } from '@velin-dev/utils/transformers/typescript'
 import hashId from 'hash-sum'
-import { transform } from 'sucrase'
 
 export const COMP_IDENTIFIER = `__sfc__`
 
@@ -23,13 +22,6 @@ function testJsx(filename: string | undefined | null) {
   return !!(filename && /(\.|\b)[jt]sx$/.test(filename))
 }
 
-function transformTS(src: string, isJSX?: boolean) {
-  return transform(src, {
-    transforms: ['typescript', ...(isJSX ? (['jsx'] as Transform[]) : [])],
-    jsxRuntime: 'preserve',
-  }).code
-}
-
 export async function compileFile(
   store: Store,
   { filename, code, compiled }: File,
@@ -320,6 +312,7 @@ async function doCompileScript(
         },
       },
     })
+
     let code = compiledScript.content
     if (isTS) {
       code = await transformTS(code, isJSX)

apps/playground/src/prompts/Prompt.velin.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { useCounter } from '@vueuse/core'
 
 defineProps({

packages/core/src/render-shared/compile.ts

@@ -2,7 +2,7 @@
 
 import type { CompilerOptions, SFCScriptBlock, SFCTemplateCompileResults } from '@vue/compiler-sfc'
 
-import { testTs } from '@velin-dev/utils/transformers/typescript'
+import { testTs, transformTS } from '@velin-dev/utils/transformers/typescript'
 import { compileScript, compileTemplate, parse } from '@vue/compiler-sfc'
 
 import { isUseInlineTemplate } from './template'
@@ -45,6 +45,10 @@ export async function compileSFC(source: string): Promise<CompiledResult> {
     },
   })
 
+  if (isTS) {
+    scriptResult.content = transformTS(scriptResult.content)
+  }
+
   return {
     template: templateResult,
     script: scriptResult,

packages/utils/src/transformers/typescript/transform.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+
+import { transformTS } from './transform'
+
+describe('transformTS', async () => {
+  it('should transform TS', () => {
+    const result = transformTS(`import { defineComponent as _defineComponent } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n\nimport { useCounter } from '@vueuse/core'\n\n\nexport default /*@__PURE__*/_defineComponent({\n  props: {\n  text: String,\n  number: Number,\n  check: Boolean,\n},\n  setup(__props) {\n\n\n\nconst { count } = useCounter()\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock("div", null, [\n    _createElementVNode("div", null, _toDisplayString(__props.text), 1 /* TEXT */),\n    _createElementVNode("div", null, _toDisplayString(__props.number), 1 /* TEXT */),\n    _createElementVNode("div", null, _toDisplayString(__props.check), 1 /* TEXT */),\n    _createElementVNode("div", null, "Internal count: " + _toDisplayString(_unref(count)), 1 /* TEXT */)\n  ]))\n}\n}\n\n})`)
+    expect(result).toBeDefined()
+    expect(result).toEqual(`import { defineComponent as _defineComponent } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, unref as _unref, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"\n\nimport { useCounter } from '@vueuse/core'\n\n\nexport default /*@__PURE__*/_defineComponent({\n  props: {\n  text: String,\n  number: Number,\n  check: Boolean,\n},\n  setup(__props) {\n\n\n\nconst { count } = useCounter()\n\nreturn (_ctx,_cache) => {\n  return (_openBlock(), _createElementBlock("div", null, [\n    _createElementVNode("div", null, _toDisplayString(__props.text), 1 /* TEXT */),\n    _createElementVNode("div", null, _toDisplayString(__props.number), 1 /* TEXT */),\n    _createElementVNode("div", null, _toDisplayString(__props.check), 1 /* TEXT */),\n    _createElementVNode("div", null, "Internal count: " + _toDisplayString(_unref(count)), 1 /* TEXT */)\n  ]))\n}\n}\n\n})`)
+  })
+})

packages/utils/src/transformers/typescript/transform.ts

@@ -7,7 +7,7 @@ export function testTs(filename: string | undefined | null) {
   return !!(filename && /(\.|\b)tsx?$/.test(filename))
 }
 
-export async function transformTS(src: string, isJSX?: boolean) {
+export function transformTS(src: string, isJSX?: boolean) {
   return transform(src, {
     transforms: ['typescript', ...(isJSX ? (['jsx'] as Transform[]) : [])],
     jsxRuntime: 'preserve',