From d595a91a7bb69831678e66738fd8c9a3031857a4 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Thu, 22 Sep 2022 15:37:29 +0200
Subject: [PATCH] (fix) silence duplicate props warning for window/body

#1652
---
 .../plugins/typescript/svelte-ast-utils.ts    | 27 +++++++++----------
 .../fixtures/element-events/expected.json     | 24 +++++++++++++++++
 .../fixtures/element-events/expectedv2.json   | 24 +++++++++++++++++
 .../fixtures/element-events/input.svelte      | 12 +++++++++
 4 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expected.json
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expectedv2.json
 create mode 100644 packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/input.svelte

diff --git a/packages/language-server/src/plugins/typescript/svelte-ast-utils.ts b/packages/language-server/src/plugins/typescript/svelte-ast-utils.ts
index b4c6c7466..d39461c6f 100644
--- a/packages/language-server/src/plugins/typescript/svelte-ast-utils.ts
+++ b/packages/language-server/src/plugins/typescript/svelte-ast-utils.ts
@@ -5,6 +5,17 @@ export interface SvelteNode {
     parent?: SvelteNode;
 }
 
+type HTMLLike = 'Element' | 'InlineComponent' | 'Body' | 'Window';
+
+function matchesOnly(type: string | undefined, only?: 'Element' | 'InlineComponent'): boolean {
+    return (
+        !only ||
+        // We hide the detail that body/window are also like elements in the context of this usage
+        (only === 'Element' && ['Element', 'Body', 'Window'].includes(type as HTMLLike)) ||
+        (only === 'InlineComponent' && type === 'InlineComponent')
+    );
+}
+
 /**
  * Returns when given node represents an HTML Attribute.
  * Example: The `class` in `<div class=".."`.
@@ -14,19 +25,7 @@ export function isAttributeName(
     node: SvelteNode | null | undefined,
     only?: 'Element' | 'InlineComponent'
 ): boolean {
-    return !!node && node.type === 'Attribute' && (!only || node.parent?.type === only);
-}
-
-/**
- * Returns when given node represents an HTML element.
- * Example: The `div` in `<div class=".."`.
- * Note: This method returns `false` for shorthands like `<div {foo}`.
- */
-export function isHTMLElement(
-    node: SvelteNode | null | undefined,
-    only?: 'Element' | 'InlineComponent'
-): boolean {
-    return !!node && node.type === 'Attribute' && (!only || node.parent?.type === only);
+    return !!node && node.type === 'Attribute' && matchesOnly(node.parent?.type, only);
 }
 
 /**
@@ -59,5 +58,5 @@ export function isEventHandler(
     node: SvelteNode | null | undefined,
     only?: 'Element' | 'InlineComponent'
 ) {
-    return !!node && node.type === 'EventHandler' && (!only || node.parent?.type === only);
+    return !!node && node.type === 'EventHandler' && matchesOnly(node.parent?.type, only);
 }
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expected.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expected.json
new file mode 100644
index 000000000..0ee3d2be9
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expected.json
@@ -0,0 +1,24 @@
+[
+    {
+        "range": {
+            "start": { "line": 10, "character": 5 },
+            "end": { "line": 10, "character": 11 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Type '{ onwat: () => string; }' is not assignable to type 'HTMLProps<HTMLDivElement>'.\n  Property 'onwat' does not exist on type 'HTMLProps<HTMLDivElement>'.",
+        "code": 2322,
+        "tags": []
+    },
+    {
+        "range": {
+            "start": { "line": 11, "character": 22 },
+            "end": { "line": 11, "character": 25 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Property 'asd' does not exist on type 'MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }'.",
+        "code": 2339,
+        "tags": []
+    }
+]
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expectedv2.json b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expectedv2.json
new file mode 100644
index 000000000..cde001c17
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/expectedv2.json
@@ -0,0 +1,24 @@
+[
+    {
+        "range": {
+            "start": { "line": 10, "character": 8 },
+            "end": { "line": 10, "character": 21 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Argument of type '{ \"on:wat\": () => string; }' is not assignable to parameter of type 'HTMLProps<\"div\", HTMLAttributes<any>>'.\n  Object literal may only specify known properties, and '\"on:wat\"' does not exist in type 'HTMLProps<\"div\", HTMLAttributes<any>>'.",
+        "code": 2345,
+        "tags": []
+    },
+    {
+        "range": {
+            "start": { "line": 11, "character": 22 },
+            "end": { "line": 11, "character": 25 }
+        },
+        "severity": 1,
+        "source": "ts",
+        "message": "Property 'asd' does not exist on type 'MouseEvent & { currentTarget: EventTarget & HTMLDivElement; }'.",
+        "code": 2339,
+        "tags": []
+    }
+]
diff --git a/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/input.svelte b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/input.svelte
new file mode 100644
index 000000000..a52761040
--- /dev/null
+++ b/packages/language-server/test/plugins/typescript/features/diagnostics/fixtures/element-events/input.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+</script>
+
+<!-- valid -->
+<div on:click={() => ''} />
+<div on:click={() => ''} on:click={() => ''} />
+<svelte:window on:click={() => ''} on:click={() => ''} />
+<svelte:body on:click={() => ''} on:click={() => ''} />
+
+<!-- invalid -->
+<div on:wat={() => ''} />
+<div on:click={e => e.asd} />