Adding JSDoc type support

[jasonlyu123]

Propose to add JSDoc type support to language-server

• Add method to language server host to distinguish script kind of svelte script
• Monitor script type attribute and notify typescript script kind changes Already done
• The default script kind would be changed to js, check for if it make any changes.
• Checking for // @ts-check Handle by ts language service
• getSemanticDiagnostics for js
• Add svelte/types to default tsconfig/jsconfig.json, mainly needed runtime/ambient.d.ts
  require Update service.ts to fix the errors with imports #8 to work

-- Shared With TS

• Problem of variable injected by Reactive statement and prefixed store variable
  see discussion in Overview of approaches on a language server #11

More info will be added later

[orta]

Cool idea!

[jasonlyu123]

The default script kind would be changed to js, check for if it make any changes.

I checked my codebase and doesn't find any issue. But if someone do use typescript and doesn't "correctly" set script lang attribute, it may have some problem though.

Changes of this branch includes:

1. Now ts won't complain about component have no default export. This also works when no workspace svelte dependency.
2. ts-check now provide type check on script of js
3. On script of js, language-service now recognize JSDoc type and won't suggest you to move it to ts type

About reactive statement and prefixed store variable, we could add JSDoc declaration in preprocessing. More work will needed to be done after typescript's work about this is done. For now, I think this branch is ready for review/merge.

[dummdidumm]

Looks good to me!

Reactive statements / $-signs should be handled in a preprocessor later on. We also need to think about passing the whole svelte-file in to get rid of "unused method"-stuff and to be able to provide intellisense inside mustache-parts of the html (on:click={someFn}). But as you said, that should come later.

[jasonlyu123]

@dummdidumm also <script context="module"> . Like you said in the overview thread, the fragments solution do needs some rework

[dummdidumm]

@orta any chance you could get a look at this PR and my other two PRs this week and possibly merge them in if they are ok with you? (sry if I'm rushing you)

[orta]

OK, cool, this looks good 👍

[jakobrosenberg]

Is this available now and if so how would I enable JSDoc support in a Svelte file?

[jasonlyu123]

@jakobrosenberg not release yet. You could wait for beta version to release or build it from source.
---- updated
Release in 99.0.3 of svelte beta

[jakobrosenberg]

@jasonlyu123 thanks for the advice. I cloned it and ran yarn and yarn build, but now I'm not sure what to do next in order to add it to VSCode.

EDIT: Got it working by opening it in its own window instead of as part of a workspace and was then able to run the debug function to launch a new instance of VS Code.

However, I'm getting no error highlighting, even though Check JS is enabled in settings.

[dhonx]

@jakobrosenberg I will do the same thing I think

[jasonlyu123]

@jakobrosenberg for now you can only use vscode debug (see README) to try it out or use some hack to replace svelte-language-server bin with the compiled one.
@orta Maybe it'll be good idea to have a option to config custom path to svelte-languge-sever and also publish beta/alpha version of svelte-language-server to npm.

[dummdidumm]

Since #25 we have nightly deployments if commits happened on master, so theoretically - if the deployment succeeded - you should have this feature in the new svelte beta very soon.

[orta]

It failed - but I fixed it d02a85d, and there's a new deploy 99.0.2!

[dhonx]

@orta Why the version is 99?

[jakobrosenberg]

@dummdidumm any chance you know how to:

A) enable highlighting of type errors in .svelte files (I've enabled Check JS in VSCode and it works in plain .js files)
B) enable types for modules imported from a package with a svelte key in the package.json?

[jasonlyu123]

@jakobrosenberg I doesn't implement vscode's checkJS option, doesn't know there is an option for this. I'll make a new PR later. For now, you can set checkJS in tsconfig.json or jsconfig.json, also you could use // @ts-check directive at the top of script

[orta]

it'll never follow semver, because the version is totally automatic - so just maxed it out to make that obvious

[jasonlyu123]

@jakobrosenberg I found that svelte-language-server and the extension doesn't use vscode's typescript setting but has some similar settings under svelte.plugin. So even if I add a new setting to enable global checkJS, it won't be the one you mention.

About your second question,

package with a svelte key in the package.json

can you get me some example of what you mention?

[jakobrosenberg]

@jasonlyu123

{
  "name": "@sveltech/routify",
  "version": "0.0.0-development",
  "description": "Routes for Svelte, automated by your filestructure",
  "main": "lib/index.js",
  "svelte": "runtime/index.js",

The svelte key is what is being resolved within Svelte apps, but code completion doesn't work, since VSCode uses the main key.

Could not find a declaration file for module '@sveltech/routify'. '... routify/lib/index.js' implicitly has an 'any' type.

[jasonlyu123]

@jakobrosenberg I know what you means know! Thanks for point that out, this is not implemented yet. I'll open a new issue for this, Thanks!

[jakobrosenberg]

JSDoc support has been working great for me, but all of a sudden inline imports in index.d.ts are now exported as any.

EDIT:
I might have solved this one.

Regardless. Is there a better approach to handle exporting types?

[jasonlyu123]

@jakobrosenberg typescript 3.7 added this useful feature, I stumble upon this a few days ago. It can emit declarations for js written with jsdoc type. You can use tsc with --declaration, --allowJs and --emitDeclarationOnly flags to build declaration

[jakobrosenberg]

@jasonlyu123 thank you that was very helpful. After declaring types and replacing the imports from ./runtime/helpers to ./types/runtime/helpers it's now working.

[jakobrosenberg]

Sorry if this is not related to JSDoc or this pull. If I have a .d.ts file which uses types from another .d.ts file, types only works if both files are open in my editor at the same time.

Errors are gone when I open the definitions file.

[jasonlyu123]

I don't know how to configure it to make ts always read those global type definitions. The only solution I come up with is to move it to .ts file and import it. @orta Do know another solution?

[ryanatkn]

Check "include" in your tsconfig?

[jakobrosenberg]

Thanks so much guys. I had completely overlooked the facts that tsconfig handles more than just compilation. I had it it configured to just emit declarations from .js files.