From e6b5e8d87fa645a8df20c86dcebc35f86a2c964b Mon Sep 17 00:00:00 2001 From: Simon Date: Thu, 3 Feb 2022 15:25:46 +0100 Subject: [PATCH] (fix) sanitize component name #1352 --- .../src/htmlxtojsx_v2/nodes/InlineComponent.ts | 12 +++++++----- .../binding-this-svelte-component/expectedv2.js | 2 +- .../samples/component-name-dot/expected.jsx | 2 ++ .../samples/component-name-dot/expectedv2.js | 2 ++ .../samples/component-name-dot/input.svelte | 2 ++ .../event-handler-svelte-component/expectedv2.js | 2 +- .../uses-svelte-components-let-forward/expectedv2.ts | 2 +- .../samples/uses-svelte-components/expectedv2.ts | 2 +- 8 files changed, 17 insertions(+), 9 deletions(-) create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expected.jsx create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/expectedv2.js create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/component-name-dot/input.svelte 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 => {},});}