Svelte class based component example

[piyushchauhan2011]

I'm trying to learn Svelte and TypeScript. I was wondering if there is any pattern to include or program svelte component usingES6 classes. Currently file contains all the script, html and data, css. I want to make them separate files. Please help me!

Cheers,
Piyush

[Conduitry]

There's already an issue (#65) for supporting separation of the input html, javascript, and css for a component. There's currently not an automatic way to do that - you would have to combine these manually in your build process before passing the components to the Svelte compiler.

I'm not sure what you're asking about ES6 classes. A compiled Svelte component is a class (although an ES5 one). But you interact with javascript classes in the same way whether they were implemented in ES5 syntax or ES6 syntax. In your own application code, outside of the Svelte component, you're free to use whatever syntax or language features you choose.

[piyushchauhan2011]

Hi @Conduitry, I tried to do somethings using above as a reference, by cloning the svelte-example repository and modifying it to include typescript, es6 syntax and separate out css, html and ts / js files. If you could help me on this, it would be awesome 😃 . I've created a repository here https://github.com/piyushchauhan2011/Svelte-Typescript-test .

I also found that exporting an object literal with braces seems to be very specific requirement, even in computed properties, having a syntax where we try to assign keys to functions that are imported from other files don't work. It would be nice to receive some guidance on how to do it properly.

[piyushchauhan2011]

I also tried to use export default Object.create({}, App) but I think, curly brackets are required specific for object literal. Not sure!

[PaulBGD]

@piyushchauhan2011 For static analysis, each component has to export a static object. For computed properties, you have to specify the function rather than referencing a function so that Svelte knows what params to track.

[Rich-Harris]

closing this as there's no action to take, and #65 tracks separation of input files. thanks