Repository: sveltejs/language-tools
Pull request #1366 (2022-02-03 14:27:52)

(fix) sanitize component name
#1352


Patch:
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts
index 574223a8..d6556b87 100644
--- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts
@@ -1,7 +1,12 @@
 import MagicString from 'magic-string';
 import { BaseNode } from '../../interfaces';
 import { surroundWithIgnoreComments } from '../../utils/ignore';
-import { surroundWith, transform, TransformationArray } from '../utils/node-utils';
+import {
+    sanitizePropName,
+    surroundWith,
+    transform,
+    TransformationArray
+} from '../utils/node-utils';
 
 /**
  * Handles Svelte components as well as svelte:self and svelte:component
@@ -80,10 +85,7 @@ export class InlineComponent {
             // 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
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name =
-                '$$_' +
-                (isSvelteComponentTag ? 'sveltecomponent' : this.node.name) +
-                this.computeDepth();
+            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start


Test patch:
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-component/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-component/expectedv2.js
index 69f7a484..a9f5cc23 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-component/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/binding-this-svelte-component/expectedv2.js
@@ -1,1 +1,1 @@
- { const $$_sveltecomponent0C = __sveltets_2_ensureComponent(A); const $$_sveltecomponent0 = new $$_sveltecomponent0C({ target: __sveltets_2_any(), props: {   }});element = $$_sveltecomponent0;}
\ No newline at end of file
+ { const $$_svelte_component0C = __sveltets_2_ensureComponent(A); const $$_svelte_component0 = new $$_svelte_component0C({ target: __sveltets_2_any(), props: {   }});element = $$_svelte_component0;}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx
new file mode 100644
index 00000000..1b2414d7
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx
@@ -0,0 +1,2 @@
+<><Dotted.ComponentName />
+<Dotted.ComponentName></Dotted.ComponentName></>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expectedv2.js
new file mode 100644
index 00000000..958fecf4
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expectedv2.js
@@ -0,0 +1,2 @@
+ { const $$_Dotted_ComponentName0C = __sveltets_2_ensureComponent(Dotted.ComponentName); new $$_Dotted_ComponentName0C({ target: __sveltets_2_any(), props: {}});}
+ { const $$_Dotted_ComponentName0C = __sveltets_2_ensureComponent(Dotted.ComponentName); new $$_Dotted_ComponentName0C({ target: __sveltets_2_any(), props: {}}); Dotted.ComponentName}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte
new file mode 100644
index 00000000..1069d4e3
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte
@@ -0,0 +1,2 @@
+<Dotted.ComponentName />
+<Dotted.ComponentName></Dotted.ComponentName>
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expectedv2.js
index 3f4e4257..31573a19 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/event-handler-svelte-component/expectedv2.js
@@ -1,1 +1,1 @@
- { const $$_sveltecomponent0C = __sveltets_2_ensureComponent(Whatever); const $$_sveltecomponent0 = new $$_sveltecomponent0C({ target: __sveltets_2_any(), props: {    }});$$_sveltecomponent0.$on("submit", handleSubmit);}
\ No newline at end of file
+ { const $$_svelte_component0C = __sveltets_2_ensureComponent(Whatever); const $$_svelte_component0 = new $$_svelte_component0C({ target: __sveltets_2_any(), props: {    }});$$_svelte_component0.$on("submit", handleSubmit);}
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expectedv2.ts
index e30f1831..8b520f1b 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expectedv2.ts
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expectedv2.ts
@@ -6,7 +6,7 @@ async () => {if(true){
      { __sveltets_createSlot("default", {  prop,});}
  }}
 }
- { const $$_sveltecomponent0C = __sveltets_2_ensureComponent(testComponent); const $$_sveltecomponent0 = new $$_sveltecomponent0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_sveltecomponent0.$$slot_def.default;$$_$$;
+ { const $$_svelte_component0C = __sveltets_2_ensureComponent(testComponent); const $$_svelte_component0 = new $$_svelte_component0C({ target: __sveltets_2_any(), props: {  }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_svelte_component0.$$slot_def.default;$$_$$;
      { __sveltets_createSlot("default", {  prop,});}
  }}};
 return { props: {}, slots: {'default': {prop:__sveltets_1_instanceOf(__sveltets_1_componentType()).$$slot_def['default'].prop}}, getters: {}, events: {} }}
diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts
index afb1afb1..334209e1 100644
--- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts
+++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components/expectedv2.ts
@@ -3,7 +3,7 @@
 async () => {if(true){
  { __sveltets_2_createComponentAny({  "prop1":1,});}
 }
- { const $$_sveltecomponent0C = __sveltets_2_ensureComponent(testComponent); new $$_sveltecomponent0C({ target: __sveltets_2_any(), props: {   "propa":5,}});
+ { const $$_svelte_component0C = __sveltets_2_ensureComponent(testComponent); new $$_svelte_component0C({ target: __sveltets_2_any(), props: {   "propa":5,}});
      { svelteHTML.createElement("h1", {});  }
  }
  { svelteHTML.createElement("sveltewindow", {   "onclick":e => {},});}