From 792bc09eee86b2090383029518dd133dac14cca9 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 10 Feb 2022 07:33:23 -0800
Subject: [PATCH] fix(ts): do not wrap @event detail in CustomEvent if it
 contains CustomEvent

---
 src/writer/writer-ts-definitions.ts       |  6 +++++-
 tests/snapshots/mixed-events/input.svelte | 19 +++++++++++++++++++
 tests/snapshots/mixed-events/output.d.ts  | 10 ++++++++++
 tests/snapshots/mixed-events/output.json  | 17 +++++++++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 tests/snapshots/mixed-events/input.svelte
 create mode 100644 tests/snapshots/mixed-events/output.d.ts
 create mode 100644 tests/snapshots/mixed-events/output.json

diff --git a/src/writer/writer-ts-definitions.ts b/src/writer/writer-ts-definitions.ts
index 90ca711..8294043 100644
--- a/src/writer/writer-ts-definitions.ts
+++ b/src/writer/writer-ts-definitions.ts
@@ -101,10 +101,14 @@ function genSlotDef(def: Pick<ComponentDocApi, "slots">) {
 }
 
 function genEventDef(def: Pick<ComponentDocApi, "events">) {
+  const createDispatchedEvent = (detail: string = ANY_TYPE) => {
+    if (/CustomEvent/.test(detail)) return detail;
+    return `CustomEvent<${detail}>`;
+  };
   return def.events
     .map((event) => {
       return `${clampKey(event.name)}: ${
-        event.type === "dispatched" ? `CustomEvent<${event.detail || ANY_TYPE}>` : `WindowEventMap["${event.name}"]`
+        event.type === "dispatched" ? createDispatchedEvent(event.detail) : `WindowEventMap["${event.name}"]`
       };`;
     })
     .join("\n");
diff --git a/tests/snapshots/mixed-events/input.svelte b/tests/snapshots/mixed-events/input.svelte
new file mode 100644
index 0000000..bf83381
--- /dev/null
+++ b/tests/snapshots/mixed-events/input.svelte
@@ -0,0 +1,19 @@
+<script>
+  /**
+   * @event {FocusEvent | number} custom-focus
+   * @event {FocusEvent | CustomEvent<FocusEvent>} blur
+   */
+  import { createEventDispatcher } from "svelte";
+
+  const dispatcher = createEventDispatcher();
+</script>
+
+<button
+  on:focus={(e) => {
+    dispatcher("custom-focus", e | 0);
+  }}
+  on:blur
+  on:blur={(e) => {
+    dispatcher("blur", e);
+  }}
+/>
diff --git a/tests/snapshots/mixed-events/output.d.ts b/tests/snapshots/mixed-events/output.d.ts
new file mode 100644
index 0000000..f215136
--- /dev/null
+++ b/tests/snapshots/mixed-events/output.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface InputProps {}
+
+export default class Input extends SvelteComponentTyped<
+  InputProps,
+  { ["custom-focus"]: CustomEvent<FocusEvent | number>; blur: FocusEvent | CustomEvent<FocusEvent> },
+  {}
+> {}
diff --git a/tests/snapshots/mixed-events/output.json b/tests/snapshots/mixed-events/output.json
new file mode 100644
index 0000000..de2e022
--- /dev/null
+++ b/tests/snapshots/mixed-events/output.json
@@ -0,0 +1,17 @@
+{
+  "props": [],
+  "slots": [],
+  "events": [
+    {
+      "type": "dispatched",
+      "name": "custom-focus",
+      "detail": "FocusEvent | number"
+    },
+    {
+      "type": "dispatched",
+      "name": "blur",
+      "detail": "FocusEvent | CustomEvent<FocusEvent>"
+    }
+  ],
+  "typedefs": []
+}
\ No newline at end of file