(fix) different action/animation/transition transformation (#767)

#754
Avoid incorrect type inference in edge cases by calling the functions directly.
Also cleaned up typings - actions/animations/transitions only have one parameter, not arbitrary ones. Therefore passing a ( and ) around the params so they are interpreted as a comma-separated command instead of two parameters if user does use:action={1,2} , because it is interpreted as action(node, (1,2)) by the Svelte compiler.

Author: dummdidumm

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

@@ -2,27 +2,27 @@ import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 
 /**
- * use:xxx   --->    {...__sveltets_ensureAction(__sveltets_mapElementTag('ParentNodeName', xxx))}
+ * use:xxx={params}   --->    {...__sveltets_ensureAction(xxx(__sveltets_mapElementTag('ParentNodeName'),(params)))}
  */
 export function handleActionDirective(
     htmlx: string,
     str: MagicString,
     attr: Node,
     parent: Node
 ): void {
-    str.overwrite(
-        attr.start,
-        attr.start + 'use:'.length,
-        `{...__sveltets_ensureAction(__sveltets_mapElementTag('${parent.name}'),`
-    );
+    str.overwrite(attr.start, attr.start + 'use:'.length, '{...__sveltets_ensureAction(');
 
     if (!attr.expression) {
-        str.appendLeft(attr.end, ')}');
+        str.appendLeft(attr.end, `(__sveltets_mapElementTag('${parent.name}')))}`);
         return;
     }
 
-    str.overwrite(attr.start + `use:${attr.name}`.length, attr.expression.start, ',');
-    str.appendLeft(attr.expression.end, ')');
+    str.overwrite(
+        attr.start + `use:${attr.name}`.length,
+        attr.expression.start,
+        `(__sveltets_mapElementTag('${parent.name}'),(`
+    );
+    str.appendLeft(attr.expression.end, ')))');
     if (htmlx[attr.end - 1] == '"') {
         str.remove(attr.end - 1, attr.end);
     }

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

@@ -2,7 +2,7 @@ import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 
 /**
- * animation:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx, yyy)}
+ * animation:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx(__sveltets_ElementNode,__sveltets_AnimationMove,(yyy)))}
  */
 export function handleAnimateDirective(htmlx: string, str: MagicString, attr: Node): void {
     str.overwrite(
@@ -12,15 +12,15 @@ export function handleAnimateDirective(htmlx: string, str: MagicString, attr: No
     );
 
     if (!attr.expression) {
-        str.appendLeft(attr.end, ', {})}');
+        str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove))}');
         return;
     }
     str.overwrite(
         htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length,
         attr.expression.start,
-        ', '
+        '(__sveltets_ElementNode,__sveltets_AnimationMove,('
     );
-    str.appendLeft(attr.expression.end, ')');
+    str.appendLeft(attr.expression.end, ')))');
     if (htmlx[attr.end - 1] == '"') {
         str.remove(attr.end - 1, attr.end);
     }

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

@@ -2,7 +2,7 @@ import MagicString from 'magic-string';
 import { Node } from 'estree-walker';
 
 /**
- * transition:xxx(yyy)   --->   {...__sveltets_ensureTransition(xxx, yyy)}
+ * transition:xxx(yyy)   --->   {...__sveltets_ensureTransition(xxx(__sveltets_ElementNode,(yyy)))}
  */
 export function handleTransitionDirective(htmlx: string, str: MagicString, attr: Node): void {
     str.overwrite(
@@ -17,16 +17,16 @@ export function handleTransitionDirective(htmlx: string, str: MagicString, attr:
     }
 
     if (!attr.expression) {
-        str.appendLeft(attr.end, ', {})}');
+        str.appendLeft(attr.end, '(__sveltets_ElementNode))}');
         return;
     }
 
     str.overwrite(
         htmlx.indexOf(':', attr.start) + 1 + `${attr.name}`.length,
         attr.expression.start,
-        ', '
+        '(__sveltets_ElementNode,('
     );
-    str.appendLeft(attr.expression.end, ')');
+    str.appendLeft(attr.expression.end, ')))');
     if (htmlx[attr.end - 1] == '"') {
         str.remove(attr.end - 1, attr.end);
     }

packages/svelte2tsx/svelte-shims.d.ts

@@ -67,8 +67,8 @@ interface Svelte2TsxComponentConstructorParameters<Props extends {}> {
 type AConstructorTypeOf<T, U extends any[] = any[]> = new (...args: U) => T;
 type SvelteComponentConstructor<T, U extends Svelte2TsxComponentConstructorParameters<any>> = new (options: U) => T;
 
-type SvelteAction<U extends any[], El extends any> = (node: El, ...args:U) => {
-	update?: (...args:U) => void,
+type SvelteActionReturnType = {
+	update?: (args: any) => void,
 	destroy?: () => void
 } | void
 
@@ -80,9 +80,9 @@ type SvelteTransitionConfig = {
     tick?: (t: number, u: number) => void
 }
 
-type SvelteTransition<U extends any[]> = (node: Element, ...args: U) => SvelteTransitionConfig | (() => SvelteTransitionConfig)
+type SvelteTransitionReturnType = SvelteTransitionConfig | (() => SvelteTransitionConfig)
 
-type SvelteAnimation<U extends any[]> = (node: Element, move: { from: DOMRect, to: DOMRect }, ...args: U) => {
+type SvelteAnimationReturnType = {
     delay?: number,
     duration?: number,
     easing?: (t: number) => number,
@@ -98,14 +98,12 @@ 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<U extends any[]>(animation: SvelteAnimation<U>, ...args: U): {};
-declare function __sveltets_ensureAction<U extends any[], El extends any>(
-    el: El,
-    action: SvelteAction<U, El>,
-    ...args: U
-): {};
-declare function __sveltets_ensureTransition<U extends any[]>(transition: SvelteTransition<U>, ...args: U): {};
+declare function __sveltets_ensureAnimation(animationCall: SvelteAnimationReturnType): {};
+declare function __sveltets_ensureAction(actionCall: SvelteActionReturnType): {};
+declare function __sveltets_ensureTransition(transitionCall: SvelteTransitionReturnType): {};
 declare function __sveltets_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
 declare function __sveltets_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
 declare function __sveltets_ctorOf<T>(type: T): AConstructorTypeOf<T>;

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

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

packages/svelte2tsx/test/htmlx2jsx/samples/action-nested/expected.jsx

@@ -1,6 +1,6 @@
-<><svg {...__sveltets_ensureAction(__sveltets_mapElementTag('svg'),svgAction)}></svg>
-<div {...__sveltets_ensureAction(__sveltets_mapElementTag('div'),divAction)}>
-  <input {...__sveltets_ensureAction(__sveltets_mapElementTag('input'),action)} />
-  <p {...__sveltets_ensureAction(__sveltets_mapElementTag('p'),pAction)}></p>
-  <unknownTag {...__sveltets_ensureAction(__sveltets_mapElementTag('unknownTag'),unknownAction)}></unknownTag>
+<><svg {...__sveltets_ensureAction(svgAction(__sveltets_mapElementTag('svg')))}></svg>
+<div {...__sveltets_ensureAction(divAction(__sveltets_mapElementTag('div')))}>
+  <input {...__sveltets_ensureAction(action(__sveltets_mapElementTag('input')))} />
+  <p {...__sveltets_ensureAction(pAction(__sveltets_mapElementTag('p')))}></p>
+  <unknownTag {...__sveltets_ensureAction(unknownAction(__sveltets_mapElementTag('unknownTag')))}></unknownTag>
 </div></>

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

@@ -1 +1 @@
-<><h1 {...__sveltets_ensureAction(__sveltets_mapElementTag('h1'),blink,500,2)}>Hello</h1></>
+<><h1 {...__sveltets_ensureAction(blink(__sveltets_mapElementTag('h1'),(500,2)))}>Hello</h1></>

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

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

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

@@ -1,2 +1,2 @@
-<><h1 {...__sveltets_ensureAnimation(blink, {y: 50, duration: 500})}>Hello</h1></>
+<><h1 {...__sveltets_ensureAnimation(blink(__sveltets_ElementNode,__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(__sveltets_mapElementTag('img'),action,thing)} />
-<img {...__sveltets_ensureTransition(fade, params)} />
+<img {...__sveltets_ensureAction(action(__sveltets_mapElementTag('img'),(thing)))} />
+<img {...__sveltets_ensureTransition(fade(__sveltets_ElementNode,(params)))} />
 <img {...__sveltets_ensureType(Boolean, !!(classthing))} />
-<img {...__sveltets_ensureAnimation(thing, params)} />
+<img {...__sveltets_ensureAnimation(thing(__sveltets_ElementNode,__sveltets_AnimationMove,(params)))} />
 <img thing={binding} /></>