From ffba0ae642b27b64deb48d80634ae9c954cc6389 Mon Sep 17 00:00:00 2001
From: Simon <simon.holthausen@accso.de>
Date: Mon, 31 Jan 2022 15:14:55 +0100
Subject: [PATCH] (fix) relax style directive typings

Allow numbers, too
#1342
---
 .../fixtures/style-directive/expected.json    | 12 +++++-----
 .../fixtures/style-directive/expectedv2.json  | 12 +++++-----
 .../fixtures/style-directive/input.svelte     |  1 +
 .../src/htmlxtojsx/nodes/style-directive.ts   | 20 +++++++++-------
 .../src/htmlxtojsx_v2/nodes/StyleDirective.ts | 20 +++++++++-------
 packages/svelte2tsx/svelte-shims.d.ts         |  2 ++
 .../samples/style-directive/expected.jsx      | 24 +++++++++----------
 .../samples/style-directive/expectedv2.js     | 24 +++++++++----------
 8 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json
index 63cbd95e9..0e2475f50 100644
--- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json
@@ -1,23 +1,23 @@
 [
     {
         "range": {
-            "start": { "line": 13, "character": 11 },
-            "end": { "line": 13, "character": 16 }
+            "start": { "line": 14, "character": 11 },
+            "end": { "line": 14, "character": 16 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
         "code": 2345,
         "tags": []
     },
     {
         "range": {
-            "start": { "line": 14, "character": 18 },
-            "end": { "line": 14, "character": 23 }
+            "start": { "line": 15, "character": 18 },
+            "end": { "line": 15, "character": 23 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
         "code": 2345,
         "tags": []
     }
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json
index 63cbd95e9..0e2475f50 100644
--- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json
@@ -1,23 +1,23 @@
 [
     {
         "range": {
-            "start": { "line": 13, "character": 11 },
-            "end": { "line": 13, "character": 16 }
+            "start": { "line": 14, "character": 11 },
+            "end": { "line": 14, "character": 16 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
         "code": 2345,
         "tags": []
     },
     {
         "range": {
-            "start": { "line": 14, "character": 18 },
-            "end": { "line": 14, "character": 23 }
+            "start": { "line": 15, "character": 18 },
+            "end": { "line": 15, "character": 23 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
         "code": 2345,
         "tags": []
     }
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte
index 7467af4fb..30668173e 100644
--- a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte
@@ -6,6 +6,7 @@
 <!-- ok -->
 <div style:right />
 <div style:right={right} />
+<div style:right={12} />
 <div style:right="right" />
 <div style:right={`right${right}`} />
 <div style:right=right{right} />
diff --git a/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts b/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts
index f3850a834..e2ac5ee8f 100644
--- a/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx/nodes/style-directive.ts
@@ -3,10 +3,10 @@ import { StyleDirective } from '../../interfaces';
 import { buildTemplateString } from '../utils/node-utils';
 
 /**
- * style:xx         --->  __sveltets_1_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_1_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, Number, `a${b}`);
  */
 export function handleStyleDirective(str: MagicString, style: StyleDirective): void {
     const htmlx = str.original;
@@ -14,7 +14,7 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
         str.overwrite(
             style.start,
             htmlx.indexOf(':', style.start) + 1,
-            '{...__sveltets_1_ensureType(String, '
+            '{...__sveltets_1_ensureType(String, Number, '
         );
         str.appendLeft(style.end, ')}');
         return;
@@ -25,7 +25,7 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
             style,
             str,
             htmlx,
-            '{...__sveltets_1_ensureType(String, `',
+            '{...__sveltets_1_ensureType(String, Number, `',
             '`)}',
             style.start
         );
@@ -34,7 +34,7 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
 
     const styleVal = style.value[0];
     if (styleVal.type === 'Text') {
-        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, Number, "');
         if (styleVal.end === style.end) {
             str.appendLeft(style.end, '")}');
         } else {
@@ -42,7 +42,11 @@ export function handleStyleDirective(str: MagicString, style: StyleDirective): v
         }
     } else {
         // MustacheTag
-        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(
+            style.start,
+            styleVal.start + 1,
+            '{...__sveltets_1_ensureType(String, Number, '
+        );
         str.overwrite(styleVal.end - 1, style.end, ')}');
     }
 }
diff --git a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts
index d0e7b5f1a..67a729b85 100644
--- a/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts
+++ b/packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts
@@ -3,10 +3,10 @@ import { StyleDirective } from '../../interfaces';
 import { Element } from './Element';
 
 /**
- * style:xx         --->  __sveltets_2_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_2_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_2_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_2_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_2_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_2_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, Number, `a${b}`);
  */
 export function handleStyleDirective(
     str: MagicString,
@@ -16,7 +16,7 @@ export function handleStyleDirective(
     const htmlx = str.original;
     if (style.value === true || style.value.length === 0) {
         element.appendToStartEnd([
-            '__sveltets_2_ensureType(String, ',
+            '__sveltets_2_ensureType(String, Number, ',
             [htmlx.indexOf(':', style.start) + 1, style.end],
             ');'
         ]);
@@ -40,7 +40,11 @@ export function handleStyleDirective(
                 str.appendRight(n.start, '$');
             }
         }
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, `', [start, end], '`);']);
+        element.appendToStartEnd([
+            '__sveltets_2_ensureType(String, Number, `',
+            [start, end],
+            '`);'
+        ]);
         return;
     }
 
@@ -50,12 +54,12 @@ export function handleStyleDirective(
             ? str.original[styleVal.start - 1]
             : '"';
         element.appendToStartEnd([
-            `__sveltets_2_ensureType(String, ${quote}`,
+            `__sveltets_2_ensureType(String, Number, ${quote}`,
             [start, end],
             `${quote});`
         ]);
     } else {
         // MustacheTag
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, ', [start, end], ');']);
+        element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
     }
 }
diff --git a/packages/svelte2tsx/svelte-shims.d.ts b/packages/svelte2tsx/svelte-shims.d.ts
index 348810bb0..1ef4fcf23 100644
--- a/packages/svelte2tsx/svelte-shims.d.ts
+++ b/packages/svelte2tsx/svelte-shims.d.ts
@@ -120,6 +120,7 @@ declare function __sveltets_1_ensureAction(actionCall: SvelteActionReturnType):
 declare function __sveltets_1_ensureTransition(transitionCall: SvelteTransitionReturnType): {};
 declare function __sveltets_1_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
 declare function __sveltets_1_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
+declare function __sveltets_1_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
 declare function __sveltets_1_createEnsureSlot<Slots = Record<string, Record<string, any>>>(): <K1 extends keyof Slots, K2 extends keyof Slots[K1]>(k1: K1, k2: K2, val: Slots[K1][K2]) => Slots[K1][K2];
 declare function __sveltets_1_ensureRightProps<Props>(props: Props): {};
 declare function __sveltets_1_cssProp(prop: Record<string, any>): {};
@@ -253,6 +254,7 @@ type __sveltets_2_SvelteTransitionReturnType = __sveltets_2_SvelteTransitionConf
 declare function __sveltets_2_ensureTransition(transitionCall: __sveltets_2_SvelteTransitionReturnType): {};
 
 declare function __sveltets_2_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
+declare function __sveltets_2_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
 
 declare function __sveltets_2_ensureComponent<T extends new (args: {target: any, props?: any}) => Svelte2TsxComponent<any, any, any>>(type: T): T extends never ? Svelte2TsxComponent<any, any, any> : T;
 
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx
index f65031b3a..5a80fcc56 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expected.jsx
@@ -1,13 +1,13 @@
-<><div {...__sveltets_1_ensureType(String, shorthand)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, value)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
-<div {...__sveltets_1_ensureType(String, "string")}>Hello</div>
-<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, `string${mixed}`)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, `${mixed}string`)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, `string${mixed}string`)}>Hello</div>
-<div {...__sveltets_1_ensureType(String, `template${literal}`)}>Hello</div>
+<><div {...__sveltets_1_ensureType(String, Number, shorthand)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, value)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, "string")}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, "string")}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, `string${mixed}`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, `string${mixed}`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, `${mixed}string`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, `string${mixed}string`)}>Hello</div>
+<div {...__sveltets_1_ensureType(String, Number, `template${literal}`)}>Hello</div>
 
-<div {...__sveltets_1_ensureType(String, shorthand)} /></>
\ No newline at end of file
+<div {...__sveltets_1_ensureType(String, Number, shorthand)} /></>
\ No newline at end of file
diff --git a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js
index 7e1ee3cf9..0dbaab60e 100644
--- a/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js
+++ b/packages/svelte2tsx/test/htmlx2jsx/samples/style-directive/expectedv2.js
@@ -1,13 +1,13 @@
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, shorthand);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value);  }
-  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, value);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, " ");  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, " ");  }
-  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed`);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed`);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, `mixed; `);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, ` $mixed; `);  }
- { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, `template${literal}`);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, shorthand);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value);  }
+  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, value);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " ");  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, " ");  }
+  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed`);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `mixed; `);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, ` $mixed; `);  }
+ { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, `template${literal}`);  }
 
-  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, shorthand);}
\ No newline at end of file
+  { svelteHTML.createElement("div", { });__sveltets_2_ensureType(String, Number, shorthand);}
\ No newline at end of file