(fix) allow null and undefined for style and class directives (#1432)

#1423

Author: dummdidumm

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expected.json

@@ -1,23 +1,23 @@
 [
     {
         "range": {
-            "start": { "line": 14, "character": 11 },
-            "end": { "line": 14, "character": 16 }
+            "start": { "line": 16, "character": 11 },
+            "end": { "line": 16, "character": 16 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number | null | undefined'.",
         "code": 2345,
         "tags": []
     },
     {
         "range": {
-            "start": { "line": 15, "character": 18 },
-            "end": { "line": 15, "character": 23 }
+            "start": { "line": 17, "character": 18 },
+            "end": { "line": 17, "character": 23 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number | null | undefined'.",
         "code": 2345,
         "tags": []
     }

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/expectedv2.json

@@ -1,23 +1,23 @@
 [
     {
         "range": {
-            "start": { "line": 14, "character": 11 },
-            "end": { "line": 14, "character": 16 }
+            "start": { "line": 16, "character": 11 },
+            "end": { "line": 16, "character": 16 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number | null | undefined'.",
         "code": 2345,
         "tags": []
     },
     {
         "range": {
-            "start": { "line": 15, "character": 18 },
-            "end": { "line": 15, "character": 23 }
+            "start": { "line": 17, "character": 18 },
+            "end": { "line": 17, "character": 23 }
         },
         "severity": 1,
         "source": "ts",
-        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number'.",
+        "message": "Argument of type 'boolean' is not assignable to parameter of type 'String | Number | null | undefined'.",
         "code": 2345,
         "tags": []
     }

packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/style-directive/input.svelte

@@ -10,6 +10,8 @@
 <div style:right="right" />
 <div style:right={`right${right}`} />
 <div style:right=right{right} />
+<div style:undefined={undefined} />
+<div style:null={null} />
 
 <!-- error -->
 <div style:wrong />

packages/svelte2tsx/src/htmlxtojsx_v2/nodes/StyleDirective.ts

@@ -14,9 +14,10 @@ export function handleStyleDirective(
     element: Element
 ): void {
     const htmlx = str.original;
+    const ensureType = '__sveltets_2_ensureType(String, Number, ';
     if (style.value === true || style.value.length === 0) {
         element.appendToStartEnd([
-            '__sveltets_2_ensureType(String, Number, ',
+            ensureType,
             [htmlx.indexOf(':', style.start) + 1, style.end],
             ');'
         ]);
@@ -40,11 +41,7 @@ export function handleStyleDirective(
                 str.appendRight(n.start, '$');
             }
         }
-        element.appendToStartEnd([
-            '__sveltets_2_ensureType(String, Number, `',
-            [start, end],
-            '`);'
-        ]);
+        element.appendToStartEnd([ensureType + '`', [start, end], '`);']);
         return;
     }
 
@@ -53,13 +50,9 @@ export function handleStyleDirective(
         const quote = ['"', "'"].includes(str.original[styleVal.start - 1])
             ? str.original[styleVal.start - 1]
             : '"';
-        element.appendToStartEnd([
-            `__sveltets_2_ensureType(String, Number, ${quote}`,
-            [start, end],
-            `${quote});`
-        ]);
+        element.appendToStartEnd([`${ensureType}${quote}`, [start, end], `${quote});`]);
     } else {
         // MustacheTag
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
+        element.appendToStartEnd([ensureType, [start, end], ');']);
     }
 }

packages/svelte2tsx/svelte-shims.d.ts

@@ -119,8 +119,10 @@ declare function __sveltets_1_ensureAnimation(animationCall: SvelteAnimationRetu
 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): {};
+// Includes undefined and null for all types as all usages also allow these
+declare function __sveltets_1_ensureType<T>(type: AConstructorTypeOf<T>, el: T | undefined | null): {};
+declare function __sveltets_1_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2 | undefined | null): {};
+
 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,8 +255,9 @@ type __sveltets_2_SvelteTransitionConfig = {
 type __sveltets_2_SvelteTransitionReturnType = __sveltets_2_SvelteTransitionConfig | (() => __sveltets_2_SvelteTransitionConfig)
 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): {};
+// Includes undefined and null for all types as all usages also allow these
+declare function __sveltets_2_ensureType<T>(type: AConstructorTypeOf<T>, el: T | undefined | null): {};
+declare function __sveltets_2_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2 | undefined | null): {};
 
 // The following is necessary because there are two clashing errors that can't be solved at the same time
 // when using Svelte2TsxComponent, more precisely the event typings in