(fix) prevent spell-check suggesting generated variable

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

@@ -881,10 +881,13 @@ function isValidCompletion(
             ? (value: ts.CompletionEntry) => startsWithUppercase.test(value.name)
             : () => true;
 
-    const isNoSvelte2tsxCompletion = (value: ts.CompletionEntry) =>
-        value.kindModifiers !== 'declare' ||
-        (!value.name.startsWith('__sveltets_') && !svelte2tsxTypes.has(value.name));
+    const isNoSvelte2tsxCompletion = (value: ts.CompletionEntry) => {
+        if (value.kindModifiers === 'declare') {
+            return !value.name.startsWith('__sveltets_') && !svelte2tsxTypes.has(value.name);
+        }
 
+        return !value.name.startsWith('$$_');
+    };
     const isCompletionInHTMLStartTag = !!getNodeIfIsInHTMLStartTag(
         document.html,
         document.offsetAt(position)

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/undeclared-component/expected.json

@@ -0,0 +1,18 @@
+[
+    {
+        "range": { "start": { "line": 2, "character": 1 }, "end": { "line": 2, "character": 10 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Cannot find name 'Component'.",
+        "code": 2304,
+        "tags": []
+    },
+    {
+        "range": { "start": { "line": 3, "character": 1 }, "end": { "line": 3, "character": 22 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Cannot find name 'SomeLongComponentName'.",
+        "code": 2304,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/undeclared-component/expectedv2.json

@@ -0,0 +1,18 @@
+[
+    {
+        "range": { "start": { "line": 2, "character": 1 }, "end": { "line": 2, "character": 10 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Cannot find name 'Component'.",
+        "code": 2304,
+        "tags": []
+    },
+    {
+        "range": { "start": { "line": 3, "character": 1 }, "end": { "line": 3, "character": 22 } },
+        "severity": 1,
+        "source": "ts",
+        "message": "Cannot find name 'SomeLongComponentName'.",
+        "code": 2304,
+        "tags": []
+    }
+]

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/undeclared-component/input.svelte

@@ -0,0 +1,4 @@
+<script lang="ts"></script>
+
+<Component />
+<SomeLongComponentName />

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts

@@ -83,9 +83,14 @@ export class InlineComponent {
             // is actually a proper Svelte component, which would lead to errors
             // when accessing things like $$prop_def. Therefore widen the type
             // here, falling back to a any-typed component to ensure the user doesn't
-            // get weird follup-errors all over the place. The diagnostic error
+            // get weird followup-errors all over the place. The diagnostic error
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
+            // The name is reversed here so that when the component is undeclared,
+            // TypeScript won't suggest the undeclared variable to be a misspelling of the generated variable
+            this._name =
+                '$$_' +
+                Array.from(sanitizePropName(this.node.name)).reverse().join('') +
+                this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-invalid-jsx-name/expectedv2.js

@@ -1,2 +1,2 @@
- { const $$_Hello0C = __sveltets_2_ensureComponent(Hello); new $$_Hello0C({ target: __sveltets_2_any(), props: { "|-wtf":`foo`,}}); Hello}
+ { const $$_olleH0C = __sveltets_2_ensureComponent(Hello); new $$_olleH0C({ target: __sveltets_2_any(), props: { "|-wtf":`foo`,}}); Hello}
  { svelteHTML.createElement("div", { "--custom-prop":`foo`,}); }

packages/svelte2tsx/test/htmlx2jsx/samples/attribute-multiline/expectedv2.js

@@ -1,7 +1,7 @@
- { const $$_Comp0C = __sveltets_2_ensureComponent(Comp); new $$_Comp0C({ target: __sveltets_2_any(), props: {  "multilineattr":`hello
+ { const $$_pmoC0C = __sveltets_2_ensureComponent(Comp); new $$_pmoC0C({ target: __sveltets_2_any(), props: {  "multilineattr":`hello
 world`,}});}
- { const $$_Comp0C = __sveltets_2_ensureComponent(Comp); new $$_Comp0C({ target: __sveltets_2_any(), props: {  "multilineattr":"he`llo\nworld",}});}
- { const $$_Comp0C = __sveltets_2_ensureComponent(Comp); new $$_Comp0C({ target: __sveltets_2_any(), props: {  "multilineattr":`
+ { const $$_pmoC0C = __sveltets_2_ensureComponent(Comp); new $$_pmoC0C({ target: __sveltets_2_any(), props: {  "multilineattr":"he`llo\nworld",}});}
+ { const $$_pmoC0C = __sveltets_2_ensureComponent(Comp); new $$_pmoC0C({ target: __sveltets_2_any(), props: {  "multilineattr":`
 color: ${color}
 display: block`,}});}
 

packages/svelte2tsx/test/htmlx2jsx/samples/component-default-slot-let-destructure/expectedv2.js

@@ -1,3 +1,3 @@
- { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,thing:{ a },} = $$_Component0.$$slot_def.default;$$_$$;
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,thing:{ a },} = $$_tnenopmoC0.$$slot_def.default;$$_$$;
      { svelteHTML.createElement("h1", {});  a ; }
  }Component}

packages/svelte2tsx/test/htmlx2jsx/samples/component-default-slot-let/expectedv2.js

@@ -1,3 +1,3 @@
- { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {   }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,name:n,thing,} = $$_Component0.$$slot_def.default;$$_$$;
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {   }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,name:n,thing,} = $$_tnenopmoC0.$$slot_def.default;$$_$$;
      { svelteHTML.createElement("h1", {}); thing; n; }
  }Component}

packages/svelte2tsx/test/htmlx2jsx/samples/component-default-slot/expectedv2.js

@@ -1,3 +1,3 @@
- { const $$_Component0C = __sveltets_2_ensureComponent(Component); new $$_Component0C({ target: __sveltets_2_any(), props: {}});
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {}});
      { svelteHTML.createElement("h1", {});  }
  Component}

packages/svelte2tsx/test/htmlx2jsx/samples/component-multi-slot/expectedv2.js

@@ -1,11 +1,11 @@
- { const $$_Component0C = __sveltets_2_ensureComponent(Component); const $$_Component0 = new $$_Component0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,var:new_var,} = $$_Component0.$$slot_def.default;$$_$$;
+ { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,var:new_var,} = $$_tnenopmoC0.$$slot_def.default;$$_$$;
      { svelteHTML.createElement("h1", {}); new_var; }
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,slotvar:newvar,} = $$_Component0.$$slot_def["someslot"];$$_$$;{ svelteHTML.createElement("div", {    });newvar;
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,slotvar:newvar,} = $$_tnenopmoC0.$$slot_def["someslot"];$$_$$;{ svelteHTML.createElement("div", {    });newvar;
          { svelteHTML.createElement("h2", {});  newvar; }
      }}
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,newvar2,} = $$_Component0.$$slot_def["slotwithoutchildren"];$$_$$;{ svelteHTML.createElement("div", {   });newvar2; }}
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hi1,hi2,hi3:hi3alias,} = $$_Component0.$$slot_def["slotwithmultiplelets"];$$_$$;{ svelteHTML.createElement("div", {     }); }}
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,} = $$_Component0.$$slot_def["desc"];$$_$$;{ svelteHTML.createElement("p", { });
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,newvar2,} = $$_tnenopmoC0.$$slot_def["slotwithoutchildren"];$$_$$;{ svelteHTML.createElement("div", {   });newvar2; }}
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,hi1,hi2,hi3:hi3alias,} = $$_tnenopmoC0.$$slot_def["slotwithmultiplelets"];$$_$$;{ svelteHTML.createElement("div", {     }); }}
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,} = $$_tnenopmoC0.$$slot_def["desc"];$$_$$;{ svelteHTML.createElement("p", { });
 
      }}
  }Component}

