From c9c6ea78547b8614e466d6e2430406de08525b5e Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sun, 31 Jan 2021 16:52:57 +0100
Subject: [PATCH] (fix) fallback param for built-in transition/animate (#790)

Up to Svelte version 3.32.0, the built-in animate/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 animation with the same name that expects different parameters, but that possibility is far less likely.
#785
---
 .../htmlxtojsx/nodes/animation-directive.ts   | 21 +++++++++++++++++--
 .../htmlxtojsx/nodes/transition-directive.ts  | 19 ++++++++++++++++-
 .../transition-animate-fallbacks/expected.jsx | 17 +++++++++++++++
 .../transition-animate-fallbacks/input.svelte | 17 +++++++++++++++
 .../samples/transition-modifiers/expected.jsx |  2 +-
 5 files changed, 72 insertions(+), 4 deletions(-)
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/expected.jsx
 create mode 100644 packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/input.svelte

diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts
index 5703435b5..39039448b 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/animation-directive.ts
+++ b/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']);
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts
index 8c4bb59e3..c6ceec688 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/transition-directive.ts
+++ b/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']);
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/expected.jsx
new file mode 100644
index 000000000..bd7d81069
--- /dev/null
+++ b/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></>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/input.svelte b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-animate-fallbacks/input.svelte
new file mode 100644
index 000000000..d6d6e4d00
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx
index 024b31a7f..e637c7a30 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/transition-modifiers/expected.jsx
+++ b/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></>
\ No newline at end of file