Add a TypeScript component template

[devrnt]

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 Svelte extension from VSCode this is working good already.

Describe the solution you'd like
Add a sveltejs/typescript-component-template similar to https://github.com/sveltejs/component-template.

How important is this feature to you?
Important to get the word out that Svelte supports TypeScript in the component-template as well.

Related issues
This issue is based on the issue in the svelte/svelte repository. The app-template is already "migrated" to TypeScript, but this issue addresses the component-template.

[devrnt]

I've "migrated" this component template to support TypeScript: https://github.com/devrnt/component-template. This fork is ready to be used if TypeScript is desired.

Known warnings when building (and solutions)

• Plugin typescript: @rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.

Set sourcemap: true in the output entries in rollup.config.js

Possible improvements

• Out-of-the-box terser integration in production
• Integration of linter and formatter
• Integration of https://github.com/testing-library/svelte-testing-library

[jnordberg]

I'm having troubles with this template, I built a component using it (https://github.com/jnordberg/svelte-qr) and it works fine when installing it locally (in a svelte typescript template project) with yarn link but when installing it from npm (it is published under svelte-qr) I get the following error:

bundles src/main.ts → public/build/bundle.js...
[!] (plugin typescript) Error: Could not load myproject/node_modules/svelte-qr/src/index.ts (imported by src/pages/login.svelte): Debug Failure. False expression: Expected fileName to be present in command line
Error: Could not load myproject/node_modules/svelte-qr/src/index.ts (imported by src/pages/login.svelte): Debug Failure. False expression: Expected fileName to be present in command line
    at Object.getOutputFileNames (myproject/node_modules/typescript/lib/typescript.js:94573:18)
    at findTypescriptOutput (myproject/node_modules/@rollup/plugin-typescript/dist/index.js:392:33)
    at Object.load (myproject/node_modules/@rollup/plugin-typescript/dist/index.js:594:28)

[devrnt]

Looks like svelte is trying to use the svelte entry in your package.json which allows Svelte apps to import the source code directly.

Does it work if you remove the svelte entry in your package.json? I guess this should be updated in the TypeScript component template.

[jnordberg]

If I remove the svelte entry it works. Strange part is that the exact same code works fine when symlinked into node_modules...

However I was able to get it to work by changing typescript rollup plugin in the project consuming svelte-qr. Switching from import typescript from '@rollup/plugin-typescript' to import typescript from '@wessberg/rollup-plugin-ts' in my rollup.config.js

[jerriclynsjohn]

If I remove the svelte entry it works. Strange part is that the exact same code works fine when symlinked into node_modules...

However I was able to get it to work by changing typescript rollup plugin in the project consuming svelte-qr. Switching from import typescript from '@rollup/plugin-typescript' to import typescript from '@wessberg/rollup-plugin-ts' in my rollup.config.js

This works and it's really weird that @rollup/plugin-typescipt is throwing that error.

[daaku]

Removing svelte from package.json works for me as well, but the build setup from https://github.com/devrnt/component-template doesn't seem to output typings? @devrnt am I using it wrong?

My current best guess is that tsconfig.json is generally not setup to include .ts files directly from node_modules, which is what causes the svelte directive to break the build. I don't know what benefits there would be to make that work, but outputting typings would at least provide the full benefit of using typescript.

[frederikhors]

It would also be great to understand what definitions to extend for component development.

From @svelte/types?

[devrnt]

It has been a while since I've read any updates regarding TypeScript in Svelte (since the "official" TypeScript support). I think you should take a look at the docs of @rollup/plugin-typescript for the declaration files. @daaku

[daaku]

@devrnt I managed to get types outputted, but not for the .svelte files. Seems like that's a known limitation for now?

[dummdidumm]

Auto-generation of d.ts files / types for .svelte files is not supported yet. There is an open RFC which will make authoring those easier though.

[frederikhors]

@devrnt I managed to get types outputted, but not for the .svelte files. Seems like that's a known limitation for now?

Can I ask you how, please, @daaku?

[daaku]

For non .svelte files I added this to get types:

typescript({
  declaration: true,
  declarationDir: 'dist/types',
  rootDir: 'src'
}),