fix(cli): missing props/emits when disable typescript (#105)

* feat(cli): support remove type when non-typescript

* fix(cli): missing props/emits when doesn't enable typescript

* test: add test cases for defineProps/defineEmits

* fix: withDefaults case

* fix: cannot resolve external and packages types

* fix: missing assign variable

apps/www/package.json

@@ -43,8 +43,8 @@
     "@types/node": "^20.8.7",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "@vue/compiler-core": "^3.3.6",
-    "@vue/compiler-dom": "^3.3.6",
+    "@vue/compiler-core": "^3.3.7",
+    "@vue/compiler-dom": "^3.3.7",
     "autoprefixer": "^10.4.16",
     "lodash.template": "^4.5.0",
     "radix-vue": "^1.0.0",

package.json

@@ -45,11 +45,6 @@
       "@commitlint/config-conventional"
     ]
   },
-  "pnpm": {
-    "patchedDependencies": {
-      "detype@0.6.3": "patches/detype@0.6.3.patch"
-    }
-  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
     "commit-msg": "pnpm commitlint --edit ${1}"

packages/cli/package.json

@@ -49,11 +49,11 @@
     "@babel/core": "^7.22.17",
     "@babel/parser": "^7.22.16",
     "@babel/plugin-transform-typescript": "^7.22.15",
-    "@vue/compiler-sfc": "^3.3.6",
+    "@vue/compiler-sfc": "^3.3.7",
     "chalk": "5.3.0",
     "commander": "^11.0.0",
     "cosmiconfig": "^8.3.6",
-    "detype": "^0.6.3",
+    "detype": "npm:detypes@^0.7.6",
     "diff": "^5.1.0",
     "execa": "^8.0.1",
     "fs-extra": "^11.1.1",

packages/cli/src/utils/transformers/transform-sfc.ts

@@ -11,10 +11,10 @@ export async function transformByDetype(content: string, filename: string) {
   })
 }
 
-export const transformSFC: Transformer<string> = async ({ sourceFile, config }) => {
+export const transformSFC: Transformer<string> = async ({ sourceFile, config, filename }) => {
   const output = sourceFile?.getFullText()
   if (config?.typescript)
     return output
 
-  return await transformByDetype(output, 'app.vue')
+  return await transformByDetype(output, filename)
 }

packages/cli/test/utils/__fixtures__/props.ts

@@ -0,0 +1,4 @@
+export interface Props {
+  a: string
+  b: number
+}

packages/cli/test/utils/__snapshots__/transform-sfc.test.ts.snap

@@ -12,3 +12,53 @@ const array = [1, 2, 3];
 <style scoped></style>
 "
 `;
+
+exports[`transformSFC > defineEmits 1`] = `
+"<script setup>
+const emit = defineEmits([\\"foo\\"]);
+</script>
+"
+`;
+
+exports[`transformSFC > defineProps 1`] = `
+"<script setup>
+const props = defineProps({
+  foo: { type: String, required: true },
+});
+</script>
+"
+`;
+
+exports[`transformSFC > defineProps with external props 1`] = `
+"<script setup>
+const props = defineProps({
+  foo: { type: String, required: false, default: \\"bar\\" },
+  a: { type: String, required: true },
+  b: { type: Number, required: true },
+});
+export {};
+</script>
+"
+`;
+
+exports[`transformSFC > defineProps with package props 1`] = `
+"<script setup>
+const props = defineProps({
+  foo: { type: String, required: false, default: \\"bar\\" },
+  for: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: [String, Object], required: false },
+});
+export {};
+</script>
+"
+`;
+
+exports[`transformSFC > defineProps with withDefaults 1`] = `
+"<script setup>
+const props = defineProps({
+  foo: { type: String, required: true, default: \\"bar\\" },
+});
+</script>
+"
+`;

packages/cli/test/utils/transform-sfc.test.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'node:path'
 import { describe, expect, test } from 'vitest'
 import { transform } from '../../src/utils/transformers'
 
@@ -22,4 +23,72 @@ describe('transformSFC', () => {
     })
     expect(result).toMatchSnapshot()
   })
+
+  test('defineProps', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      const props = defineProps<{ foo: string }>()
+      </script>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+
+  test('defineProps with withDefaults', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      const props = withDefaults(defineProps<{ foo: string }>(), {
+        foo: 'bar'
+      })
+      </script>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+
+  test('defineProps with external props', async () => {
+    const result = await transform({
+      filename: resolve(__dirname, './test.vue'),
+      raw: `<script lang="ts" setup>
+      import { type Props } from './__fixtures__/props'
+      const props = withDefaults(defineProps<{ foo?: string } & Props>(), {
+        foo: 'bar'
+      })
+      </script>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+
+  test('defineProps with package props', async () => {
+    const result = await transform({
+      filename: resolve(__dirname, './test.vue'),
+      raw: `<script lang="ts" setup>
+      import { type LabelProps } from 'radix-vue'
+      const props = withDefaults(defineProps<{ foo?: string } & LabelProps>(), {
+        foo: 'bar'
+      })
+      </script>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+
+  test('defineEmits', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      const emit = defineEmits<{ foo: string }>()
+      </script>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
 })

patches/detype@0.6.3.patch

@@ -1,16 +0,0 @@
-diff --git a/dist/index.js b/dist/index.js
-index 8b8e0d078e27474da1cf58ce3fef1d7acefb1cd4..314b23766204dcc6d2873e8ea654dcc3040ba0a5 100644
---- a/dist/index.js
-+++ b/dist/index.js
-@@ -146,9 +146,9 @@ async function removeTypesFromVueSfcScript(code, fileName, script, templateAst,
-     (0, import_template_ast_types.traverse)(templateAst, {
-       enter(node) {
-         if ((0, import_template_ast_types.isSimpleExpressionNode)(node) && !node.isStatic) {
--          expressions.add(node.content);
-+          expressions.add(`[${node.content}]`);
-         } else if ((0, import_template_ast_types.isComponentNode)(node)) {
--          expressions.add(node.tag);
-+          expressions.add(`[${node.tag}]`);
-         }
-       }
-     });