(feat) support ESM configs

.github/workflows/CI.yml

@@ -8,6 +8,8 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -37,6 +39,8 @@ jobs:
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

docs/preprocessors/in-general.md

@@ -4,7 +4,7 @@
 
 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: Prior to `svelte-check 1.4.0` / `svelte-language-server 0.13.0` / `Svelte for VS Code 104.9.0` you **cannot** use the new `import x from y` and `export const` / `export default` syntax in `svelte.config.js`.
 
 ```js
 // svelte.config.js

packages/language-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelte-language-server",
-    "version": "0.12.0",
+    "version": "0.13.0",
     "description": "A language server for Svelte",
     "main": "dist/src/index.js",
     "typings": "dist/src/index",
@@ -30,10 +30,13 @@
         "url": "https://github.com/sveltejs/language-tools/issues"
     },
     "homepage": "https://github.com/sveltejs/language-tools#readme",
+    "engines": {
+        "node": ">= 12.0.0"
+    },
     "devDependencies": {
         "@tsconfig/node12": "^1.0.0",
-        "@types/cosmiconfig": "^6.0.0",
         "@types/estree": "^0.0.42",
+        "@types/glob": "^7.1.1",
         "@types/lodash": "^4.14.116",
         "@types/mocha": "^7.0.2",
         "@types/node": "^13.9.0",
@@ -47,8 +50,8 @@
     },
     "dependencies": {
         "chokidar": "^3.4.1",
-        "cosmiconfig": "^7.0.0",
         "estree-walker": "^2.0.1",
+        "glob": "^7.1.6",
         "lodash": "^4.17.19",
         "prettier": "2.2.1",
         "prettier-plugin-svelte": "~2.2.0",

packages/language-server/src/lib/documents/Document.ts

@@ -2,7 +2,7 @@ import { urlToPath } from '../../utils';
 import { WritableDocument } from './DocumentBase';
 import { extractScriptTags, extractStyleTag, TagInformation } from './utils';
 import { parseHtml } from './parseHtml';
-import { SvelteConfig, loadConfig } from './configLoader';
+import { SvelteConfig, configLoader } from './configLoader';
 import { HTMLDocument } from 'vscode-html-languageservice';
 
 /**
@@ -13,23 +13,42 @@ export class Document extends WritableDocument {
     scriptInfo: TagInformation | null = null;
     moduleScriptInfo: TagInformation | null = null;
     styleInfo: TagInformation | null = null;
-    config!: SvelteConfig;
+    configPromise: Promise<SvelteConfig | undefined>;
+    config?: SvelteConfig;
     html!: HTMLDocument;
 
     constructor(public url: string, public content: string) {
         super();
+        this.configPromise = configLoader.awaitConfig(this.getFilePath() || '');
         this.updateDocInfo();
     }
 
     private updateDocInfo() {
-        if (!this.config || this.config.loadConfigError) {
-            this.config = loadConfig(this.getFilePath() || '');
-        }
         this.html = parseHtml(this.content);
         const scriptTags = extractScriptTags(this.content, this.html);
-        this.scriptInfo = this.addDefaultLanguage(scriptTags?.script || null, 'script');
-        this.moduleScriptInfo = this.addDefaultLanguage(scriptTags?.moduleScript || null, 'script');
-        this.styleInfo = this.addDefaultLanguage(extractStyleTag(this.content, this.html), 'style');
+        const update = (config: SvelteConfig | undefined) => {
+            this.config = config;
+            this.scriptInfo = this.addDefaultLanguage(config, scriptTags?.script || null, 'script');
+            this.moduleScriptInfo = this.addDefaultLanguage(
+                config,
+                scriptTags?.moduleScript || null,
+                'script'
+            );
+            this.styleInfo = this.addDefaultLanguage(
+                config,
+                extractStyleTag(this.content, this.html),
+                'style'
+            );
+        };
+
+        const config = configLoader.getConfig(this.getFilePath() || '');
+        if (config && !config.loadConfigError) {
+            update(config);
+        } else {
+            this.configPromise = configLoader.awaitConfig(this.getFilePath() || '');
+            update(undefined);
+            this.configPromise.then((c) => update(c));
+        }
     }
 
     /**
@@ -76,17 +95,19 @@ export class Document extends WritableDocument {
     }
 
     private addDefaultLanguage(
+        config: SvelteConfig | undefined,
         tagInfo: TagInformation | null,
         tag: 'style' | 'script'
     ): TagInformation | null {
-        if (!tagInfo) {
-            return null;
+        if (!tagInfo || !config) {
+            return tagInfo;
         }
 
-        const defaultLang = Array.isArray(this.config.preprocess)
-            ? this.config.preprocess.find((group) => group.defaultLanguages?.[tag])
-                  ?.defaultLanguages?.[tag]
-            : this.config.preprocess?.defaultLanguages?.[tag];
+        const defaultLang = Array.isArray(config.preprocess)
+            ? config.preprocess.find((group) => group.defaultLanguages?.[tag])?.defaultLanguages?.[
+                  tag
+              ]
+            : config.preprocess?.defaultLanguages?.[tag];
 
         if (!tagInfo.attributes.lang && !tagInfo.attributes.type && defaultLang) {
             tagInfo.attributes.lang = defaultLang;