feat(create-app): add 'vanilla-ts' template

[mrienstra]

Description

Adds a 'vanilla-ts' template to @vitejs/create-app.

Additional context

After experimenting with this template locally, I discovered a duplicate PR, #2814. I began reviewing it (and subsequently finished reviewing it), but decided it would be slightly more straightforward to open this PR.

I copied main.js from the vanilla template and renamed it main.ts. I had to make a small change to satisfy Typescript, as the original version:

document.querySelector('#app').innerHTML = `

... Throws an Object is possibly 'null' error.

I looked at all of the existing packages/create-app/template-*/tsconfig.json files, and came up with a tsconfig.json for this template which (hopefully) represents a reasonable starting point. I opted to not specify lib, and instead allow it to be set by target (which is also the case in the template-svelte-ts tsconfig.json).

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate. (See note above)
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[antfu]

Think we should add "lib": ["esnext", "dom"],. It should not conflict with target I think

[mrienstra]

I'm fine with that!

To the best of my knowledge (just opened a PR on the subject, so should have confirmation soon): Dropping "lib" results in a default value being used, controlled by "target" -- in this case, since "target" is "ESNext", "lib" will be set to "ESNext.Full" -- which cannot be set directly.

"ESNext.Full" is (currently, it's a moving target) the equivalent of:
["esnext", "dom", "webworker.importscripts", "scripthost", "dom.iterable"]

But perhaps using "lib" is friendlier, since the behavior is more obvious?

[antfu]

Yeah, I think specifying lib could be more explicit. Where we also have it for Vue TS

vite/packages/create-app/template-vue-ts/tsconfig.json

Line 11 in de4e08d

"lib": ["esnext", "dom"],

[mrienstra]

@antfu, yup, all of the template tsconfig.json have "lib", except for for the template-svelte-ts tsconfig.json, been considering floating the idea of making them a little more consistent. Obviously some of the differences are necessary, but others seem arbitrary.

[patak-dev]

Just for reference, a PR to add a vanilla-ts was not merged #2023 (comment), on the basis that it was just adding a config file over the js equivalent. But this is something that several people in the community have been requesting. I think there is merit in having this template in create-app

[antfu]

As #2023 comes first, let's work on it and have discussions there instead. Thanks for your contributions.

[mrienstra]

As #2023 comes first, let's work on it and have discussions there instead. Thanks for your contributions.

Sounds good, thanks!