carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

Typescript improvements #1616

Open theetrain opened 1 year ago

theetrain commented 1 year ago

As advised in https://github.com/carbon-design-system/carbon-components-svelte/discussions/1614#discussioncomment-4618257

svelte-package allows us to write components with <script lang=ts> and ship carbon-components-svelte with .svelte and .d.ts pairs. Sveld is likely still needed to generate documentation.

We probably have to add Svelte as a peerDependency, making this a breaking change.

Related: #1629, #1871

SimpleProgrammingAU commented 9 months ago

I tried to use <script lang=ts> for TextInput and assigned a type to one of the prop variables.

Is there some more setup that needs to happen before TypeScript can be adopted?

5:50:05 pm [vite] Internal server error: C:/code/carbon-components-svelte/src/TextInput/TextInput.svelte:10:20 Unexpected token

- Did you forget to add a TypeScript preprocessor? See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md for more information.
  Plugin: vite-plugin-svelte
  File: C:/code/carbon-components-svelte/src/TextInput/TextInput.svelte:10:20
    8 |     * Set to "char" to enable display the character counter or "word" to display the word count.
    9 |     */
   10 |    export let counter: "char" | "word" | undefined = undefined;
                             ^
   11 |
   12 |    /** Set to `true` to disable the input */
theetrain commented 9 months ago

Using lang="ts" is out of scope for the time being. We may eventually use it after closing #1871 since @sveltejs/package can convert .svelte files containing lang="ts" into respective .svelte and .svelte.d.ts files (it actually runs all preprocessors); allowing users to consume carbon-components-svelte, with type safety, and only optionally needing vitePreprocess.

Users today can use carbon-components-svelte with or without TS. If we adopt lang="ts" it can be done incrementally, post-v1, and without needing to ship a breaking change

Please use JSDoc for now, as Sveld can build declarations files and documentation for us.