fix(component-parser): dispatched event type without detail should de…

…fault to `null` (#86) * fix(component-parser): dispatched event without detail should default to `null`, not `any` * Run "yarn test:snapshot" * Run "yarn test:integration"
carbon-design-system · May 13, 2022 · 2dc1d53 · 2dc1d53
1 parent 1ce3291
commit 2dc1d53
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 94 deletions.
diff --git a/integration/carbon/COMPONENT_API.json b/integration/carbon/COMPONENT_API.json
@@ -1566,9 +1566,9 @@
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
         { "type": "forwarded", "name": "transitionend", "element": "div" },
-        { "type": "dispatched", "name": "submit" },
-        { "type": "dispatched", "name": "close" },
-        { "type": "dispatched", "name": "open" }
+        { "type": "dispatched", "name": "submit", "detail": "null" },
+        { "type": "dispatched", "name": "close", "detail": "null" },
+        { "type": "dispatched", "name": "open", "detail": "null" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
@@ -3805,7 +3805,7 @@
       ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "button" },
-        { "type": "dispatched", "name": "close" }
+        { "type": "dispatched", "name": "close", "detail": "null" }
       ],
       "typedefs": [
         {
@@ -3893,8 +3893,12 @@
           "name": "inputSearch",
           "detail": "{ action: \"search\"; textInput: string; }"
         },
-        { "type": "dispatched", "name": "focusInputSearch" },
-        { "type": "dispatched", "name": "focusOutInputSearch" }
+        { "type": "dispatched", "name": "focusInputSearch", "detail": "null" },
+        {
+          "type": "dispatched",
+          "name": "focusOutInputSearch",
+          "detail": "null"
+        }
       ],
       "typedefs": []
     },
@@ -4372,7 +4376,7 @@
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "dispatched", "name": "success" }
+        { "type": "dispatched", "name": "success", "detail": "null" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
@@ -5286,10 +5290,14 @@
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "dispatched", "name": "submit" },
-        { "type": "dispatched", "name": "click:button--secondary" },
-        { "type": "dispatched", "name": "close" },
-        { "type": "dispatched", "name": "open" }
+        { "type": "dispatched", "name": "submit", "detail": "null" },
+        {
+          "type": "dispatched",
+          "name": "click:button--secondary",
+          "detail": "null"
+        },
+        { "type": "dispatched", "name": "close", "detail": "null" },
+        { "type": "dispatched", "name": "open", "detail": "null" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div" }
@@ -7910,7 +7918,7 @@
         { "type": "forwarded", "name": "focus", "element": "input" },
         { "type": "forwarded", "name": "blur", "element": "input" },
         { "type": "forwarded", "name": "keydown", "element": "input" },
-        { "type": "dispatched", "name": "clear" }
+        { "type": "dispatched", "name": "clear", "detail": "null" }
       ],
       "typedefs": [],
       "rest_props": { "type": "InlineComponent", "name": "SearchSkeleton" }
