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 sveltejs/svelte#12240
sveltejs · Jul 2, 2024 · 1afe1d5 · 1afe1d5
1 parent 04e213d
commit 1afe1d5
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 5 deletions.
diff --git 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/.../svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts b/.../svelte2tsx/test/svelte2tsx/samples/component-slot-forward-with-props/expected-svelte5.ts
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;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<string, never>} */ ({}), 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
@@ -1,7 +1,7 @@
 ///<reference types="svelte" />
 ;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<string, never>} */ ({}), 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/...svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected-svelte5.ts b/...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<string, never>} */ ({}), exports: {}, bindings: "", slots: {'default': {prop:__sveltets_2_instanceOf(__sveltets_1_componentType()).$$slot_def['default'].prop}}, events: {} }}