Merge remote-tracking branch 'upstream/master' into repl

.github/workflows/Deploy.yml

@@ -44,4 +44,5 @@ jobs:
           OVSX_TOKEN: ${{ secrets.OVSX_TOKEN }}
         with:
           sort: '["svelte2tsx", "svelte-language-server", "svelte-check", "svelte-vscode-nightly"]'
+          only: '["svelte2tsx", "svelte-language-server", "svelte-vscode-nightly"]'
           install: "true"

.github/workflows/DeployExtensionsProd.yml

@@ -3,7 +3,7 @@ name: Tagged Production Deploys
 on:
   push:
     tags:
-      - "*"
+      - "extensions-*"
 
 jobs:
   deploy:
@@ -24,7 +24,7 @@ jobs:
       - run: "npm install -g json"
 
       # Setup the environment
-      - run: 'json -I -f packages/svelte-vscode/package.json -e "this.version=\`${{ github.ref }}\`.split(\`/\`).pop()"'
+      - run: 'json -I -f packages/svelte-vscode/package.json -e "this.version=\`${{ github.ref }}\`.split(\`-\`).pop()"'
 
       # To deploy we need isolated node_modules folders which yarn won't do because it is a workspace
       # So, remove the workspace

.github/workflows/DeploySvelteCheckProd.yml

@@ -0,0 +1,36 @@
+name: Tagged Production Deploys
+
+on:
+  push:
+    tags:
+      - "svelte-check-*"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+          registry-url: "https://registry.npmjs.org"
+
+      # Ensure everything is compiling
+      - run: "yarn install"
+      - run: "yarn build"
+
+      # Lets us use one-liner JSON manipulations the package.json files
+      - run: "npm install -g json"
+
+      # Setup the environment
+      - run: 'json -I -f packages/svelte-check/package.json -e "this.version=\`${{ github.ref }}\`.split(\`-\`).pop()"'
+
+      # Ship it
+      - run: |
+         cd packages/svelte-check
+         npm install
+         npm publish
+
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierignore

@@ -1,5 +1,12 @@
 packages/svelte2tsx/*.d.ts
-packages/svelte2tsx/test/**
+packages/svelte2tsx/test/*/samples/*/*sx
+packages/svelte2tsx/test/*/samples/*/*.svelte
+packages/svelte2tsx/test/sourcemaps/*.html
 packages/language-server/test/**/*.svelte
+packages/language-server/test/**/testfiles/**/*.ts
 packages/svelte-vscode/syntaxes/*.yaml
-.github/**
+packages/typescript-plugin/src/**/*.js
+packages/typescript-plugin/src/**/*.d.ts
+**/dist
+.github/**
+.history/**

.vscode/launch.json

@@ -9,7 +9,7 @@
             "args": ["--extensionDevelopmentPath=${workspaceRoot}/packages/svelte-vscode"],
             "stopOnEntry": false,
             "sourceMaps": true,
-            "outFiles": ["${workspaceRoot}/packkages/svelte-vscode/dist/**/*.js"],
+            "outFiles": ["${workspaceRoot}/packages/svelte-vscode/dist/**/*.js"],
             "preLaunchTask": "npm: watch"
         },
         {
@@ -45,8 +45,12 @@
         {
             "type": "node",
             "request": "attach",
-            "name": "Attach to debugger to svelte-vscode client",
+            "name": "Attach debugger to language server",
             "port": 6009,
+            "outFiles": [
+                "${workspaceRoot}/packages/language-server/dist/**/*.js",
+                "${workspaceRoot}/packages/svelte2tsx/index.js"
+            ],
             "skipFiles": ["<node_internals>/**"]
         }
     ]

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "typescript.preferences.quoteStyle": "single",
+    "typescript.preferences.quoteStyle": "single"
 }

README.md

@@ -33,9 +33,7 @@ A `.svelte` file would look something like this:
     }
 </script>
 
-<button on:click="{handleClick}">
-    Count: {count}
-</button>
+<button on:click="{handleClick}">Count: {count}</button>
 
 <p>{count} * 2 = {doubled}</p>
 <p>{doubled} * 2 = {quadrupled}</p>