@@ -9791,7 +9799,7 @@
         { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
         { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
-        { "type": "dispatched", "name": "close" }
+        { "type": "dispatched", "name": "close", "detail": "null" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "div | span" }

diff --git a/integration/carbon/COMPONENT_INDEX.md b/integration/carbon/COMPONENT_INDEX.md
@@ -659,16 +659,16 @@ None.
 
 ### Events
 
-| Event name    | Type       | Detail |
-| :------------ | :--------- | :----- |
-| click         | forwarded  | --     |
-| mouseover     | forwarded  | --     |
-| mouseenter    | forwarded  | --     |
-| mouseleave    | forwarded  | --     |
-| transitionend | forwarded  | --     |
-| submit        | dispatched | --     |
-| close         | dispatched | --     |
-| open          | dispatched | --     |
+| Event name    | Type       | Detail            |
+| :------------ | :--------- | :---------------- |
+| click         | forwarded  | --                |
+| mouseover     | forwarded  | --                |
+| mouseenter    | forwarded  | --                |
+| mouseleave    | forwarded  | --                |
+| transitionend | forwarded  | --                |
+| submit        | dispatched | <code>null</code> |
+| close         | dispatched | <code>null</code> |
+| open          | dispatched | <code>null</code> |
 
 ## `Content`
 
@@ -1418,10 +1418,10 @@ export interface HeaderActionSlideTransition {
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| close      | dispatched | --     |
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| click      | forwarded  | --                |
+| close      | dispatched | <code>null</code> |
 
 ## `HeaderActionLink`
 
@@ -1459,8 +1459,8 @@ None.
 | Event name          | Type       | Detail                                                |
 | :------------------ | :--------- | :---------------------------------------------------- |
 | inputSearch         | dispatched | <code>{ action: "search"; textInput: string; }</code> |
-| focusInputSearch    | dispatched | --                                                    |
-| focusOutInputSearch | dispatched | --                                                    |
+| focusInputSearch    | dispatched | <code>null</code>                                     |
+| focusOutInputSearch | dispatched | <code>null</code>                                     |
 
 ## `HeaderGlobalAction`
 
@@ -1731,13 +1731,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| success    | dispatched | --     |
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| click      | forwarded  | --                |
+| mouseover  | forwarded  | --                |
+| mouseenter | forwarded  | --                |
+| mouseleave | forwarded  | --                |
+| success    | dispatched | <code>null</code> |
 
 ## `InlineNotification`
 
@@ -2040,17 +2040,17 @@ None.
 
 ### Events
 
-| Event name              | Type       | Detail |
-| :---------------------- | :--------- | :----- |
-| keydown                 | forwarded  | --     |
-| click                   | forwarded  | --     |
-| mouseover               | forwarded  | --     |
-| mouseenter              | forwarded  | --     |
-| mouseleave              | forwarded  | --     |
-| submit                  | dispatched | --     |
-| click:button--secondary | dispatched | --     |
-| close                   | dispatched | --     |
-| open                    | dispatched | --     |
+| Event name              | Type       | Detail            |
+| :---------------------- | :--------- | :---------------- |
+| keydown                 | forwarded  | --                |
+| click                   | forwarded  | --                |
+| mouseover               | forwarded  | --                |
+| mouseenter              | forwarded  | --                |
+| mouseleave              | forwarded  | --                |
+| submit                  | dispatched | <code>null</code> |
+| click:button--secondary | dispatched | <code>null</code> |
+| close                   | dispatched | <code>null</code> |
+| open                    | dispatched | <code>null</code> |
 
 ## `ModalBody`
 
@@ -2804,18 +2804,18 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| change     | forwarded  | --     |
-| input      | forwarded  | --     |
-| focus      | forwarded  | --     |
-| blur       | forwarded  | --     |
-| keydown    | forwarded  | --     |
-| clear      | dispatched | --     |
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| click      | forwarded  | --                |
+| mouseover  | forwarded  | --                |
+| mouseenter | forwarded  | --                |
+| mouseleave | forwarded  | --                |
+| change     | forwarded  | --                |
+| input      | forwarded  | --                |
+| focus      | forwarded  | --                |
+| blur       | forwarded  | --                |
+| keydown    | forwarded  | --                |
+| clear      | dispatched | <code>null</code> |
 
 ## `SearchSkeleton`
 
@@ -3640,13 +3640,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| close      | dispatched | --     |
+| Event name | Type       | Detail            |
+| :--------- | :--------- | :---------------- |
+| click      | forwarded  | --                |
+| mouseover  | forwarded  | --                |
+| mouseenter | forwarded  | --                |
+| mouseleave | forwarded  | --                |
+| close      | dispatched | <code>null</code> |
 
 ## `TagSkeleton`
 

diff --git a/integration/carbon/types/ComposedModal/ComposedModal.svelte.d.ts b/integration/carbon/types/ComposedModal/ComposedModal.svelte.d.ts
@@ -54,9 +54,9 @@ export default class ComposedModal extends SvelteComponentTyped<
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
     transitionend: WindowEventMap["transitionend"];
-    submit: CustomEvent<any>;
-    close: CustomEvent<any>;
-    open: CustomEvent<any>;
+    submit: CustomEvent<null>;
+    close: CustomEvent<null>;
+    open: CustomEvent<null>;
   },
   { default: {} }
 > {}
diff --git a/integration/carbon/types/InlineLoading/InlineLoading.svelte.d.ts b/integration/carbon/types/InlineLoading/InlineLoading.svelte.d.ts
@@ -35,7 +35,7 @@ export default class InlineLoading extends SvelteComponentTyped<
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    success: CustomEvent<any>;
+    success: CustomEvent<null>;
   },
   {}
 > {}
diff --git a/integration/carbon/types/Modal/Modal.svelte.d.ts b/integration/carbon/types/Modal/Modal.svelte.d.ts
@@ -126,10 +126,10 @@ export default class Modal extends SvelteComponentTyped<
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    submit: CustomEvent<any>;
-    ["click:button--secondary"]: CustomEvent<any>;
-    close: CustomEvent<any>;
-    open: CustomEvent<any>;
+    submit: CustomEvent<null>;
+    ["click:button--secondary"]: CustomEvent<null>;
+    close: CustomEvent<null>;
+    open: CustomEvent<null>;
   },
   { default: {}; heading: {}; label: {} }
 > {}
diff --git a/integration/carbon/types/Search/Search.svelte.d.ts b/integration/carbon/types/Search/Search.svelte.d.ts
@@ -98,7 +98,7 @@ export default class Search extends SvelteComponentTyped<
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
     keydown: WindowEventMap["keydown"];
-    clear: CustomEvent<any>;
+    clear: CustomEvent<null>;
   },
   {}
 > {}
