diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/InlineComponent.ts
index 574223a8a..d6556b877 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
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 69f7a484f..a9f5cc236 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 @@
- { 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 000000000..1b2414d74
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx
@@ -0,0 +1,2 @@
+<>
+>
\ 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 000000000..958fecf4e
--- /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 000000000..1069d4e31
--- /dev/null
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte
@@ -0,0 +1,2 @@
+
+
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 3f4e4257a..31573a197 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 @@
- { 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 e30f18319..8b520f1b2 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 afb1afb15..334209e1e 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 => {},});}