(fix) infer element type for directives

packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts

@@ -265,4 +265,50 @@ describe('DiagnosticsProvider', () => {
 
         assert.deepStrictEqual(diagnostics, []);
     });
+
+    it('type-checks actions/transitions/animations', async () => {
+        const { plugin, document } = setup('diagnostics-directive-types.svelte');
+        const diagnostics = await plugin.getDiagnostics(document);
+
+        assert.deepStrictEqual(diagnostics, [
+            {
+                code: 2345,
+                message:
+                    "Argument of type 'HTMLDivElement' is not assignable to parameter of type 'SVGElement & { getTotalLength(): number; }'.\n  " +
+                    "Type 'HTMLDivElement' is missing the following properties from type 'SVGElement': ownerSVGElement, viewportElement, correspondingElement, correspondingUseElement",
+                range: {
+                    end: {
+                        character: 19,
+                        line: 9
+                    },
+                    start: {
+                        character: 19,
+                        line: 9
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            },
+            {
+                code: 2345,
+                message:
+                    "Argument of type 'HTMLParagraphElement' is not assignable to parameter of type 'HTMLInputElement'.\n  " +
+                    "Type 'HTMLParagraphElement' is missing the following properties from type 'HTMLInputElement': accept, alt, autocomplete, checked, and 48 more.",
+                range: {
+                    end: {
+                        character: 12,
+                        line: 14
+                    },
+                    start: {
+                        character: 12,
+                        line: 14
+                    }
+                },
+                severity: 1,
+                source: 'ts',
+                tags: []
+            }
+        ]);
+    });
 });

