let for svelte:component and svelte:self (#513)

sveltejs · Sep 2, 2020 · d355c57 · d355c57
1 parent 048e467
commit d355c57
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 8 deletions.
diff --git 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,15 +340,15 @@ 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
         if (!el.children) return;
         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
@@ -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
@@ -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
@@ -0,0 +1,14 @@
+///<reference types="svelte" />
+<></>;function render() {
+<>{() => {if (true){<>
+<svelteself >{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<>
+    <slot prop={prop} />
+</>}}</svelteself>
+</>}}}
+<sveltecomponent this={testComponent} >{() => { let {prop} = __sveltets_instanceOf(__sveltets_componentType()).$$slot_def['default'];<>
+    <slot prop={prop} />
+</>}}</sveltecomponent></>
+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
@@ -0,0 +1,8 @@
+{#if true}
+<svelte:self let:prop>
+    <slot {prop} />
+</svelte:self>
+{/if}
+<svelte:component this={testComponent} let:prop>
+    <slot {prop} />
+</svelte:component>