refactor(ts): use Marko.HTML instead of Marko.Input when possible

eBay · Jan 23, 2025 · c2b5b9d · c2b5b9d
1 parent b0b9786
commit c2b5b9d
Show file tree

Hide file tree

Showing 76 changed files with 136 additions and 133 deletions.
diff --git a/.changeset/healthy-ducks-sip.md b/.changeset/healthy-ducks-sip.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+Refactor to simplify types
diff --git a/src/common/menu-utils/index.ts b/src/common/menu-utils/index.ts
@@ -1,4 +1,4 @@
-export interface MenuItem extends Omit<Marko.Input<"button">, `on${string}`> {
+export interface MenuItem extends Omit<Marko.HTML.Button, `on${string}`> {
     href?: string;
     value?: string;
     renderBody?: Marko.Body;

diff --git a/src/components/components/ebay-dialog-base/component.ts b/src/components/components/ebay-dialog-base/component.ts
@@ -6,7 +6,7 @@ import * as eventUtils from "../../../common/event-utils";
 import transition from "../../../common/transition";
 import type { WithNormalizedProps } from "../../../global";
 
-interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
+interface DialogBaseInput extends Omit<Marko.HTML.Div, `on${string}`> {
     "button-position"?: "right" | "left" | "bottom" | "hidden";
     "use-hidden-property"?: boolean;
     "base-el"?: string;
@@ -43,7 +43,7 @@ interface DialogBaseInput extends Omit<Marko.Input<"div">, `on${string}`> {
     "transition-el"?: "root" | "window";
     focus?: string;
     "prev-button"?: Marko.AttrTag<
-        Omit<Marko.Input<"button">, `on${string}`> &
+        Omit<Marko.HTML.Button, `on${string}`> &
             WithNormalizedProps<{
                 "a11y-text"?: AttrString;
             }>

diff --git a/src/components/components/ebay-notice-base/component.ts b/src/components/components/ebay-notice-base/component.ts
@@ -2,7 +2,7 @@ import type { AttrString, AttrClass } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../../global";
 
 interface NoticeBaseInput
-    extends Omit<Marko.Input<"section">, "title" | `on${string}`> {
+    extends Omit<Marko.HTML.Section, "title" | `on${string}`> {
     status?:
         | "confirmation"
         | "celebration"
@@ -23,12 +23,12 @@ interface NoticeBaseInput
     footer?: Marko.AttrTag<Marko.Renderable>;
     "a11y-dismiss-text"?: AttrString;
     title?: Marko.AttrTag<
-        Marko.Input<"title"> & {
+        Marko.HTML.Title & {
             as?: Marko.Renderable;
         }
     >;
     cta?: Marko.AttrTag<
-        Marko.Input<"a"> & {
+        Marko.HTML.A & {
             renderBody?: Marko.Renderable;
         }
     >;

diff --git a/src/components/components/ebay-tooltip-overlay/component-browser.ts b/src/components/components/ebay-tooltip-overlay/component-browser.ts
@@ -7,13 +7,13 @@ interface TooltipOverlayInput {
     "style-left"?: string;
     "style-right"?: string;
     "style-bottom"?: string;
-    heading?: Marko.Input<"span"> & {
+    heading?: Marko.HTML.Span & {
         as?: keyof Marko.NativeTags;
         renderBody?: Marko.Body;
     } & Iterable<any>;
     id?: string;
     type: keyof typeof typeRoles;
-    content?: Marko.AttrTag<Marko.Input<"span">>;
+    content?: Marko.AttrTag<Marko.HTML.Span>;
     "a11y-close-text"?: AttrString;
     footer?: Marko.AttrTag<
         Marko.Renderable & {

diff --git a/src/components/ebay-area-chart/component.ts b/src/components/ebay-area-chart/component.ts
@@ -27,7 +27,7 @@ declare module "highcharts" {
     }
 }
 
-interface AreaChartInput extends Omit<Marko.Input<"div">, `on${string}`> {
+interface AreaChartInput extends Omit<Marko.HTML.Div, `on${string}`> {
     title?: Highcharts.TitleOptions["text"];
     description?: Highcharts.SeriesAccessibilityOptionsObject["description"];
     series: Highcharts.SeriesAreaOptions | Highcharts.SeriesAreaOptions[];

diff --git a/src/components/ebay-avatar/index.marko b/src/components/ebay-avatar/index.marko
@@ -5,12 +5,12 @@ import type { AttrString } from "marko/tags-html";
 
 static type Size = 32 | 40 | 48 | 56 | 64 | 96 | 128;
 
-static interface AvatarInput extends Omit<Marko.Input<"div">, `on${string}`> {
+static interface AvatarInput extends Omit<Marko.HTML.Div, `on${string}`> {
     username?: string;
     color?: string;
     "a11y-text"?: AttrString;
     size?: Size | `${Size}`;
-    img?: Marko.AttrTag<Omit<Marko.Input<"img">, `on${string}`>>;
+    img?: Marko.AttrTag<Omit<Marko.HTML.Img, `on${string}`>>;
 }
 
 export interface Input extends WithNormalizedProps<AvatarInput> {}

diff --git a/src/components/ebay-badge/index.marko b/src/components/ebay-badge/index.marko
@@ -2,7 +2,7 @@ import { processHtmlAttributes } from "../../common/html-attributes";
 import type { AttrClass } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 
-static interface BadgeInput extends Marko.Input<"span"> {
+static interface BadgeInput extends Omit<Marko.HTML.Span, `on${string}`> {
     type?: "menu" | "icon";
     number?: number | string;
     class?: AttrClass;

diff --git a/src/components/ebay-bar-chart/component.ts b/src/components/ebay-bar-chart/component.ts
@@ -29,8 +29,7 @@ interface SeriesItem
     group?: string;
 }
 
-interface BarChartInput
-    extends Omit<Marko.Input<"div">, `on${string}` | "title"> {
+interface BarChartInput extends Omit<Marko.HTML.Div, `on${string}` | "title"> {
     title: Highcharts.TitleOptions["text"];
     description?: Highcharts.SeriesOptionsType["description"];
     "x-axis-label-format"?: Highcharts.XAxisLabelsOptions["format"];

diff --git a/src/components/ebay-breadcrumbs/component.ts b/src/components/ebay-breadcrumbs/component.ts
@@ -4,14 +4,12 @@ import type { AttrClass, AttrString } from "marko/tags-html";
 import type { MenuEvent } from "../ebay-menu/component";
 import type { WithNormalizedProps } from "../../global";
 
-interface BreadcrumbsInput extends Omit<Marko.Input<"nav">, `on${string}`> {
+interface BreadcrumbsInput extends Omit<Marko.HTML.Nav, `on${string}`> {
     "a11y-heading-tag"?: keyof Marko.NativeTags;
     "a11y-heading-text"?: AttrString;
     "a11y-menu-button-text"?: AttrString;
     class?: AttrClass;
-    items?: Marko.AttrTag<
-        Marko.Input<"a"> | (Marko.Input<"button"> & { href: never })
-    >;
+    items?: Marko.AttrTag<Marko.HTML.A | (Marko.HTML.Button & { href: never })>;
     "on-select"?: (event: { originalEvent: Event; el: HTMLElement }) => void;
 }
 

diff --git a/src/components/ebay-breadcrumbs/index.marko b/src/components/ebay-breadcrumbs/index.marko
@@ -38,7 +38,7 @@ $ var anyHref = (items || []).some((element) => element.href != null);
                     >
                         <for|i| of=state.hiddenIndex>
                             <@item
-                                type=(anyHref ? 'a' : 'button') as (Marko.Input<"button">["type"])
+                                type=(anyHref ? 'a' : 'button') as (Marko.HTML.Button["type"])
                                 ...processHtmlAttributes(items[i])
                             >
                                 <${items[i].renderBody}/>

diff --git a/src/components/ebay-button/index.marko b/src/components/ebay-button/index.marko
@@ -10,7 +10,7 @@ export interface ButtonEvent<T extends Event> {
     originalEvent: T;
 }
 
-export interface ButtonInput extends Omit<Marko.Input<"button">, `on${string}`> {
+export interface ButtonInput extends Omit<Marko.HTML.Button, `on${string}`> {
     href?: string;
     size?: (typeof validSizes)[number];
     priority?: "primary" | "secondary" | "tertiary" | "none";

diff --git a/src/components/ebay-carousel/component.ts b/src/components/ebay-carousel/component.ts
@@ -14,7 +14,7 @@ const LEFT = -1;
 const RIGHT = 1;
 
 interface Item {
-    htmlAttributes?: Marko.Input<"li">;
+    htmlAttributes?: Marko.HTML.LI;
     key?: string;
     class?: AttrClass;
     style?: AttrStyle;

diff --git a/src/components/ebay-ccd/index.marko b/src/components/ebay-ccd/index.marko
@@ -1,6 +1,6 @@
 import { processHtmlAttributes } from "../../common/html-attributes";
 import type { WithNormalizedProps } from "../../global";
-static interface CCDInput extends Omit<Marko.Input<"div">, `on${string}`> {
+static interface CCDInput extends Omit<Marko.HTML.Div, `on${string}`> {
     max?: string;
     min?: string;
     "charger-icon"?: "included" | "not-included";

diff --git a/src/components/ebay-character-count/component.ts b/src/components/ebay-character-count/component.ts
@@ -6,7 +6,7 @@ export interface CharacterCountEvent {
     inputAriaLive: Marko.AriaAttributes["aria-live"];
 }
 
-interface CharacterCountInput extends Omit<Marko.Input<"span">, `on${string}`> {
+interface CharacterCountInput extends Omit<Marko.HTML.Span, `on${string}`> {
     renderBody?: Marko.Body;
     value?: string | number;
     max: number;

diff --git a/src/components/ebay-checkbox/component-browser.ts b/src/components/ebay-checkbox/component-browser.ts
@@ -5,7 +5,7 @@ export interface CheckboxEvent {
     value: string;
     checked: boolean;
 }
-interface CheckboxInput extends Omit<Marko.Input<"input">, `on${string}`> {
+interface CheckboxInput extends Omit<Marko.HTML.Input, `on${string}`> {
     "icon-style"?: "rounded" | "square";
     "on-change"?: (e: CheckboxEvent) => void;
     "on-focus"?: (e: CheckboxEvent) => void;

diff --git a/src/components/ebay-chip/index.marko b/src/components/ebay-chip/index.marko
@@ -2,7 +2,7 @@ import { processHtmlAttributes } from "../../common/html-attributes";
 import type { WithNormalizedProps } from "../../global";
 import type { AttrBoolean, AttrString } from "marko/tags-html";
 
-static interface ChipInput extends Omit<Marko.Input<"span">, `on${string}`> {
+static interface ChipInput extends Omit<Marko.HTML.Span, `on${string}`> {
     renderBody?: Marko.Body;
     disabled?: AttrBoolean;
     "a11y-delete-button-text"?: AttrString;

diff --git a/src/components/ebay-chips-combobox/component.ts b/src/components/ebay-chips-combobox/component.ts
@@ -6,7 +6,7 @@ export interface ChipsComboboxEvent {
     selected: string[];
 }
 
-interface ChipsComboboxInput extends Omit<Marko.Input<"input">, `on${string}`> {
+interface ChipsComboboxInput extends Omit<Marko.HTML.Input, `on${string}`> {
     expanded?: boolean;
     fluid?: boolean;
     error?: boolean;

diff --git a/src/components/ebay-combobox/component.ts b/src/components/ebay-combobox/component.ts
@@ -20,15 +20,15 @@ export interface ComboboxEvent {
     options: Input["options"];
 }
 
-interface ComboboxInput extends Omit<Marko.Input<"input">, `on${string}`> {
+interface ComboboxInput extends Omit<Marko.HTML.Input, `on${string}`> {
     expanded?: boolean;
     borderless?: boolean;
     fluid?: boolean;
     autocomplete?: "list" | "none";
     "list-selection"?: "manual" | "automatic";
     "floating-label"?: AttrString;
     "view-all-options"?: boolean;
-    button?: Marko.Input<"button"> &
+    button?: Marko.HTML.Button &
         Marko.AttrTag<{
             htmlAttributes?: Record<string, unknown>;
             renderBody?: Marko.Body;

diff --git a/src/components/ebay-cta-button/index.marko b/src/components/ebay-cta-button/index.marko
@@ -1,7 +1,7 @@
 import { processHtmlAttributes } from "../../common/html-attributes"
 import type { WithNormalizedProps } from "../../global";
 
-static interface CtaButtonInput extends Marko.Input<"a"> {
+static interface CtaButtonInput extends Marko.HTML.A {
     size?: "default" | "large";
 }
 

diff --git a/src/components/ebay-details/component-browser.ts b/src/components/ebay-details/component-browser.ts
@@ -1,7 +1,6 @@
 import type { WithNormalizedProps } from "../../global";
 
-export interface DetailsInput
-    extends Omit<Marko.Input<"details">, `on${string}`> {
+export interface DetailsInput extends Omit<Marko.HTML.Details, `on${string}`> {
     text: string;
     size?: "regular" | "small";
     alignment?: "regular" | "center";

diff --git a/src/components/ebay-donut-chart/component.ts b/src/components/ebay-donut-chart/component.ts
@@ -17,7 +17,7 @@ interface SeriesDonutOptions extends Omit<Highcharts.SeriesOptions, "type"> {
 }
 
 interface DonutChartInput
-    extends Omit<Marko.Input<"div">, `on${string}` | "title"> {
+    extends Omit<Marko.HTML.Div, `on${string}` | "title"> {
     title?: Marko.AttrTag<Marko.Renderable>;
     metricValue?: Marko.AttrTag<Marko.Renderable>;
     metricLabel?: Marko.AttrTag<Marko.Renderable>;

diff --git a/src/components/ebay-eek/eek-util.ts b/src/components/ebay-eek/eek-util.ts
@@ -7,7 +7,7 @@ const validRanges = {
     A: ["G"],
 };
 
-interface EekInput extends Omit<Marko.Input<"div">, `on${string}`> {
+interface EekInput extends Omit<Marko.HTML.Div, `on${string}`> {
     max: string;
     min: string;
     rating: string;

diff --git a/src/components/ebay-fake-link/component-browser.ts b/src/components/ebay-fake-link/component-browser.ts
@@ -1,7 +1,7 @@
 import * as eventUtils from "../../common/event-utils";
 import type { WithNormalizedProps } from "../../global";
 
-interface FakeLinkInput extends Omit<Marko.Input<"button">, `on${string}`> {
+interface FakeLinkInput extends Omit<Marko.HTML.Button, `on${string}`> {
     variant?: "inline" | "standalone";
     "on-click"?: (event: { originalEvent: MouseEvent }) => void;
     "on-escape"?: (event: { originalEvent: KeyboardEvent }) => void;

diff --git a/src/components/ebay-fake-menu-button/component.ts b/src/components/ebay-fake-menu-button/component.ts
@@ -8,7 +8,7 @@ import type {
 import type { WithNormalizedProps } from "../../global";
 import type { AttrString } from "marko/tags-html";
 
-interface FakeMenuButtonInput extends Omit<Marko.Input<"span">, `on${string}`> {
+interface FakeMenuButtonInput extends Omit<Marko.HTML.Span, `on${string}`> {
     text?: AttrString;
     size?: "none" | "large";
     "prefix-id"?: string;

diff --git a/src/components/ebay-fake-menu/component.ts b/src/components/ebay-fake-menu/component.ts
@@ -23,7 +23,7 @@ export interface Item extends MenuItem {
 export interface Separator {}
 interface FakeMenuInput
     extends BaseMenuInput,
-        Omit<Marko.Input<"span">, `on${string}`> {
+        Omit<Marko.HTML.Span, `on${string}`> {
     items?: Marko.AttrTag<Item>;
     separator?: Marko.AttrTag<Separator>;
     "class-prefix"?: string;

diff --git a/src/components/ebay-fake-tabs/index.marko b/src/components/ebay-fake-tabs/index.marko
@@ -10,19 +10,19 @@ $ const {
     ...htmlInput
 } = input;
 
-export interface Tab extends Marko.Input<"li"> {
+export interface Tab extends Omit<Marko.HTML.LI, `on${string}`> {
     href: string;
 }
 
-static interface FakeTabsInput extends Omit<Marko.Input<"div">, `on${string}`> {
+static interface FakeTabsInput extends Omit<Marko.HTML.Div, `on${string}`> {
     "selected-index"?: number;
     tabs?: Marko.AttrTag<Tab>;
     "tab-matches-current-url"?: boolean;
 }
 
 export interface Input extends WithNormalizedProps<FakeTabsInput> {}
 
-$ var tabAriaCurrent: Marko.Input<"li">['aria-current'] = tabMatchesCurrentUrl === false ? "true" : "page";
+$ var tabAriaCurrent: Marko.HTML.LI['aria-current'] = tabMatchesCurrentUrl === false ? "true" : "page";
 
 <div
     ...processHtmlAttributes(htmlInput)

diff --git a/src/components/ebay-file-input/component.ts b/src/components/ebay-file-input/component.ts
@@ -6,14 +6,14 @@ export interface FileInputEvent {
 }
 
 interface FileInputInput
-    extends Omit<Marko.Input<"input">, `on${string}` | "type"> {
+    extends Omit<Marko.HTML.Input, `on${string}` | "type"> {
     renderBody?: Marko.Body;
     header?: Marko.AttrTag<
         Marko.Input<`h${number}`> & {
             as?: `h${number}`;
         }
     >;
-    subheader?: Marko.AttrTag<Marko.Input<"span">>;
+    subheader?: Marko.AttrTag<Marko.HTML.Span>;
     "on-input"?: (event: FileInputEvent) => void;
 }
 

diff --git a/src/components/ebay-file-preview-card/component.ts b/src/components/ebay-file-preview-card/component.ts
@@ -13,7 +13,7 @@ export type FilePreviewCardMenuAction = {
     label: string;
 };
 
-interface FilePreviewCardInput extends Omit<Marko.Input<"div">, `on${string}`> {
+interface FilePreviewCardInput extends Omit<Marko.HTML.Div, `on${string}`> {
     "a11y-cancel-upload-text"?: AttrString;
     "delete-text"?: AttrString;
     as?: keyof Marko.NativeTags;

diff --git a/src/components/ebay-filter-menu-button/component.ts b/src/components/ebay-filter-menu-button/component.ts
@@ -19,12 +19,12 @@ export interface FilterMenuButtonEvent {
 
 interface FilterMenuButtonInput
     extends BaseMenuInput,
-        Omit<Marko.Input<"span">, `on${string}`> {
+        Omit<Marko.HTML.Span, `on${string}`> {
     text?: AttrString;
     "footer-text"?: AttrString;
     "a11y-footer-text"?: AttrString;
     footer?: WithNormalizedProps<
-        Omit<Marko.Input<"button">, `on${string}`> & {
+        Omit<Marko.HTML.Button, `on${string}`> & {
             "a11y-footer-text"?: AttrString;
         }
     >;

diff --git a/src/components/ebay-filter-menu/component.ts b/src/components/ebay-filter-menu/component.ts
@@ -21,7 +21,7 @@ export interface FilterMenuEvent<T extends Event = Event> {
 
 interface FilterMenuInput
     extends BaseMenuInput,
-        Omit<Marko.Input<"span">, `on${string}`> {
+        Omit<Marko.HTML.Span, `on${string}`> {
     variant?: "form";
     "class-prefix"?: string;
     "form-name"?: string;
@@ -30,7 +30,7 @@ interface FilterMenuInput
     "footer-text"?: AttrString;
     "a11y-footer-text"?: AttrString;
     footer?: WithNormalizedProps<
-        Omit<Marko.Input<"button">, `on${string}`> & {
+        Omit<Marko.HTML.Button, `on${string}`> & {
             "a11y-footer-text"?: AttrString;
         }
     >;

diff --git a/src/components/ebay-filter/component.ts b/src/components/ebay-filter/component.ts
@@ -1,8 +1,7 @@
 import type { AttrString } from "marko/tags-html";
 import type { WithNormalizedProps } from "../../global";
 
-export interface FilterInput
-    extends Omit<Marko.Input<"button">, `on${string}`> {
+export interface FilterInput extends Omit<Marko.HTML.Button, `on${string}`> {
     selected?: boolean;
     href?: string;
     "use-aria-pressed"?: boolean;

diff --git a/src/components/ebay-flag/index.marko b/src/components/ebay-flag/index.marko
@@ -1,6 +1,6 @@
 import type { WithNormalizedProps } from "../../global";
 static {
-    interface FlagInput extends Omit<Marko.Input<"span">, `on${string}`> {
+    interface FlagInput extends Omit<Marko.HTML.Span, `on${string}`> {
         flag?: string;
     }
 }

diff --git a/src/components/ebay-icon-button/component-browser.ts b/src/components/ebay-icon-button/component-browser.ts
@@ -3,7 +3,7 @@ import * as eventUtils from "../../common/event-utils";
 import type { WithNormalizedProps } from "../../global";
 import type { Input as ButtonInput } from "../ebay-button/index.marko";
 
-interface IconButtonInput extends Omit<Marko.Input<"button">, `on${string}`> {
+interface IconButtonInput extends Omit<Marko.HTML.Button, `on${string}`> {
     "badge-number"?: number | string;
     href?: string;
     transparent?: boolean;