(fix) sanitize component name

sveltejs#1352

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

packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx

@@ -0,0 +1,2 @@
+<><Dotted.ComponentName />
+<Dotted.ComponentName></Dotted.ComponentName></>

packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte

@@ -0,0 +1,2 @@
+<Dotted.ComponentName />
+<Dotted.ComponentName></Dotted.ComponentName>

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: {} }}

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 => {},});}