Merge branch 'master' of https://github.com/sveltejs/language-tools into event-type-check

Author: jasonlyu123

packages/language-server/package.json

@@ -48,7 +48,7 @@
     "dependencies": {
         "cosmiconfig": "^6.0.0",
         "estree-walker": "^2.0.1",
-        "lodash": "^4.17.10",
+        "lodash": "^4.17.19",
         "magic-string": "^0.25.3",
         "prettier": "2.0.5",
         "prettier-plugin-svelte": "1.1.0",

packages/language-server/src/plugins/typescript/features/CompletionProvider.ts

@@ -203,12 +203,19 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         }
 
         const actions = detail?.codeActions;
+        const isImport = !!detail?.source;
+
         if (actions) {
             const edit: TextEdit[] = [];
 
             for (const action of actions) {
                 for (const change of action.changes) {
-                    edit.push(...this.codeActionChangesToTextEdit(document, fragment, change));
+                    edit.push(...this.codeActionChangesToTextEdit(
+                        document,
+                        fragment,
+                        change,
+                        isImport
+                    ));
                 }
             }
 
@@ -241,16 +248,18 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         doc: Document,
         fragment: SvelteSnapshotFragment,
         changes: ts.FileTextChanges,
+        isImport: boolean,
     ): TextEdit[] {
         return changes.textChanges.map((change) =>
-            this.codeActionChangeToTextEdit(doc, fragment, change),
+            this.codeActionChangeToTextEdit(doc, fragment, change, isImport),
         );
     }
 
     private codeActionChangeToTextEdit(
         doc: Document,
         fragment: SvelteSnapshotFragment,
         change: ts.TextChange,
+        isImport: boolean,
     ): TextEdit {
         change.newText = this.changeSvelteComponentName(change.newText);
 
@@ -264,28 +273,58 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
         }
 
         const { span } = change;
-        // prevent newText from being placed like this: <script>import {} from ''
-        if (span.start === 0) {
-            change.newText = ts.sys.newLine + change.newText;
+
+        const virutalRange = convertRange(fragment, span);
+        let range: Range;
+        const isNewImport = isImport && virutalRange.start.character === 0;
+
+        // Since new import always can't be mapped, we'll have special treatment here
+        //  but only hack this when there is multiple line in script
+        if (isNewImport && virutalRange.start.line > 1) {
+            range = this.mapRangeForNewImport(fragment, virutalRange);
+        } else {
+            range = mapRangeToOriginal(fragment, virutalRange);
         }
 
-        let range = mapRangeToOriginal(fragment, convertRange(fragment, span));
-        // If range is somehow not mapped in parent or the import is mapped wrong,
+        // If range is somehow not mapped in parent,
+        // the import is mapped wrong or is outside script tag,
         // use script starting point instead.
         // This happens among other things if the completion is the first import of the file.
         if (
             range.start.line === -1 ||
-            (range.start.line === 0 && range.start.character <= 1 && span.length === 0)
+            (range.start.line === 0 && range.start.character <= 1 && span.length === 0) ||
+            doc.offsetAt(range.start) > scriptTagInfo.end
         ) {
             range = convertRange(doc, {
                 start: scriptTagInfo.start,
                 length: span.length,
             });
         }
+        // prevent newText from being placed like this: <script>import {} from ''
+        if (range.start.line === 0) {
+            change.newText = ts.sys.newLine + change.newText;
+        }
 
         return TextEdit.replace(range, change.newText);
     }
 
+    private mapRangeForNewImport(
+        fragment: SvelteSnapshotFragment,
+        virtualRange: Range
+    ) {
+        const sourceMapableRange = this.offsetLinesAndMovetoStartOfLine(virtualRange, -1);
+        const mappableRange = mapRangeToOriginal(
+            fragment, sourceMapableRange);
+        return this.offsetLinesAndMovetoStartOfLine(mappableRange, 1);
+    }
+
+    private offsetLinesAndMovetoStartOfLine({ start, end }: Range, offsetLines: number) {
+        return Range.create(
+            Position.create(start.line + offsetLines, 0),
+            Position.create(end.line + offsetLines, 0)
+        );
+    }
+
     private isSvelteComponentImport(className: string) {
         return className.endsWith('__SvelteComponent_');
     }

packages/language-server/src/plugins/typescript/features/RenameProvider.ts

@@ -152,7 +152,7 @@ export class RenameProviderImpl implements RenameProvider {
         // First find out if it's really the "rename prop inside component with that prop" case
         // Use original document for that because only there the `export` is present.
         const regex = new RegExp(
-            `export\\s+(const|let)\\s+${this.getVariableAtPosition(
+            `export\\s+let\\s+${this.getVariableAtPosition(
                 tsDoc,
                 fragment,
                 lang,

packages/language-server/test/plugins/typescript/features/CodeActionsProvider.test.ts

@@ -191,8 +191,8 @@ describe('CodeActionsProvider', () => {
                             },
                         },
                         textRange: {
-                            pos: 129,
-                            end: 163,
+                            pos: 130,
+                            end: 164,
                         },
                     },
                 ],
@@ -281,8 +281,8 @@ describe('CodeActionsProvider', () => {
                             },
                         },
                         textRange: {
-                            pos: 129,
-                            end: 163,
+                            pos: 130,
+                            end: 164,
                         },
                     },
                 ],

packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts

@@ -258,7 +258,7 @@ describe('CompletionProviderImpl', () => {
 
         assert.deepEqual(
             additionalTextEdits![0]?.range,
-            Range.create(Position.create(0, 8), Position.create(0, 8)),
+            Range.create(Position.create(2, 0), Position.create(2, 0)),
         );
     });
 