packages/language-server/test/plugins/typescript/testfiles/diagnostics-directive-types.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { draw } from 'svelte/transition';
+  import { flip } from 'svelte/animate';
+
+  function action(node: HTMLInputElement) {
+      node;
+  }
+</script>
+
+<div transition:draw></div>
+<path transition:draw></path>
+
+<p animate:flip></p>
+
+<p use:action></p>
+<input use:action />

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -90,10 +90,10 @@ export function convertHtmlxToJsx(
                         handleActionDirective(htmlx, str, node, parent);
                         break;
                     case 'Transition':
-                        handleTransitionDirective(htmlx, str, node);
+                        handleTransitionDirective(htmlx, str, node, parent);
                         break;
                     case 'Animation':
-                        handleAnimateDirective(htmlx, str, node);
+                        handleAnimateDirective(htmlx, str, node, parent);
                         break;
                     case 'Attribute':
                         handleAttribute(htmlx, str, node, parent);

packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts

@@ -3,27 +3,34 @@ import { Node } from 'estree-walker';
 import { isQuote } from '../utils/node-utils';
 
 /**
- * animate:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx(__sveltets_ElementNode,__sveltets_AnimationMove,(yyy)))}
+ * animate:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx(__sveltets_mapElementTag('..'),__sveltets_AnimationMove,(yyy)))}
  */
-export function handleAnimateDirective(htmlx: string, str: MagicString, attr: Node): void {
+export function handleAnimateDirective(
+    htmlx: string,
+    str: MagicString,
+    attr: Node,
+    parent: Node
+): void {
     str.overwrite(
         attr.start,
         htmlx.indexOf(':', attr.start) + 1,
         '{...__sveltets_ensureAnimation('
     );
 
+    const nodeType = `__sveltets_mapElementTag('${parent.name}')`;
+
     if (!attr.expression) {
         if (animationsThatNeedParam.has(attr.name)) {
-            str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove,{}))}');
+            str.appendLeft(attr.end, `(${nodeType},__sveltets_AnimationMove,{}))}`);
         } else {
-            str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove))}');
+            str.appendLeft(attr.end, `(${nodeType},__sveltets_AnimationMove))}`);
         }
         return;
     }
     str.overwrite(
         htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length,
         attr.expression.start,
-        '(__sveltets_ElementNode,__sveltets_AnimationMove,('
+        `(${nodeType},__sveltets_AnimationMove,(`
     );
     str.appendLeft(attr.expression.end, ')))');
     if (isQuote(htmlx[attr.end - 1])) {

packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts

@@ -3,9 +3,14 @@ import { Node } from 'estree-walker';
 import { isQuote } from '../utils/node-utils';
 
 /**
- * transition:xxx(yyy)   --->   {...__sveltets_ensureTransition(xxx(__sveltets_ElementNode,(yyy)))}
+ * transition:xxx(yyy)   --->   {...__sveltets_ensureTransition(xxx(__sveltets_mapElementTag('..'),(yyy)))}
  */
-export function handleTransitionDirective(htmlx: string, str: MagicString, attr: Node): void {
+export function handleTransitionDirective(
+    htmlx: string,
+    str: MagicString,
+    attr: Node,
+    parent: Node
+): void {
     str.overwrite(
         attr.start,
         htmlx.indexOf(':', attr.start) + 1,
@@ -17,19 +22,21 @@ export function handleTransitionDirective(htmlx: string, str: MagicString, attr:
         str.remove(local, attr.expression ? attr.expression.start : attr.end);
     }
 
+    const nodeType = `__sveltets_mapElementTag('${parent.name}')`;
+
     if (!attr.expression) {
         if (transitionsThatNeedParam.has(attr.name)) {
-            str.appendLeft(attr.end, '(__sveltets_ElementNode,{}))}');
+            str.appendLeft(attr.end, `(${nodeType},{}))}`);
         } else {
-            str.appendLeft(attr.end, '(__sveltets_ElementNode))}');
+            str.appendLeft(attr.end, `(${nodeType}))}`);
         }
         return;
     }
 
     str.overwrite(
         htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length,
         attr.expression.start,
-        '(__sveltets_ElementNode,('
+        `(${nodeType},(`
     );
     str.appendLeft(attr.expression.end, ')))');
     if (isQuote(htmlx[attr.end - 1])) {

packages/svelte2tsx/svelte-shims.d.ts

@@ -98,7 +98,6 @@ type SvelteStore<T> = { subscribe: (run: (value: T) => any, invalidate?: any) =>
 
 
 declare var process: NodeJS.Process & { browser: boolean }
-declare var __sveltets_ElementNode: Element
 declare var __sveltets_AnimationMove: { from: DOMRect, to: DOMRect }
 
 declare function __sveltets_ensureAnimation(animationCall: SvelteAnimationReturnType): {};

packages/svelte2tsx/test/htmlx2jsx/samples/animation-bare/expected.jsx

@@ -1 +1 @@
-<><h1 {...__sveltets_ensureAnimation(blink(__sveltets_ElementNode,__sveltets_AnimationMove))}>Hello</h1></>
+<><h1 {...__sveltets_ensureAnimation(blink(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove))}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/animation-params/expected.jsx

@@ -1,4 +1,4 @@
-<><h1 {...__sveltets_ensureAnimation(blink(__sveltets_ElementNode,__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureAnimation(blink(__sveltets_ElementNode,__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureAnimation(blink(__sveltets_ElementNode,__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1></>
+<><h1 {...__sveltets_ensureAnimation(blink(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureAnimation(blink(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureAnimation(blink(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove,({y: 50, duration: 500})))}>Hello</h1></>
 

packages/svelte2tsx/test/htmlx2jsx/samples/directive-quoted/expected.jsx

@@ -1,7 +1,7 @@
 <><h1 onclick={()=>console.log("click")}>Hello</h1>
 <Component />{__sveltets_instanceOf(Component).$on('click', test)}
 <img {...__sveltets_ensureAction(action(__sveltets_mapElementTag('img'),(thing)))} />
-<img {...__sveltets_ensureTransition(fade(__sveltets_ElementNode,(params)))} />
+<img {...__sveltets_ensureTransition(fade(__sveltets_mapElementTag('img'),(params)))} />
 <img {...__sveltets_ensureType(Boolean, !!(classthing))} />
-<img {...__sveltets_ensureAnimation(thing(__sveltets_ElementNode,__sveltets_AnimationMove,(params)))} />
+<img {...__sveltets_ensureAnimation(thing(__sveltets_mapElementTag('img'),__sveltets_AnimationMove,(params)))} />
 <img thing={binding} /></>

packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/expected.jsx

@@ -1,17 +1,17 @@
 <>
-<h1 {...__sveltets_ensureTransition(blur(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(fade(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(fly(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(slide(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(scale(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(draw(__sveltets_ElementNode,{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blur(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(fade(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(fly(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(slide(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(scale(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(draw(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
 
-<h1 {...__sveltets_ensureTransition(blur(__sveltets_ElementNode,{}))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blur(__sveltets_ElementNode,{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blur(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blur(__sveltets_mapElementTag('h1'),{}))}>Hello</h1>
 
-<h1 {...__sveltets_ensureAnimation(flip(__sveltets_ElementNode,__sveltets_AnimationMove,{}))}>Hello</h1>
+<h1 {...__sveltets_ensureAnimation(flip(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove,{}))}>Hello</h1>
 
-<h1 {...__sveltets_ensureTransition(foo(__sveltets_ElementNode))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(foo(__sveltets_ElementNode))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(foo(__sveltets_ElementNode))}>Hello</h1>
-<h1 {...__sveltets_ensureAnimation(foo(__sveltets_ElementNode,__sveltets_AnimationMove))}>Hello</h1></>
+<h1 {...__sveltets_ensureTransition(foo(__sveltets_mapElementTag('h1')))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(foo(__sveltets_mapElementTag('h1')))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(foo(__sveltets_mapElementTag('h1')))}>Hello</h1>
+<h1 {...__sveltets_ensureAnimation(foo(__sveltets_mapElementTag('h1'),__sveltets_AnimationMove))}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/transition-bare/expected.jsx

@@ -1,3 +1,3 @@
-<><h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode))}>Hello</h1></>
+<><h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1')))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1')))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1')))}>Hello</h1></>

packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx

@@ -1,3 +1,3 @@
-<><div {...__sveltets_ensureTransition(slide(__sveltets_ElementNode,{}))}>
+<><div {...__sveltets_ensureTransition(slide(__sveltets_mapElementTag('div'),{}))}>
     {item}
 </div></>

packages/svelte2tsx/test/htmlx2jsx/samples/transition-params/expected.jsx

@@ -1,5 +1,5 @@
-<><h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode,({y: 50, duration: 500})))}>Hello</h1>
-<h1 {...__sveltets_ensureTransition(blink(__sveltets_ElementNode,({y: 50, duration: 500})))}>Hello</h1></>
+<><h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1'),({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1'),({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1'),({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1'),({y: 50, duration: 500})))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blink(__sveltets_mapElementTag('h1'),({y: 50, duration: 500})))}>Hello</h1></>