From 1afe1d5bb9fca92e66fc7b195f1ed53e53c6ff6f Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 2 Jul 2024 16:09:36 +0200 Subject: [PATCH] fix: no implicit children prop when using slot (#2427) Using a slot tag means we're in a legacy component, which means we shouldn't pass the children prop implicitly fixes https://github.com/sveltejs/svelte/issues/12240 --- packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts | 6 +++++- .../component-slot-forward-with-props/expected-svelte5.ts | 2 +- .../samples/component-slot-let-forward/expected-svelte5.ts | 2 +- .../uses-svelte-components-let-forward/expected-svelte5.ts | 4 ++-- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts index b8ccfac4a..989fe6347 100644 --- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts +++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/SnippetBlock.ts @@ -142,7 +142,11 @@ export function handleImplicitChildren(componentNode: BaseNode, component: Inlin continue; } } - if (child.type === 'Comment' || (child.type === 'Text' && child.data.trim() === '')) { + if ( + child.type === 'Comment' || + child.type === 'Slot' || + (child.type === 'Text' && child.data.trim() === '') + ) { continue; } if (child.type !== 'SnippetBlock') { diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts b/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts index d918a4f6d..e445b457e 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts @@ -1,7 +1,7 @@ /// ;function render() { /*Ωignore_startΩ*/;const __sveltets_createSlot = __sveltets_2_createCreateSlot();/*Ωignore_endΩ*/ -async () => { { const $$_tneraP0C = __sveltets_2_ensureComponent(Parent); const $$_tneraP0 = new $$_tneraP0C({ target: __sveltets_2_any(), props: { children:() => { return __sveltets_2_any(0); },"propA":true,propB,"propC":`val1`,"propD":`val2`,"propE":`a${a}b${b}`,}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,} = $$_tneraP0.$$slot_def.default;$$_$$; +async () => { { const $$_tneraP0C = __sveltets_2_ensureComponent(Parent); const $$_tneraP0 = new $$_tneraP0C({ target: __sveltets_2_any(), props: { "propA":true,propB,"propC":`val1`,"propD":`val2`,"propE":`a${a}b${b}`,}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,foo,} = $$_tneraP0.$$slot_def.default;$$_$$; { __sveltets_createSlot("default", { foo,});} }Parent}}; return { props: /** @type {Record} */ ({}), exports: {}, bindings: "", slots: {'default': {foo:__sveltets_2_instanceOf(Parent).$$slot_def['default'].foo}}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward/expected-svelte5.ts b/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward/expected-svelte5.ts index 53afcffe9..a222b6ad6 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward/expected-svelte5.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward/expected-svelte5.ts @@ -1,7 +1,7 @@ /// ;function render() { /*Ωignore_startΩ*/;const __sveltets_createSlot = __sveltets_2_createCreateSlot();/*Ωignore_endΩ*/ -async () => { { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: { children:() => { return __sveltets_2_any(0); },}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,name:n,thing,whatever:{ bla },} = $$_tnenopmoC0.$$slot_def.default;$$_$$; +async () => { { const $$_tnenopmoC0C = __sveltets_2_ensureComponent(Component); const $$_tnenopmoC0 = new $$_tnenopmoC0C({ target: __sveltets_2_any(), props: { }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,name:n,thing,whatever:{ bla },} = $$_tnenopmoC0.$$slot_def.default;$$_$$; { __sveltets_createSlot("default", { n,thing,bla,});} }Component}}; return { props: /** @type {Record} */ ({}), exports: {}, bindings: "", slots: {'default': {n:__sveltets_2_instanceOf(Component).$$slot_def['default'].name, thing:__sveltets_2_instanceOf(Component).$$slot_def['default'].thing, bla:(({ bla }) => bla)(__sveltets_2_instanceOf(Component).$$slot_def['default'].whatever)}}, events: {} }} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected-svelte5.ts b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected-svelte5.ts index 8c6450d9f..0fcbf31e1 100644 --- a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected-svelte5.ts +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected-svelte5.ts @@ -2,11 +2,11 @@ ;function render() { /*Ωignore_startΩ*/;const __sveltets_createSlot = __sveltets_2_createCreateSlot();/*Ωignore_endΩ*/ async () => {if(true){ - { const $$_svelteself0 = __sveltets_2_createComponentAny({ children:() => { return __sveltets_2_any(0); },});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_svelteself0.$$slot_def.default;$$_$$; + { const $$_svelteself0 = __sveltets_2_createComponentAny({ });{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_svelteself0.$$slot_def.default;$$_$$; { __sveltets_createSlot("default", { prop,});} }} } - { const $$_tnenopmoc_etlevs0C = __sveltets_2_ensureComponent(testComponent); const $$_tnenopmoc_etlevs0 = new $$_tnenopmoc_etlevs0C({ target: __sveltets_2_any(), props: { children:() => { return __sveltets_2_any(0); },}});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_tnenopmoc_etlevs0.$$slot_def.default;$$_$$; + { const $$_tnenopmoc_etlevs0C = __sveltets_2_ensureComponent(testComponent); const $$_tnenopmoc_etlevs0 = new $$_tnenopmoc_etlevs0C({ target: __sveltets_2_any(), props: { }});{const {/*Ωignore_startΩ*/$$_$$/*Ωignore_endΩ*/,prop,} = $$_tnenopmoc_etlevs0.$$slot_def.default;$$_$$; { __sveltets_createSlot("default", { prop,});} }}}; return { props: /** @type {Record} */ ({}), exports: {}, bindings: "", slots: {'default': {prop:__sveltets_2_instanceOf(__sveltets_1_componentType()).$$slot_def['default'].prop}}, events: {} }}