Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript improvements #1616

Open
2 tasks done
theetrain opened this issue Jan 7, 2023 · 2 comments
Open
2 tasks done

Typescript improvements #1616

theetrain opened this issue Jan 7, 2023 · 2 comments
Labels
documentation Improvements or additions to documentation typescript TypeScript-related pain point
Milestone

Comments

@theetrain
Copy link
Collaborator

theetrain commented Jan 7, 2023

As advised in #1614 (comment)

  • Switch from svelte.JSX to svelte/elements (depends on Svelte 3.55.0)
  • Decide whether to use svelte-package or augment sveld

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

@theetrain theetrain added documentation Improvements or additions to documentation typescript TypeScript-related pain point labels Jan 7, 2023
@theetrain theetrain added this to the v1.0.0 milestone Jan 7, 2023
@SimpleProgrammingAU
Copy link
Contributor

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
Copy link
Collaborator Author

theetrain commented Jan 14, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation typescript TypeScript-related pain point
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants