Typescript support

[ok-AK]

Hello,
Are there plans to add Typescript support to this library? Looks great and love the library!

[csaltos]

Now Svelte supports TypeScript directly, please check out this post as a reference -> https://svelte.dev/blog/svelte-and-typescript

[EduardsE]

Does anybody have an instruction on how to get this to work with TypeScript?

[ok-AK]

Does anybody have an instruction on how to get this to work with TypeScript?

Svelte Material UI currently does not have typescript types defined. You can still use this lib in your typescript project and create your own typescript components that consume this lib but Svelte Material UI components will remain untyped as you do so.

[EduardsE]

Svelte Material UI currently does not have typescript types defined. You can still use this lib in your typescript project and create your own typescript components that consume this lib but Svelte Material UI components will remain untyped as you do so.

It does compile, but I'm having difficulty configuring it in VSCode.
I keep doing this for every component and I'd rather not:

Otherwise it's red squiggly lines all the way

[chalkplum]

yeah i've stopped using it, why not create @types

[maranmaran]

any update on types?

[hperrin]

The current plan is to work on migrating to Typescript as the next major feature. It will take a lot of work, though.

[korompaiistvan]

hi @hperrin, I love the project it has helped me a lot to dip my toes into Svelte :)
I just found this project and it might help you create ts definitions https://github.com/IBM/sveld

[hperrin]

Thank you. That does look promising.

[hperrin]

I've been using SMUI in a TypeScript project recently, and it reeeeeeeeally makes me want to spend a weekend translating this to TypeScript.

[hperrin]

Oooooooooooooooof:
https://github.com/sciactive/nymphjs/tree/1c51dd52768b14f6f6674f6d06001c883b46ef51/packages/tilmeld-setup/app/types

[hperrin]

Getting started on this today. I'm not sure how I'm going to handle events, since you can add ad hoc events with modifiers. Wish me luck.

[hperrin]

YO!!!! cf9c6af

[hperrin]

It seems like it's working!

[hperrin]

Based on how long it took to translate just that (very simple) component, "a weekend" was a very optimistic time frame.

[hperrin]

You can follow along with my progress here:
https://github.com/hperrin/svelte-material-ui/commits/typescript

[hperrin]

Better yet, you can follow my progress in the newly created project:
https://github.com/hperrin/svelte-material-ui/projects/1

[hperrin]

Closed with 331afa5! Fully typed SMUI!!!

[marekdedic]

Hi, great to hear that! Could you please add some more detail about setting up svelte-preprocess to the docs? I'm currently getting

Message:
    Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import Button from './Button.svelte';
> import type { ButtonComponentDev } from './Button.types';
| export * from './Button.types';

and I am not really sure about the issue as I already have svelte-preprocess configured and use TypeScript in the project...

Thnaks!

[hperrin]

@marekdedic Can you try with the latest beta? I fixed some type issues with the ".0" beta, so the ".1" beta might help.

[marekdedic]

@hperrin It's still the same. I think it's probably just that my webpack config isn't 100% correct (but it works for my TS code), so better docs would be the way to go...

[hperrin]

I just tested it in Webpack myself, and I'm getting the same issue...

[roociferSonOfTheMorning]

I'm also having similar issues. I am using svelte-typescript, running the setup typescript step and then installing the smui button.

it fails to compile:
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
node_modules/@smui/common/smui.d.ts (5:7)

[hperrin]

I've fixed most of the issue... I've got one more beta to publish that I think will fix the last parts.

[hperrin]

It worked! Typed SMUI works in Webpack now!

[marekdedic]

Thanks! Unfortunately, I'm getting a different error now :/

Module not found: Error: Can't resolve '../_index.scss' in '/home/user/project/node_modules/@smui/button'

[marekdedic]

That error seems to be fixed on beta 7, however, there is an even newer one :)

Message:
    Module not found: Error: Can't resolve './classAdderBuilder' in '/home/user/project/node_modules/@smui/common/classadder'
Did you mean 'classAdderBuilder.ts'?
BREAKING CHANGE: The request './classAdderBuilder' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
export 'classAdderBuilder' (imported as 'classAdderBuilder') was not found in '@smui/common/classadder/index.js' (module has no exports)

[hperrin]

This should also be fixed now. :)