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

[Dunqing]

close: #62

Since the author left it unaddressed for a long time, and in case Javascipt users long time to use, I publish a detypes package to temporarily fix the problem.

[zernonia]

Thanks for the hard work @Dunqing ! Could you add a simple test case for this transformation? 😁

[Dunqing]

Thanks for the hard work @Dunqing ! Could you add a simple test case for this transformation? 😁

Sure, I added

[sadeghbarati]

Tested your branch, pnpm build cli and pnpm start add button

Button.vue

<script setup>
import { buttonVariants } from '.'
import { cn } from '@/lib/utils'

withDefaults( // <=== this API is typescript related
  defineProps({
    variant: { type: null, required: false },
    size: { type: null, required: false },
    as: { type: String, required: false, default: 'button' },
  }),
  {
    as: 'button',
  },
)
</script>

<template>
  <component
    :is="as"
    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
  >
    <slot />
  </component>
</template>

---

Also tested with npm link for using cli outside of the project in fresh vite template-vue

> shadcn-vue add alert-dialog
√ Ready to install components and dependencies. Proceed? ... yes
- Installing components...Cannot read properties of undefined (reading 'sys') // error

When jsconfig.json is not present

ENOENT: no such file or directory, stat 'vue-template/jsconfig.json' // error

[Dunqing]

Tested your branch, pnpm build cli and pnpm start add button

Button.vue

<script setup>
import { buttonVariants } from '.'
import { cn } from '@/lib/utils'

withDefaults( // <=== this API is typescript related
  defineProps({
    variant: { type: null, required: false },
    size: { type: null, required: false },
    as: { type: String, required: false, default: 'button' },
  }),
  {
    as: 'button',
  },
)
</script>

<template>
  <component
    :is="as"
    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
  >
    <slot />
  </component>
</template>

Also tested with npm link for using cli outside of the project in fresh vite template-vue

> shadcn-vue add alert-dialog
√ Ready to install components and dependencies. Proceed? ... yes
- Installing components...Cannot read properties of undefined (reading 'sys') // error

When jsconfig.json is not present

ENOENT: no such file or directory, stat 'vue-template/jsconfig.json' // error

Thank you for testing this PR! Yes, I forgot the case with withDefautls, I fixed it in Dunqing/detype@add6e46.

[Dunqing]

@sadeghbarati Can you take a look at it again? Thank you

[sadeghbarati]

shadcn-vue add button ✅

<script setup>
import { buttonVariants } from ".";
import { cn } from "@/lib/utils";

defineProps({
  variant: { type: null, required: false },
  size: { type: null, required: false },
  as: { type: String, required: false, default: "button" },
});
</script>

<template>
  <component
    :is="as"
    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
  >
    <slot />
  </component>
</template>

---

shadcn-vue add alert-dialog ❌

shadcn-vue add alert-dialog

√ Ready to install components and dependencies. Proceed? ... yes
- Installing components...[@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.

anonymous.vue
2  |  import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
3  |
4  |  const props = defineProps<AlertDialogProps>()
   |                            ^^^^^^^^^^^^^^^^
5  |  const emits = defineEmits<AlertDialogEmits>()

[Dunqing]

√ Ready to install components and dependencies. Proceed? ... yes

• Installing components...[@vue/compiler-sfc] No fs option provided to compileScript in non-Node environment. File system access is required for resolving imported types.

anonymous.vue
2 | import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
3 |
4 | const props = defineProps()
| ^^^^^^^^^^^^^^^^
5 | const emits = defineEmits()

Oh, This case seems hard to fix. Even if I pass fs in, it doesn't work, I can't get radix-vue as the real path.

[Dunqing]

Now it's supported! Do you @sadeghbarati have time to test again? I have tested it, Looks good!

[sadeghbarati]

Sure thanks for your efforts ❤️

[sadeghbarati]

@Dunqing

All good ❤️ but this 👇 which is happening in some component

- const defineProps
+ const props = defineProps

[Dunqing]

@Dunqing

All good ❤️ but this 👇 which is happening in some component

- const defineProps

+ const props = defineProps

Thanks, I noticed that the test cases had this problem as well

[Dunqing]

@Dunqing

All good ❤️ but this 👇 which is happening in some component

- const defineProps
+ const props = defineProps

Fixed

[zernonia]

Absolute amazing work @Dunqing ! Thanks for taking on this difficult challenge!
@sadeghbarati thanks for the review!

[zernonia]

LGTM! ❤️