add TypeScript support at project init #41

Rich-Harris · 2020-10-20T03:46:39Z

One possible approach to #31 — adds an init-time prompt that asks if you want to add TypeScript, and if so adds it to package.json and edits the example component to use lang="ts".

It also adds svelte-preprocess by default, which I'm not totally sold on (since it's an extra moving part), but i'm probably in the minority there. (Should svelte-preprocess be moved into this repo? It feels like it probably belongs)

benmccann · 2020-10-20T14:00:43Z

This PR lgtm.

Is the soft-bats-build.md some auto-generated thing and you always end up with random names like that?

I'd probably lean away from having svelte-preprocess be part of this repo, but @kaisermann would be the real person to ask

Conduitry · 2020-10-20T14:17:21Z

Yeah the random filenames are part of https://github.com/atlassian/changesets

kaisermann · 2020-10-20T16:58:44Z

I've been asking myself if svelte-preprocess shouldn't live with the rest of the language-tools for quite a while, but now with kit in the mix, it probably makes more sense to move it here since it fits the Everything you need to build a Svelte app. motto. The only downside I'm seeing now is having a bunch of possibly unrelated issues polluting the issues list. When you say "an extra moving part" you mean purely from a repository/maintainership perspective?

Conduitry · 2020-10-20T17:32:16Z

I read the extra moving part as referring to including it as something to be installed with the template, regardless of which repo the code lived in.

It would probably be nice if package.json could be varied depending on whether the user chose to init their app in TS mode.

kaisermann · 2020-10-20T21:39:40Z

Completely agree with the varied package.json. Even if lots of people use Svelte with some kind of preprocessor, we shouldn't install it if it's not necessary. We're already modifying the package.json with the add_typescript, couldn't we have an add_svelte_preprocess method? This could also help if we decide to have a prompt for preprocessors at some point.

dominikg · 2020-10-20T22:21:24Z

some discussion about an official typescript template took place here sveltejs/svelte#5016, may still be relevant?

In svite i started with a small script too but ultimately went with degit and only slight modifications to package.json because i think it can be helpful to have the template laid out in a git repo so it is accessible outside of a created project on disc (eg linking for documentation, discussions etc).

But that can be solved with some form of automation that updates an example repo every time the base template or a modification changes.

And i really like the concept of modifications! Even more so if they turned out to be "standalone" and accessible via cli later.
console.log(`You can add TypeScript support later with ${bold(cyan('npm install -D typescript'))}`); would then be sth. like console.log(`You can add TypeScript support later with ${bold(cyan('svelte add typescript'))}`);