diff --git a/integration/carbon/types/Tag/Tag.svelte.d.ts b/integration/carbon/types/Tag/Tag.svelte.d.ts
@@ -65,7 +65,7 @@ export default class Tag extends SvelteComponentTyped<
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    close: CustomEvent<any>;
+    close: CustomEvent<null>;
   },
   { default: { props: { class: "bx--tag__label" } } }
 > {}
diff --git a/integration/carbon/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts b/integration/carbon/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts
@@ -44,6 +44,6 @@ export interface HeaderActionProps
 
 export default class HeaderAction extends SvelteComponentTyped<
   HeaderActionProps,
-  { click: WindowEventMap["click"]; close: CustomEvent<any> },
+  { click: WindowEventMap["click"]; close: CustomEvent<null> },
   { default: {}; text: {} }
 > {}
diff --git a/integration/carbon/types/UIShell/GlobalHeader/HeaderActionSearch.svelte.d.ts b/integration/carbon/types/UIShell/GlobalHeader/HeaderActionSearch.svelte.d.ts
@@ -13,8 +13,8 @@ export default class HeaderActionSearch extends SvelteComponentTyped<
   HeaderActionSearchProps,
   {
     inputSearch: CustomEvent<{ action: "search"; textInput: string }>;
-    focusInputSearch: CustomEvent<any>;
-    focusOutInputSearch: CustomEvent<any>;
+    focusInputSearch: CustomEvent<null>;
+    focusOutInputSearch: CustomEvent<null>;
   },
   {}
 > {}
diff --git a/src/ComponentParser.ts b/src/ComponentParser.ts
@@ -220,20 +220,26 @@ export default class ComponentParser {
     }
   }
 
-  private addDispatchedEvent(name?: string, detail?: string) {
+  private addDispatchedEvent({ name, detail, has_argument }: { name?: string; detail: string; has_argument: boolean }) {
     if (name === undefined) return;
+
+    /**
+     * `e.detail` should be `null` if the dispatcher
+     * is not provided a second argument and if
+     * `@event` is not specified.
+     */
+    const default_detail = !has_argument && !detail ? "null" : ComponentParser.assignValue(detail);
     if (this.events.has(name)) {
       const existing_event = this.events.get(name) as DispatchedEvent;
-
       this.events.set(name, {
         ...existing_event,
-        detail: existing_event.detail === undefined ? ComponentParser.assignValue(detail) : existing_event.detail,
+        detail: existing_event.detail === undefined ? default_detail : existing_event.detail,
       });
     } else {
       this.events.set(name, {
         type: "dispatched",
         name,
-        detail: ComponentParser.assignValue(detail),
+        detail: default_detail,
       });
     }
   }
@@ -260,7 +266,7 @@ export default class ComponentParser {
             this.addSlot(name, type);
             break;
           case "event":
-            this.addDispatchedEvent(name, type);
+            this.addDispatchedEvent({ name, detail: type, has_argument: false });
             break;
           case "typedef":
             this.typedefs.set(name, {
@@ -604,9 +610,14 @@ export default class ComponentParser {
       callees.forEach((callee) => {
         if (callee.name === dispatcher_name) {
           const event_name = callee.arguments[0]?.value;
-          const event_detail = callee.arguments[1]?.value;
+          const event_argument = callee.arguments[1];
+          const event_detail = event_argument?.value;
 
-          this.addDispatchedEvent(event_name, event_detail);
+          this.addDispatchedEvent({
+            name: event_name,
+            detail: event_detail,
+            has_argument: Boolean(event_argument),
+          });
         }
       });
     }

diff --git a/tests/snapshots/dispatched-events-typed/output.d.ts b/tests/snapshots/dispatched-events-typed/output.d.ts
@@ -5,6 +5,6 @@ export interface InputProps {}
 
 export default class Input extends SvelteComponentTyped<
   InputProps,
-  { hover: CustomEvent<{ h1: boolean }>; destroy: CustomEvent<any> },
+  { hover: CustomEvent<{ h1: boolean }>; destroy: CustomEvent<null> },
   { default: {} }
 > {}
diff --git a/tests/snapshots/dispatched-events-typed/output.json b/tests/snapshots/dispatched-events-typed/output.json
@@ -16,7 +16,8 @@
     },
     {
       "type": "dispatched",
-      "name": "destroy"
+      "name": "destroy",
+      "detail": "null"
     }
   ],
   "typedefs": []

diff --git a/tests/snapshots/dispatched-events/output.d.ts b/tests/snapshots/dispatched-events/output.d.ts
@@ -7,9 +7,9 @@ export default class Input extends SvelteComponentTyped<
   InputProps,
   {
     hover: CustomEvent<any>;
-    destroy: CustomEvent<any>;
-    ["destroy--component"]: CustomEvent<any>;
-    ["destroy:component"]: CustomEvent<any>;
+    destroy: CustomEvent<null>;
+    ["destroy--component"]: CustomEvent<null>;
+    ["destroy:component"]: CustomEvent<null>;
   },
   { default: {} }
 > {}