@@ -285,7 +285,7 @@ describe('CompletionProviderImpl', () => {
 
         assert.strictEqual(
             harmonizeNewLines(additionalTextEdits![0]?.newText),
-            `import { blubb } from './definitions';${newLine}`,
+            `${newLine}import { blubb } from './definitions';${newLine}`,
         );
 
         assert.deepEqual(

packages/svelte-vscode/syntaxes/svelte.tmLanguage.json

@@ -3,6 +3,7 @@
     "scopeName": "source.svelte",
     "fileTypes": ["svelte"],
     "uuid": "7582b62f-51d9-4a84-8c8d-fc189530faf6",
+
     "patterns": [
         {
             "begin": "(<)(style)\\b(?=[^>]*(?:type=('text/sass'|\"text/sass\")|lang=(sass|'sass'|\"sass\")))(?![^/>]*/>\\s*$)",
@@ -540,7 +541,7 @@
             ]
         },
         {
-            "begin": "(</?)([a-zA-Z][a-zA-Z0-9:-]*)",
+            "begin": "(</?)([a-z][a-zA-Z0-9:-]*)",
             "beginCaptures": {
                 "1": {
                     "name": "punctuation.definition.tag.begin.html"
@@ -562,6 +563,32 @@
                 }
             ]
         },
+        {
+            "begin": "(</?)([A-Z][a-zA-Z0-9:-]*)",
+            "beginCaptures": {
+                "1": {
+                    "name": "punctuation.definition.tag.begin.html"
+                },
+                "2": {
+                    "name": "support.class.component.svelte"
+                }
+            },
+            "end": "(/?>)",
+            "endCaptures": {
+                "1": {
+                    "name": "punctuation.definition.tag.end.html"
+                },
+                "2": {
+                    "name": "support.class.component.svelte"
+                }
+            },
+            "name": "meta.tag.svelte",
+            "patterns": [
+                {
+                    "include": "#tag-stuff"
+                }
+            ]
+        },
         {
             "begin": "<!--",
             "end": "-->",

packages/svelte2tsx/src/htmlxtojsx.ts

@@ -93,11 +93,12 @@ export function convertHtmlxToJsx(
     };
 
     const handleClassDirective = (attr: Node) => {
-        const needCurly = attr.expression.start == attr.start + 'class:'.length;
         str.overwrite(attr.start, attr.expression.start, `{...__sveltets_ensureType(Boolean, !!(`);
-        str.appendLeft(attr.expression.end, `))${needCurly ? '}' : ''}`);
-        if (htmlx[attr.end - 1] == '"') {
-            str.remove(attr.end - 1, attr.end);
+        const endBrackets = `))}`;
+        if (attr.end !== attr.expression.end) {
+            str.overwrite(attr.expression.end, attr.end, endBrackets);
+        } else {
+            str.appendLeft(attr.end, endBrackets);
         }
     };
 
@@ -511,7 +512,6 @@ export function convertHtmlxToJsx(
     // {() => {let _$$p = (somePromise);
     const handleAwait = (awaitBlock: Node) => {
         str.overwrite(awaitBlock.start, awaitBlock.expression.start, '{() => {let _$$p = (');
-        str.prependLeft(awaitBlock.expression.end, ');');
         // then value } | {:then value} ->
         // _$$p.then((value) => {<>
         let thenStart: number;
@@ -527,11 +527,16 @@ export function convertHtmlxToJsx(
             str.prependLeft(thenStart, '</>; ');
             // add the start tag too
             const awaitEnd = htmlx.indexOf('}', awaitBlock.expression.end);
-            str.remove(awaitEnd, awaitEnd + 1);
-            str.appendRight(awaitEnd, ' <>');
+
+            // somePromise} -> somePromise);
+            str.overwrite(awaitBlock.expression.end, awaitEnd + 1, ');');
+            str.appendRight(awaitEnd + 1, ' <>');
         } else {
             thenEnd = htmlx.lastIndexOf('}', awaitBlock.then.start) + 1;
             thenStart = htmlx.indexOf('then', awaitBlock.expression.end);
+
+            // somePromise then -> somePromise); then
+            str.overwrite(awaitBlock.expression.end, thenStart, '); ');
         }
         if (awaitBlock.value) {
             str.overwrite(

packages/svelte2tsx/src/interfaces.ts

@@ -0,0 +1,26 @@
+import MagicString from 'magic-string';
+import { Node } from 'estree-walker';
+
+export type ExportedNames = Map<
+    string,
+    {
+        type?: string;
+        identifierText?: string;
+        required?: boolean;
+    }
+>;
+
+export interface InstanceScriptProcessResult {
+    exportedNames: ExportedNames;
+    uses$$props: boolean;
+    uses$$restProps: boolean;
+    getters: Set<string>;
+    events: Map<string, string | string[]>;
+}
+
+export interface CreateRenderFunctionPara extends InstanceScriptProcessResult {
+    str: MagicString;
+    scriptTag: Node;
+    scriptDestination: number;
+    slots: Map<string, Map<string, string>>;
+}

packages/svelte2tsx/src/nodes/exportgetters.ts

@@ -0,0 +1,9 @@
+export const createClassGetter = (name: string) =>
+    `\n${' '.repeat(4)}get ${name}() { return render().getters.${name} }`;
+export const createClassGetters = (names: Set<string>) => {
+    return Array.from(names).map(createClassGetter).join('');
+};
+export function createRenderFunctionGetterStr(getters: Set<string>) {
+    const properties = Array.from(getters).map((name) => `${name}: ${name}`);
+    return `{${properties.join(', ')}}`;
+}