@@ -128,7 +126,7 @@ For tricker issues, you can run the tests with a debugger in VSCode by setting a
 
 Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by the support of awesome volunteers. If you'd like to support their efforts, please consider:
 
-- [Becoming a backer on Open Collective](https://opencollective.com/svelte).
+-   [Becoming a backer on Open Collective](https://opencollective.com/svelte).
 
 Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
 

docs/README.md

@@ -39,9 +39,7 @@ LSP-compatible editors, you can use an HTML comment with the `@component` tag:
 <!-- @component But only the last documentation comment will be used -->
 
 <main>
-    <h1>
-        Hello world
-    </h1>
+    <h1>Hello world</h1>
 </main>
 ```
 
@@ -66,7 +64,7 @@ The VS Code extension comes with its own syntax highlighting grammar which defin
 }
 ```
 
-To find out the scope of the things you want to highlight differently, you can use the scope inspector by entering the command "Developer: Inspect Editor Tokens and Scopes". The scope at the top of the section "textmate scopes" is what you are looking for. The current color is in the section "foreground" - you can use this to look up colors of other scopes if you want them to be the same color but don't know the color-code. 
+To find out the scope of the things you want to highlight differently, you can use the scope inspector by entering the command "Developer: Inspect Editor Tokens and Scopes". The scope at the top of the section "textmate scopes" is what you are looking for. The current color is in the section "foreground" - you can use this to look up colors of other scopes if you want them to be the same color but don't know the color-code.
 
 For more info on customizing your theme, [see the VS Code docs](https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme).
 
@@ -95,8 +93,9 @@ If you have the `Babel Javascript` plugin installed, this may be the cause. Disa
 #### My Code does not get formatted
 
 Your default formatter for Svelte files may be wrong.
-- Mabye it's set to the old Svelte extension, if so, remove the setting
-- Maybe you set all files to be formatted by the prettier extension. Then you have two options: Either install `prettier-plugin-svelte` from npm, or tell VSCode to format the code with the `Svelte for VSCode extension`:
+
+-   Mabye it's set to the old Svelte extension, if so, remove the setting
+-   Maybe you set all files to be formatted by the prettier extension. Then you have two options: Either install `prettier-plugin-svelte` from npm, or tell VSCode to format the code with the `Svelte for VSCode extension`:
 
 ```json
   "[svelte]": {

docs/internal/deployment.md

@@ -2,13 +2,13 @@
 
 The [publisher is Svelte](https://marketplace.visualstudio.com/manage/publishers/svelte)
 
-- Extension builds with the account signed up via GitHub from orta
+-   Extension builds with the account signed up via GitHub from orta
 
 ### npm deployments
 
-- Deployments come from a bot: `svelte-language-tools-deploy`
+-   Deployments come from a bot: `svelte-language-tools-deploy`
 
 ### When Deployments happen
 
-- Nightly builds are triggered through a scheduled GitHub workflow every night at 04:00 UTC.
-- Production builds are triggered by creating a new tag, which is best done through the "do a release" on Github. The tag name equals the version that is then shown on the marketplace, so each tag should have a higher version than the previous.
+-   Nightly builds are triggered through a scheduled GitHub workflow every night at 04:00 UTC.
+-   Production builds are triggered by creating a new tag, which is best done through the "do a release" on Github. The tag name equals the version that is then shown on the marketplace, so each tag should have a higher version than the previous.

docs/internal/overview.md

@@ -52,7 +52,7 @@ We chose the second option because TypeScript provides a language service which
 
 `svelte2tsx` uses some [ambient definitions](/packages/svelte2tsx/svelte-shims.d.ts) which are loaded by the language server to do some of the transformations. It also provides [JSX definitions](/packages/svelte2tsx/svelte-jsx.d.ts) which are recognized by the TypeScript compiler and define intrinsic elements, attributes and events - so if you ever get an error that a DOM attribute is not assignable to a DOM element, it's likely a missing declaration in there.
 
-The code generated by `svelte2tsx` is not runnable in any way and does not actually exist at runtime when you run your app, it purely exists for the IntelliSense. 
+The code generated by `svelte2tsx` is not runnable in any way and does not actually exist at runtime when you run your app, it purely exists for the IntelliSense.
 
 The code also returns source mappings so we know which position in the original code corresponds to which generated position.
 

docs/preprocessors/in-general.md

@@ -4,14 +4,14 @@
 
 If a svelte file contains some language other than `html`, `css` or `javascript`, `svelte-vscode` needs to know how to [preprocess](https://svelte.dev/docs#svelte_preprocess) it. This can be achieved by creating a `svelte.config.js` file at the root of your project which exports a svelte options object (similar to `svelte-loader` and `rollup-plugin-svelte`). It's recommended to use the official [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess) package which can handle many languages.
 
-> NOTE: you __cannot__ use the new `import x from y` and `export const` / `export default` syntax in `svelte.config.js`.
+> NOTE: you **cannot** use the new `import x from y` and `export const` / `export default` syntax in `svelte.config.js`.
 
 ```js
 // svelte.config.js
 const sveltePreprocess = require('svelte-preprocess');
 
 module.exports = {
-    preprocess: sveltePreprocess(),
+    preprocess: sveltePreprocess()
 };
 ```
 
@@ -46,9 +46,9 @@ const sveltePreprocess = require('svelte-preprocess');
 module.exports = {
     preprocess: sveltePreprocess({
         defaults: {
-            script: 'typescript', // <-- now you can just write <script>let typingsAllowed: string;</script>
-        },
-    }),
+            script: 'typescript' // <-- now you can just write <script>let typingsAllowed: string;</script>
+        }
+    })
 };
 ```
 
@@ -63,14 +63,14 @@ const sveltePreprocess = require('svelte-preprocess');
 // using sourceMap as an example, but could be anything you need dynamically
 function createPreprocessors(sourceMap) {
     return sveltePreprocess({
-        sourceMap,
+        sourceMap
         // ... your settings
     });
 }
 
 module.exports = {
     preprocess: createPreprocessors(true),
-    createPreprocessors,
+    createPreprocessors
 };
 ```
 
@@ -88,10 +88,10 @@ export default {
         // ...
         svelte({
             // ...
-            preprocess: createPreprocessors(!production),
-        }),
+            preprocess: createPreprocessors(!production)
+        })
         // ...
-    ],
+    ]
 };
 ```
 

docs/preprocessors/scss-less.md

@@ -27,7 +27,7 @@ You need a `svelte.config.js`. [Read here on how to set it up and also how it re
 const sveltePreprocess = require('svelte-preprocess');
 
 module.exports = {
-    preprocess: sveltePreprocess(),
+    preprocess: sveltePreprocess()
 };
 ```
 
@@ -76,6 +76,6 @@ const sveltePreprocess = require('svelte-preprocess');
 const path = require('path');
 
 module.exports = {
-   preprocess: sveltePreprocess({ includePaths: [path.join(__dirname, 'relative/path')] })
+    preprocess: sveltePreprocess({ includePaths: [path.join(__dirname, 'relative/path')] })
 };
 ```

docs/preprocessors/typescript.md

@@ -32,7 +32,7 @@ You may optionally want to add a `svelte.config.js` file - but it is not require
 const sveltePreprocess = require('svelte-preprocess');
 
 module.exports = {
-    preprocess: sveltePreprocess(),
+    preprocess: sveltePreprocess()
 };
 ```
 
@@ -135,3 +135,22 @@ declare namespace svelte.JSX {
 ```
 
 Then make sure that `d.ts` file is referenced in your `tsconfig.json`. If it reads something like `"include": ["src/**/*"]` and your `d.ts` file is inside `src`, it should work. You may need to reload for the changes to take effect.
+
+### I'm unable to use installed types (for example through `@types/..`)
+
+You are most likely extending from Svelte's `@tsconfig/svelte` base config in your `tsconfig.json`, or you did set `"types": [..]` in your `tsconfig`. In both cases, a `"types": [..]` property is present. This makes TypeScript prevent all ambient types which are not listed in that `types`-array from getting picked up. The solution is to enhance/add a `types` section to your `tsconfig.json`:
+
+```
+{
+    "compilerOptions": {
+        // ..
+        "types": ["svelte", "..<your installed type>.."]
+    }
+}
+```
+
+We are looking for ways to make the `types` definition in `@tsconfig/svelte` unnecessary, so you don't have those issues in the future.
+
+### I'm getting weird behavior when using `"module": "CommonJS"`
+
+Don't set the module to `CommonJS`, it will result in wrong transpilation of TypeScript to JavaScript. Moreover, you shouldn't set this anyway as `CommonJS` is a module format for NodeJS which is not understood by the Browser. For more technical details, see [this issue comment](https://github.com/sveltejs/language-tools/issues/826#issuecomment-782858437).

package.json

@@ -8,22 +8,23 @@
         "packages/*"
     ],
     "scripts": {
-        "bootstrap": "yarn workspace svelte2tsx build",
+        "bootstrap": "yarn workspace svelte2tsx build && yarn workspace svelte-vscode build:grammar",
         "build": "tsc -b",
         "test": "CI=true yarn workspaces run test",
         "watch": "tsc -b -watch",
-        "lint": "eslint \"packages/**/*.{ts,js}\""
+        "format": "prettier --write .",
+        "lint": "prettier --check . && eslint \"packages/**/*.{ts,js}\""
     },
     "dependencies": {
-        "axios": "0.21.1",
-        "typescript": "^4.1.3"
+        "typescript": "^4.2.2"
     },
     "devDependencies": {
         "@sveltejs/eslint-config": "github:sveltejs/eslint-config#v5.2.0",
         "@typescript-eslint/eslint-plugin": "^4.3.0",
         "@typescript-eslint/parser": "^4.3.0",
         "eslint": "^7.7.0",
         "eslint-plugin-import": "^2.22.1",
-        "eslint-plugin-svelte3": "^2.7.3"
+        "eslint-plugin-svelte3": "^2.7.3",
+        "prettier": "2.2.1"
     }
 }

packages/language-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelte-language-server",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "description": "A language server for Svelte",
     "main": "dist/src/index.js",
     "typings": "dist/src/index",
@@ -51,9 +51,9 @@
         "estree-walker": "^2.0.1",
         "lodash": "^4.17.19",
         "prettier": "2.2.1",
-        "prettier-plugin-svelte": "~1.4.1",
+        "prettier-plugin-svelte": "~2.2.0",
         "source-map": "^0.7.3",
-        "svelte": "3.31.0",
+        "svelte": "~3.35.0",
         "svelte-preprocess": "~4.6.1",
         "svelte2tsx": "*",
         "typescript": "*",

packages/language-server/src/lib/FallbackWatcher.ts

@@ -0,0 +1,44 @@
+import { FSWatcher, watch } from 'chokidar';
+import { join } from 'path';
+import { DidChangeWatchedFilesParams, FileChangeType, FileEvent } from 'vscode-languageserver';
+import { pathToUrl } from '../utils';
+
+type DidChangeHandler = (para: DidChangeWatchedFilesParams) => void;
+
+export class FallbackWatcher {
+    private readonly watcher: FSWatcher;
+    private readonly callbacks: DidChangeHandler[] = [];
+
+    constructor(glob: string, workspacePaths: string[]) {
+        this.watcher = watch(workspacePaths.map((workspacePath) => join(workspacePath, glob)));
+
+        this.watcher
+            .on('add', (path) => this.callback(path, FileChangeType.Created))
+            .on('unlink', (path) => this.callback(path, FileChangeType.Deleted))
+            .on('change', (path) => this.callback(path, FileChangeType.Changed));
+    }
+
+    private convert(path: string, type: FileChangeType): DidChangeWatchedFilesParams {
+        const event: FileEvent = {
+            type,
+            uri: pathToUrl(path)
+        };
+
+        return {
+            changes: [event]
+        };
+    }
+
+    private callback(path: string, type: FileChangeType) {
+        const para = this.convert(path, type);
+        this.callbacks.forEach((callback) => callback(para));
+    }
+
+    onDidChangeWatchedFiles(callback: DidChangeHandler) {
+        this.callbacks.push(callback);
+    }
+
+    dispose() {
+        this.watcher.close();
+    }
+}