packages/svelte2tsx/test/htmlx2jsx/samples/component-named-slot/expectedv2.js

@@ -1,8 +1,8 @@
- { const $$_Parent0C = __sveltets_2_ensureComponent(Parent); const $$_Parent0 = new $$_Parent0C({ target: __sveltets_2_any(), props: {   }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_Parent0.$$slot_def.default;$$_$$;
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,bla,} = $$_Parent0.$$slot_def["named"];$$_$$;{ const $$_Component1C = __sveltets_2_ensureComponent(Component); new $$_Component1C({ target: __sveltets_2_any(), props: {  }});
+ { const $$_tneraP0C = __sveltets_2_ensureComponent(Parent); const $$_tneraP0 = new $$_tneraP0C({ target: __sveltets_2_any(), props: {   }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,bar:baz,} = $$_tneraP0.$$slot_def.default;$$_$$;
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,bla,} = $$_tneraP0.$$slot_def["named"];$$_$$;{ const $$_tnenopmoC1C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC1C({ target: __sveltets_2_any(), props: {  }});
         foo; baz; bla;
      }Component}
-     { const $$_Component1C = __sveltets_2_ensureComponent(Component); const $$_Component1 = new $$_Component1C({ target: __sveltets_2_any(), props: { }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,blubb,} = $$_Component1.$$slot_def.default;$$_$$;
+     { const $$_tnenopmoC1C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC1 = new $$_tnenopmoC1C({ target: __sveltets_2_any(), props: { }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,blubb,} = $$_tnenopmoC1.$$slot_def.default;$$_$$;
         blubb;
      }Component}
  }Parent}

packages/svelte2tsx/test/htmlx2jsx/samples/component-slot-infer-props/expectedv2.js

@@ -1,5 +1,5 @@
- { const $$_Parent0C = __sveltets_2_ensureComponent(Parent); const $$_Parent0 = new $$_Parent0C({ target: __sveltets_2_any(), props: {                "bare":true,shorthand,"text1":`val1`,"text2":`val2`,"text3":`a${a}b${b}`,"textEmpty":"","literal":true,"strLiteral":'foo',"complex":{a},"a-dashed-complex":{a},...__sveltets_2_cssProp({"--custom-cssprop":`foo`}),}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,} = $$_Parent0.$$slot_def.default;$$_$$;
-     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,bar,} = $$_Parent0.$$slot_def["named"];$$_$$;{ const $$_Component1C = __sveltets_2_ensureComponent(Component); new $$_Component1C({ target: __sveltets_2_any(), props: {  }});
+ { const $$_tneraP0C = __sveltets_2_ensureComponent(Parent); const $$_tneraP0 = new $$_tneraP0C({ target: __sveltets_2_any(), props: {                "bare":true,shorthand,"text1":`val1`,"text2":`val2`,"text3":`a${a}b${b}`,"textEmpty":"","literal":true,"strLiteral":'foo',"complex":{a},"a-dashed-complex":{a},...__sveltets_2_cssProp({"--custom-cssprop":`foo`}),}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,} = $$_tneraP0.$$slot_def.default;$$_$$;
+     {const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,bar,} = $$_tneraP0.$$slot_def["named"];$$_$$;{ const $$_tnenopmoC1C = __sveltets_2_ensureComponent(Component); new $$_tnenopmoC1C({ target: __sveltets_2_any(), props: {  }});
         foo; bar;
      }Component}
      { svelteHTML.createElement("div", {});