Slot props reference block level variable (#458)

* basic await and each

* basic support for destructuring

* fix TemplateScope reference code url

* indent

* fix typos

* camelCase

* test for nest

* var shadowing

* catch block

* fix test

* test for member aceess, object key and object shorthand

* fix non object shorthand property

* support for component let:prop

* lint

* leave component scope

* more test about scope

* TemplateScope optional chaining

Co-authored-by: Simon H <[email protected]>

* null check for resolving and getOwner

* better typing for ast nodes
1. extend def from estree and add range to it
2. remove identifier without range, it seems to be an old behaviour

* (refactor) move handle scope and resolve to new file

* cleanup

Co-authored-by: Simon H <[email protected]>

Author: jasonlyu123

packages/svelte2tsx/package.json

@@ -23,6 +23,7 @@
         "@types/vfile": "^3.0.2",
         "magic-string": "^0.25.4",
         "mocha": "^6.2.2",
+        "periscopic": "^2.0.2",
         "rollup": "^1.12.0",
         "rollup-plugin-commonjs": "^10.0.0",
         "rollup-plugin-delete": "^1.1.0",

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -5,6 +5,7 @@ import { parseHtmlx } from '../htmlxparser';
 import svgAttributes from './svgattributes';
 import { getTypeForComponent } from './nodes/component-type';
 import { handleAwait } from './nodes/await-block';
+import { getSlotName } from '../utils/svelteAst';
 
 type ElementType = string;
 const oneWayBindingAttributes: Map<string, ElementType> = new Map(
@@ -344,12 +345,9 @@ export function convertHtmlxToJsx(
         //we could lean on leave/enter, but I am lazy
         if (!el.children) return;
         for (const child of el.children) {
-            if (!child.attributes) continue;
-            const slot = child.attributes.find((a) => a.name == 'slot');
-            if (slot) {
-                if (slot.value && slot.value.length) {
-                    handleSlot(child, el.name, slot.value[0].raw);
-                }
+            const slotName = getSlotName(child);
+            if (slotName) {
+                handleSlot(child, el.name, slotName);
             }
         }
     };

packages/svelte2tsx/src/interfaces.ts

@@ -1,5 +1,6 @@
 import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
+import { ArrayPattern, ObjectPattern, Identifier } from 'estree';
 import { ExportedNames } from './nodes/ExportedNames';
 import { ComponentEvents } from './nodes/ComponentEvents';
 
@@ -21,6 +22,39 @@ export interface CreateRenderFunctionPara extends InstanceScriptProcessResult {
     isTsFile: boolean;
 }
 
+export interface NodeRange {
+    start: number;
+    end: number;
+}
+
+export interface SvelteIdentifier extends Identifier, NodeRange {}
+
+export interface SvelteArrayPattern extends ArrayPattern, NodeRange {}
+
+export interface SvelteObjectPattern extends ObjectPattern, NodeRange {}
+
+export interface WithName {
+    type: string;
+    name: string;
+}
+
+export type DirectiveType =
+    | 'Action'
+    | 'Animation'
+    | 'Binding'
+    | 'Class'
+    | 'EventHandler'
+    | 'Let'
+    | 'Ref'
+    | 'Transition';
+
+export interface BaseDirective extends Node {
+    type: DirectiveType;
+    expression: null | Node;
+    name: string;
+    modifiers: string[];
+}
+
 export interface AddComponentExportPara {
     str: MagicString;
     uses$$propsOr$$restProps: boolean;

packages/svelte2tsx/src/nodes/TemplateScope.ts

@@ -0,0 +1,48 @@
+import { Node } from 'estree-walker';
+import { WithName } from '../interfaces';
+
+/**
+ * adopted from https://github.com/sveltejs/svelte/blob/master/src/compiler/compile/nodes/shared/TemplateScope.ts
+ */
+export default class TemplateScope {
+    names: Set<string>;
+    owners: Map<string, Node> = new Map();
+    inits: Map<string, WithName> = new Map();
+    parent?: TemplateScope;
+
+    constructor(parent?: TemplateScope) {
+        this.parent = parent;
+        this.names = new Set(parent ? parent.names : []);
+    }
+
+    addMany(inits: WithName[], owner: Node) {
+        inits.forEach((item) => this.add(item, owner));
+        return this;
+    }
+
+    add(init: WithName, owner: Node) {
+        const { name } = init;
+        this.names.add(name);
+        this.inits.set(name, init);
+        this.owners.set(name, owner);
+        return this;
+    }
+
+    child() {
+        const child = new TemplateScope(this);
+        return child;
+    }
+
+    getOwner(name: string): Node {
+        return this.owners.get(name) || this.parent?.getOwner(name);
+    }
+
+    getInit(name: string): WithName {
+        return this.inits.get(name) || this.parent?.getInit(name);
+    }
+
+    isLet(name: string) {
+        const owner = this.getOwner(name);
+        return owner && (owner.type === 'Element' || owner.type === 'InlineComponent');
+    }
+}

packages/svelte2tsx/src/nodes/handleScopeAndResolveForSlot.ts

@@ -0,0 +1,84 @@
+import { Node } from 'estree-walker';
+import { BaseDirective, SvelteIdentifier } from '../interfaces';
+import TemplateScope from './TemplateScope';
+import { SlotHandler } from './slot';
+import { isIdentifier, isDestructuringPatterns } from '../utils/svelteAst';
+import { extract_identifiers as extractIdentifiers } from 'periscopic';
+
+export function handleScopeAndResolveForSlot({
+    identifierDef,
+    initExpression,
+    owner,
+    slotHandler,
+    templateScope,
+}: {
+    identifierDef: Node;
+    initExpression: Node;
+    owner: Node;
+    slotHandler: SlotHandler;
+    templateScope: TemplateScope;
+}) {
+    if (isIdentifier(identifierDef)) {
+        templateScope.add(identifierDef, owner);
+
+        slotHandler.resolve(identifierDef, initExpression, templateScope);
+    }
+    if (isDestructuringPatterns(identifierDef)) {
+        // the node object is returned as-it with no mutation
+        const identifiers = extractIdentifiers(identifierDef) as SvelteIdentifier[];
+        templateScope.addMany(identifiers, owner);
+
+        slotHandler.resolveDestructuringAssignment(
+            identifierDef,
+            identifiers,
+            initExpression,
+            templateScope,
+        );
+    }
+}
+
+export function handleScopeAndResolveLetVarForSlot({
+    letNode,
+    component,
+    slotName,
+    templateScope,
+    slotHandler,
+}: {
+    letNode: BaseDirective;
+    slotName: string;
+    component: Node;
+    templateScope: TemplateScope;
+    slotHandler: SlotHandler;
+}) {
+    const { expression } = letNode;
+    // <Component let:a>
+    if (!expression) {
+        templateScope.add(letNode, component);
+        slotHandler.resolveLet(letNode, letNode, component, slotName);
+    } else {
+        if (isIdentifier(expression)) {
+            templateScope.add(expression, component);
+            slotHandler.resolveLet(letNode, expression, component, slotName);
+        }
+        const expForExtract = { ...expression };
+
+        // https://github.com/sveltejs/svelte/blob/3a37de364bfbe75202d8e9fcef9e76b9ce6faaa2/src/compiler/compile/nodes/Let.ts#L37
+        if (expression.type === 'ArrayExpression') {
+            expForExtract.type = 'ArrayPattern';
+        } else if (expression.type === 'ObjectExpression') {
+            expForExtract.type = 'ObjectPattern';
+        }
+        if (isDestructuringPatterns(expForExtract)) {
+            const identifiers = extractIdentifiers(expForExtract) as SvelteIdentifier[];
+            templateScope.addMany(identifiers, component);
+
+            slotHandler.resolveDestructuringAssignmentForLet(
+                expForExtract,
+                identifiers,
+                letNode,
+                component,
+                slotName,
+            );
+        }
+    }
+}