An error occurred while installing the chart component

[FranShavee]

I just started learning vue and shadcn and couldn't find the problem

[sadeghbarati]

Are you using TypeScript or JavaScript project?

[FranShavee]

您使用的是 TypeScript 还是 JavaScript 项目？

javascript

[wwwDESIGN-basti]

same here. using javascript too.

[FranShavee]

同样在这里。也使用 JavaScript。

I've found the problem, javascript vue projects cannot use chart components directly, If you download the chart component in a js project, the interface.ts in chart folder is empty and must configure typescript to use it.

[sadeghbarati]

I'm confused as to why the Vue compiler doesn't include a feature to convert Vue/TS to Vue/JS (preserve the code only remove TypeScript codes).

We are using detypes package to convert Vue/TS to Vue/JS which has some edge cases

cc @sxzz Hey Kevin can you give us an input about Vue compiler?

For example, we want something like this

Vue/TS

<script setup lang="ts">
const props = withDefault(defineProps<{ foo?: string }>(), {
  foo: 'test'
})
</script>

Vue/JS

<script setup lang="ts">
const props = defineProps({
  foo: { type: String, required: false, default: 'test' }
})
</script>

---

shadcn-svelte way to convet Svelte/TS to Svelte/JS

https://github.com/huntabyte/shadcn-svelte/commit/bfdc861fe9512463c4179965c3edb77b94fb233f#diff-3f92cdd47cfcfd407e0d3504da66f60e6fc93acb0781b1f2d7c0db14f9624a50R35-R84

[sxzz]

The Vue compiler uses @babel/parser analyzes user code, transforming only essential parts such as macros like defineProps. Ultimately, this process converts Vue SFC into valid JS/TS code.

This allows users to incorporate additional transformers (such as swc, babel, esbuild) for converting TS to JS if required.

[sxzz]

After reading the context, if I haven't misunderstood, is there a need for such a tool: to convert TS Vue SFC example code in documents into TS for JS users to read?

[sadeghbarati]

@sxzz

shadcn-vue components are written in TypeScript

In shadcn-vue, we need a proper solution for transforming Vue/TS (script setup lang="ts") to Vue/JS (script setup)

For JavaScript users, @Dunqing worked on detypes pkg to remove TypeScript code from the Vue components while we installing components with shadcn-vue CLI, but it's not complete and not working in some cases like Chart

We are asking if there is a better way with the Vue compiler to preserve the code but remove TypeScript code?

[sxzz]

In the Vue compiler, this feature indeed does not exist. It's beyond what Vue itself requires. detypes is a pretty good tool that can be maintained by the community. If it encounters some issues, a better solution would be to fix them directly in detypes.

[zernonia]

@Dunqing might need your help here. We have some template inline function with types, and detypes seems to not remove the type.

eg:

   <VisLine
          :x="(d: Data, i: number) => i"
          :y="(d: Data) => d[category]"
   /> 

I'm expecting that the types in template would be remove as well.

[Dunqing]

@Dunqing might need your help here. We have some template inline function with types, and detypes seems to not remove the type.

eg:

   <VisLine
          :x="(d: Data, i: number) => i"
          :y="(d: Data) => d[category]"
   /> 

I'm expecting that the types in template would be remove as well.

Thank you for your feedback. I will take a look this week. Also, I plan to refactor the transform for vue file. The current implementation is hard to maintain and has many bugs 😅.

And I think shadcn-svelte handles it better, which will avoid errors on the user side. When I have more time I will refactor in this direction.