diff --git a/packages/svelte2tsx/src/htmlxtojsx/index.ts b/packages/svelte2tsx/src/htmlxtojsx/index.ts index 0b8a99dd5..2fa344bcd 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/index.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/index.ts @@ -283,7 +283,7 @@ export function convertHtmlxToJsx( } }; - const handleSlot = (slotEl: Node, componentName: string, slotName: string) => { + const handleSlot = (slotEl: Node, component: Node, slotName: string) => { //collect "let" definitions let hasMoved = false; let afterTag: number; @@ -319,7 +319,7 @@ export function convertHtmlxToJsx( str.appendLeft(afterTag, '{() => { let {'); str.appendRight( afterTag, - `} = ${getSingleSlotDef(componentName, slotName)}`+ ';<>', + `} = ${getSingleSlotDef(component, slotName)}`+ ';<>', ); const closeTagStart = htmlx.lastIndexOf('<', slotEl.end); @@ -340,7 +340,7 @@ export function convertHtmlxToJsx( } //we only need to do something if there is a let or slot - handleSlot(el, el.name, 'default'); + handleSlot(el, el, 'default'); //walk the direct children looking for slots. We do this here because we need the name of our component for handleSlot //we could lean on leave/enter, but I am lazy @@ -348,7 +348,7 @@ export function convertHtmlxToJsx( for (const child of el.children) { const slotName = getSlotName(child); if (slotName) { - handleSlot(child, el.name, slotName); + handleSlot(child, el, slotName); } } }; diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts index 4f643eb75..55856783b 100644 --- a/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts +++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/component-type.ts @@ -1,6 +1,6 @@ import { Node } from 'estree-walker'; -export function getTypeForComponent(node: Node) { +export function getTypeForComponent(node: Node): string { if (node.name === 'svelte:component' || node.name === 'svelte:self') { return '__sveltets_componentType()'; } else { diff --git a/packages/svelte2tsx/src/nodes/slot.ts b/packages/svelte2tsx/src/nodes/slot.ts index cad3420d4..b87e929de 100644 --- a/packages/svelte2tsx/src/nodes/slot.ts +++ b/packages/svelte2tsx/src/nodes/slot.ts @@ -10,6 +10,7 @@ import { } from '../utils/svelteAst'; import TemplateScope from './TemplateScope'; import { SvelteIdentifier, WithName, BaseDirective } from '../interfaces'; +import { getTypeForComponent } from '../htmlxtojsx/nodes/component-type'; function attributeStrValueAsJsExpression(attr: Node): string { if (attr.value.length == 0) return "''"; //wut? @@ -116,7 +117,7 @@ export class SlotHandler { component: Node, slotName: string, ) { - return `${getSingleSlotDef(component.name, slotName)}.${letNode.name}`; + return `${getSingleSlotDef(component, slotName)}.${letNode.name}`; } resolveLet(letNode: BaseDirective, identifierDef: WithName, component: Node, slotName: string) { @@ -258,6 +259,7 @@ export class SlotHandler { } } -export function getSingleSlotDef(componentName: string, slotName: string) { - return `__sveltets_instanceOf(${componentName}).$$slot_def['${slotName}']`; +export function getSingleSlotDef(componentNode: Node, slotName: string) { + const componentType = getTypeForComponent(componentNode); + return `__sveltets_instanceOf(${componentType}).$$slot_def['${slotName}']`; } diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx new file mode 100644 index 000000000..914d44fe8 --- /dev/null +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/expected.tsx @@ -0,0 +1,14 @@ +/// +<>;function render() { +<>{() => {if (true){<> +{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<> + +}} +}}} +{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<> + +}} +return { props: {}, slots: {'default': {prop:__sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'].prop}}, getters: {}, events: {} }} + +export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) { +} diff --git a/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte new file mode 100644 index 000000000..788704b29 --- /dev/null +++ b/packages/svelte2tsx/test/svelte2tsx/samples/uses-svelte-components-let-forward/input.svelte @@ -0,0 +1,8 @@ +{#if true} + + + +{/if} + + +