Svelte: Add a typescript-template repo

[dummdidumm]

Is your feature request related to a problem? Please describe.
Many people want to use Svelte with Typescript. With svelte-preprocess, a fitting rollup-config and Svelta Beta from VSCode this is working pretty good already. But there is no template devs can degit to get a quick start.

Describe the solution you'd like
Add a sveltejs/typescript-template similar to https://github.com/sveltejs/template with some instructions on how to get Typescript running. After some iterations and feedback one could even think about a blogpost on the official website.

Describe alternatives you've considered
Explaining the same things in Discord and various Github issues over and over again.

How important is this feature to you?
Important to get the word out that Typescript support is in a good state now.

[samal-rasmussen]

Got any link to an existing project or example that has the right stuff implemented already that can be extracted to a template?

[benmccann]

I've been using https://github.com/babichjacob/sapper-typescript-graphql-template. It does a bit more since it's for Sapper and GraphQL as well, but it does help show how to setup the TypeScript stuff

[dummdidumm]

I created https://github.com/dummdidumm/template which is the minimal starter enhanced with Typescript support. More discussion can be found in https://github.com/sveltejs/language-tools/issues/161 .

[antony]

@dummdidumm is it possible to make a version of your template that just adds typescript?

The one you have listed makes a bunch of formatting changes, and even some changes to the markdown in the README which hopefully, aren't necessary.

The reason being that I am concerned that we won't want to maintain (dependency versions etc) another template, and it will go out of sync with the original template.

What might be an ideal scenario is to have a way to "patch" typescript support in with an npm command somehow. I don't know how possible this is.

[dummdidumm]

The changes in the markdown are mostly to highlight what was done to add typescript support. The formatting changes are due to prettier I guess. Both can easily be avoided.

The npm command is a nice idea. It also triggers another idea - what about a CLI? That one could walk you through the setup process (webpack or rollup? javascript or typescript? css, less or scss?) and generate a template accordingly.

[benmccann]

I shared this someplace else, but seems relevant here too. The coolest project starter I've seen is https://micronaut.io/launch/, which does essentially that walkthrough (they have a CLI too, but I think the web interface is even neater and they share the same code). It's kind of a lot of tooling though, so not the easiest thing to implement

[orta]

I think the simplest answer which covers all cases is:

• Create sveltejs/template-typescript as a fork of sveltejs/template
• The only file which changes between the two is a new script/setupTypeScript.js file
• We recommend the command to set up as:
  npx degit sveltejs/template-typescript && node scripts/setupTypeScript.js

This leaves a simple & recommended CLI setup, which does not break the boundaries of degit ( https://github.com/Rich-Harris/degit/issues/6 .) It's very explicit that it will run a script to set up TypeScript, and it's a separate step so someone can audit it ahead of time.

[antony]

Does it need to be a separate repository if it's basically the same?

How about either:

1. Add the setup script in the existing repository, and an npm task which is setup-typescript, add a line to the readme about running npm run setup-typescript if you want typescript support.

--- or ---

1. Add another branch to the existing template - #rollup-typescript

[dummdidumm]

I like option 1.

[orta]

This is what is needed to set up the repo for TS: https://github.com/orta/svelte-ts-template-example/blob/master/scripts/setupTypeScript.js

I'm in favour of 1 also: the docs could be something like:

If you want to covert this repo to a TypeScript project run:

node scripts/setupTypeScript.js test-template

Otherwise you can delete the scripts directory.

[orta]

I'll give it a week and implement this into the base template

/cc @Rich-Harris in case you have strong opinions on this

[aaomidi]

@orta what is the tsconfig file that is referencing?

https://github.com/orta/svelte-ts-template-example/blob/master/scripts/setupTypeScript.js#L72

[orta]

It's https://www.npmjs.com/package/@tsconfig/svelte

[byteasc]

Is npx degit orta/svelte-ts-template-example sample-app and then running node setupTypeScript.js either from the scripts folder (based on the script setup) or from one step up, supposed to work 100%?

It seems to be renaming files and updates the rollup config partially (seems to be leaving the reference to main.js), but it isn't updating the package.json file with the new dependencies or the script

[orta]

No, I've not finished it

[dummdidumm]

I'm not sure where to put it, but we also should add a step-by-step on how to setup TypeScript in an existing project. Not everyone might start fresh with the template, so it would be good to have that.

[orta]

Expand the FAQ entry with a link to a markdown page?

[orta]

OK, that should be good now:

npx degit orta/template#ts
node scripts/setupTypeScript.js

[benschac]

Just ran it on my computer. Works great! 🥳

[devrnt]

Maybe it is a good idea to have this TypeScript template for the Svelte component template as well?

[devrnt]

TypeScript support for the https://github.com/sveltejs/component-template can be tracked here: https://github.com/sveltejs/component-template/issues/29

[dummdidumm]

Since the official template repo contains a script to convert to typescript, this is issue is no longer relevant.