Maybe i missed some things but should this modification add a tsconfig.json like (see https://github.com/sveltejs/template/blob/431bd4d58e59b46ebfa1f4fc2c1ab55853fc1521/scripts/setupTypeScript.js#L90)
and turn all .js files into .ts?

Other ideas for modifications: add svelte-check , add vscode extension recommendation.

benmccann · 2020-10-20T22:25:16Z

Here's the one for Sapper (which is rather recent and a bit more involved): https://github.com/sveltejs/sapper-template/blob/master/scripts/setupTypeScript.js

dummdidumm · 2020-10-22T09:42:37Z

Answering @dominikg

And i really like the concept of modifications! Even more so if they turned out to be "standalone" and accessible via cli later.
console.log(`You can add TypeScript support later with ${bold(cyan('npm install -D typescript'))}`); would then be sth. like console.log(`You can add TypeScript support later with ${bold(cyan('svelte add typescript'))}`);

Isn't that what this prompt also does? It relies on some initial standalone template as far as I can see and then applies modifications to it.

Maybe i missed some things but should this modification add a tsconfig.json like (see https://github.com/sveltejs/template/blob/431bd4d58e59b46ebfa1f4fc2c1ab55853fc1521/scripts/setupTypeScript.js#L90)
and turn all .js files into .ts?

Yes, that's missing from this PR, should be added.

Other ideas for modifications: add svelte-check , add vscode extension recommendation.

svelte-check: Nice idea for a separate step!
vscode extension: I think it would be better to have some kind of message in the end of the setup like "Here are some IDE recommendations: ..."

Answering @kaisermann

Completely agree with the varied package.json. Even if lots of people use Svelte with some kind of preprocessor, we shouldn't install it if it's not necessary. We're already modifying the package.json with the add_typescript, couldn't we have an add_svelte_preprocess method? This could also help if we decide to have a prompt for preprocessors at some point.

I think it would be better to hide this behind more semantic flags/prompts like "add typescript?", "what styling solution do you want to use? (css, scss, less, other)", and depending on the inputs of the user svelte-preprocess will be added as well as a corresponding entry to svelte.config.js.

kaisermann · 2020-10-22T11:40:26Z

Yeah, what I meant was to at least have a method to do it on a need-basis, preventing the lib to be hardcoded in the package.json ✌️ . Semantic options would indeed be DX friendly and I think we should cover just the basic cases like scss, stylus, etc. These don't require any configuration, unlike postcss and babel, which could make these prompts too complicated.

dominikg · 2020-10-22T11:52:22Z

Isn't that what this prompt also does? It relies on some initial standalone template as far as I can see and then applies modifications to it.

Yes, but as is this modification only works for the vanilla template (eg assumes Counter.svelte exists). What i meant with standalone was that it could be called later-later, when the user already started working on the project and now feels a need to add typescript.

dummdidumm · 2020-10-22T12:00:19Z

Isn't that what this prompt also does? It relies on some initial standalone template as far as I can see and then applies modifications to it.

Yes, but as is this modification only works for the vanilla template (eg assumes Counter.svelte exists). What i meant with standalone was that it could be called later-later, when the user already started working on the project and now feels a need to add typescript.

Ah, I get it now, thanks. Maybe we can get the best of both worlds and run certain modifications only on creation. So there would be a common subset, and npm init svelte would add additional modifications on top.

Rich-Harris · 2020-10-23T15:44:11Z

my thoughts:

we want to keep modifications to a bare minimum — they're inherently brittle (if you have several, and some of them can do things like editing Counter.svelte, then you end up having a hard time ensuring that any combination of modifications will result in a working app)
i like the of only installing svelte-preprocess if you say yes to TypeScript
i'm just going to say it: TypeScript is a good addition to a codebase, Stylus etc are not IMHO. i think it makes sense for us to make TS support as seamless as possible but in general i think there should be a little bit of friction if you want to start using non-standard languages. (the distinction is subjective, but we endorse TS through our own use of it in the svelte codebase, and on the basis of adoption TS basically is a standard langauge). therefore, i think it'd be fine to not ask about those other languages or about svelte-preprocess outside the TS prompt
i'm also wary of post-creation scripts. the challenge of making robust modifications is exponentially harder when you have no idea what chaos has been done to the project. we should strive for an architecture that makes it easy for people to make those modifications themselves and understand what they're doing — teach a man to fish — rather than npx svelte give-me-a-fish. if the CLI turns into 'Clippy, but for Svelte apps' we will regret it

looking into the tsconfig.json thing, good catch

orta

concept seems good to me 👍🏻

dominikg · 2020-10-23T19:24:33Z

Brittleness would be a problem indeed. To some extent that also applies to modifications to the vanilla template.
This could be dealt with by using the tools we already use for building. Update .svelte files? That sounds like a job for a markup preprocessor. Modify js/ts code? Rollup does that all day.

Another thing that the typescript modification could add is an extra npm script for validation via tsc --noEmit (and svelte-check?)

- add more devDependencies - add snowpack typescript plugin - add svelte-preprocess only when TS selected - add globals.d.ts - add tsconfig.json

dummdidumm

I continued work on this setup.

add more devDependencies
add snowpack typescript plugin
add svelte-preprocess only when TS selected
add globals.d.ts
add tsconfig.json

I did the codemods through simple string-replacements for now. I did not add svelte-check because this could also be added to the snowpack plugin.

dummdidumm · 2020-10-24T10:31:26Z

packages/create-svelte/template/package.json

-		"@sveltejs/snowpack-config": "workspace:*",
+		"@sveltejs/adapter-node": "^0.0.1",
+		"@sveltejs/kit": "^0.0.1",
+		"@sveltejs/snowpack-config": "^0.0.1",


I changed these back because they are part of the template, else someone installing from npm would immediately get errors I guess.

^0.0.1 will only match 0.0.1 because of special behavior with leading zeros. We'd want ~0.0.1 for the time being, or 0.0.x, until we advance beyond that point in the versioning.

I feel like we can do better still, by adding a prepublishOnly step for this package that grabs the latest versions for all workspace:* dependencies in the template and injects them when a project is scaffolded

Wait, fetches and injects them when you publish the create-svelte package, or fetches and injects them when somebody runs create-svelte?

I- wh- what's done

oh. you may have a point

dummdidumm · 2020-10-24T10:33:35Z

packages/create-svelte/cli/modifications/add_typescript.js

+		"esModuleInterop": true,
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true
+	},


I copied the tsconfig from the base repo because I changed the way the *.svelte files are picked up for TS: by adding that definition to the globals.d.ts. That makes the "types": ["svelte"] obsolete. We should change that back someday and sync up with @tsconfig/svelte again. We cannot do this now because it breaks the existing code bases. FYI @orta

packages/create-svelte/cli/modifications/add_typescript.js

add TypeScript support at project init

5fbc475

orta approved these changes Oct 23, 2020

View reviewed changes

Simon Holthausen added 3 commits October 24, 2020 10:02

more setup

b259d2f

- add more devDependencies - add snowpack typescript plugin - add svelte-preprocess only when TS selected - add globals.d.ts - add tsconfig.json

Merge branch 'master' into add-typescript

0064848

remove workspace references from template package.json

42cef82

dummdidumm reviewed Oct 24, 2020

View reviewed changes

benmccann reviewed Oct 27, 2020

View reviewed changes

packages/create-svelte/cli/modifications/add_typescript.js Outdated Show resolved Hide resolved

Rich-Harris added 3 commits October 27, 2020 19:20

Merge branch 'master' into add-typescript

f0a9fe7

use workspace:* versions

9535db8

tidy up

5dac113

Rich-Harris merged commit 5a923c4 into master Oct 27, 2020

Rich-Harris deleted the add-typescript branch October 27, 2020 23:38

tylersayshi mentioned this pull request Sep 18, 2021

[Seeking Help] Adding Typescript Support Elderjs/elderjs#212

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add TypeScript support at project init #41

add TypeScript support at project init #41

Rich-Harris commented Oct 20, 2020

benmccann commented Oct 20, 2020

Conduitry commented Oct 20, 2020

kaisermann commented Oct 20, 2020

Conduitry commented Oct 20, 2020

kaisermann commented Oct 20, 2020

dominikg commented Oct 20, 2020

benmccann commented Oct 20, 2020

dummdidumm commented Oct 22, 2020

kaisermann commented Oct 22, 2020 •

edited

Loading

dominikg commented Oct 22, 2020

dummdidumm commented Oct 22, 2020

Rich-Harris commented Oct 23, 2020

orta left a comment

dominikg commented Oct 23, 2020

dummdidumm left a comment

dummdidumm Oct 24, 2020

Conduitry Oct 27, 2020

Rich-Harris Oct 27, 2020

Conduitry Oct 27, 2020

Rich-Harris Oct 27, 2020

Conduitry Oct 27, 2020

Rich-Harris Oct 28, 2020

dummdidumm Oct 24, 2020 •

edited

Loading

add TypeScript support at project init #41

add TypeScript support at project init #41

Conversation

Rich-Harris commented Oct 20, 2020

benmccann commented Oct 20, 2020

Conduitry commented Oct 20, 2020

kaisermann commented Oct 20, 2020

Conduitry commented Oct 20, 2020

kaisermann commented Oct 20, 2020

dominikg commented Oct 20, 2020

benmccann commented Oct 20, 2020

dummdidumm commented Oct 22, 2020

kaisermann commented Oct 22, 2020 • edited Loading

dominikg commented Oct 22, 2020

dummdidumm commented Oct 22, 2020

Rich-Harris commented Oct 23, 2020

orta left a comment

Choose a reason for hiding this comment

dominikg commented Oct 23, 2020

dummdidumm left a comment

Choose a reason for hiding this comment

dummdidumm Oct 24, 2020

Choose a reason for hiding this comment

Conduitry Oct 27, 2020

Choose a reason for hiding this comment

Rich-Harris Oct 27, 2020

Choose a reason for hiding this comment

Conduitry Oct 27, 2020

Choose a reason for hiding this comment

Rich-Harris Oct 27, 2020

Choose a reason for hiding this comment

Conduitry Oct 27, 2020

Choose a reason for hiding this comment

Rich-Harris Oct 28, 2020

Choose a reason for hiding this comment

dummdidumm Oct 24, 2020 • edited Loading

Choose a reason for hiding this comment

kaisermann commented Oct 22, 2020 •

edited

Loading

dummdidumm Oct 24, 2020 •

edited

Loading