(fix) fallback param for built-in transition/animate

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

@@ -3,7 +3,7 @@ import { Node } from 'estree-walker';
 import { isQuote } from '../utils/node-utils';
 
 /**
- * animation:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx(__sveltets_ElementNode,__sveltets_AnimationMove,(yyy)))}
+ * animate:xxx(yyy)   --->   {...__sveltets_ensureAnimation(xxx(__sveltets_ElementNode,__sveltets_AnimationMove,(yyy)))}
  */
 export function handleAnimateDirective(htmlx: string, str: MagicString, attr: Node): void {
     str.overwrite(
@@ -13,7 +13,11 @@ export function handleAnimateDirective(htmlx: string, str: MagicString, attr: No
     );
 
     if (!attr.expression) {
-        str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove))}');
+        if (animationsThatNeedParam.has(attr.name)) {
+            str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove,{}))}');
+        } else {
+            str.appendLeft(attr.end, '(__sveltets_ElementNode,__sveltets_AnimationMove))}');
+        }
         return;
     }
     str.overwrite(
@@ -26,3 +30,16 @@ export function handleAnimateDirective(htmlx: string, str: MagicString, attr: No
         str.remove(attr.end - 1, attr.end);
     }
 }
+
+/**
+ * Up to Svelte version 3.32.0, the following built-in animate functions have
+ * optional parameters, but according to its typings they were mandatory.
+ * To not show unnecessary type errors to those users, `{}` should be added
+ * as a fallback parameter if the user did not provide one.
+ * It may be the case that someone has a custom animation with the same name
+ * that expects different parameters, or that someone did an import alias fly as foo,
+ * but those are very unlikely.
+ *
+ * Remove this "hack" some day.
+ */
+const animationsThatNeedParam = new Set(['flip']);

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

@@ -18,7 +18,11 @@ export function handleTransitionDirective(htmlx: string, str: MagicString, attr:
     }
 
     if (!attr.expression) {
-        str.appendLeft(attr.end, '(__sveltets_ElementNode))}');
+        if (transitionsThatNeedParam.has(attr.name)) {
+            str.appendLeft(attr.end, '(__sveltets_ElementNode,{}))}');
+        } else {
+            str.appendLeft(attr.end, '(__sveltets_ElementNode))}');
+        }
         return;
     }
 
@@ -32,3 +36,16 @@ export function handleTransitionDirective(htmlx: string, str: MagicString, attr:
         str.remove(attr.end - 1, attr.end);
     }
 }
+
+/**
+ * Up to Svelte version 3.32.0, the following built-in transition functions have
+ * optional parameters, but according to its typings they were mandatory.
+ * To not show unnecessary type errors to those users, `{}` should be added
+ * as a fallback parameter if the user did not provide one.
+ * It may be the case that someone has a custom transition with the same name
+ * that expects different parameters, or that someone did an import alias fly as foo,
+ * but those are very unlikely.
+ *
+ * Remove this "hack" some day.
+ */
+const transitionsThatNeedParam = new Set(['blur', 'fade', 'fly', 'slide', 'scale', 'draw']);

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

@@ -0,0 +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_ElementNode,{}))}>Hello</h1>
+<h1 {...__sveltets_ensureTransition(blur(__sveltets_ElementNode,{}))}>Hello</h1>
+
+<h1 {...__sveltets_ensureAnimation(flip(__sveltets_ElementNode,__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></>

packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/input.svelte

@@ -0,0 +1,17 @@
+<!-- transitions -->
+<h1 transition:blur>Hello</h1>
+<h1 transition:fade>Hello</h1>
+<h1 transition:fly>Hello</h1>
+<h1 transition:slide>Hello</h1>
+<h1 transition:scale>Hello</h1>
+<h1 transition:draw>Hello</h1>
+<!-- also for in/out transitions -->
+<h1 in:blur>Hello</h1>
+<h1 out:blur>Hello</h1>
+<!-- animate -->
+<h1 animate:flip>Hello</h1>
+<!-- not others -->
+<h1 transition:foo>Hello</h1>
+<h1 in:foo>Hello</h1>
+<h1 out:foo>Hello</h1>
+<h1 animate:foo>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_ElementNode,{}))}>
     {item}
 </div></>