refactor: always use repeatable attr tags instead of arrays (#2310)

eBay · Oct 30, 2024 · 11532a6 · 11532a6
1 parent 8656d74
commit 11532a6
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 17 deletions.
diff --git a/.changeset/seven-ravens-confess.md b/.changeset/seven-ravens-confess.md
@@ -0,0 +1,5 @@
+---
+"@ebay/ebayui-core": patch
+---
+
+Update types to encourage modern attr tag syntax
diff --git a/src/components/ebay-infotip/component.ts b/src/components/ebay-infotip/component.ts
@@ -11,10 +11,12 @@ interface InfotipInput extends Omit<Marko.Input<"span">, `on${string}`> {
     placement?: TooltipBaseInput["placement"];
     disabled?: boolean;
     icon?: Marko.AttrTag<{ renderBody: Marko.Renderable }>;
-    heading?: Marko.Input<"span"> & {
-        as?: keyof Marko.NativeTags;
-        renderBody?: Marko.Renderable;
-    } & Iterable<any>;
+    heading?: Marko.AttrTag<
+        Marko.Input<"span"> & {
+            as?: keyof Marko.NativeTags;
+            renderBody?: Marko.Renderable;
+        }
+    >;
     "no-flip"?: TooltipBaseInput["no-flip"];
     "not-inline"?: TooltipBaseInput["not-inline"];
     "no-shift"?: TooltipBaseInput["no-shift"];

diff --git a/src/components/ebay-pagination/component.ts b/src/components/ebay-pagination/component.ts
@@ -27,7 +27,7 @@ export interface Item
 }
 
 interface PaginationInput extends Omit<Marko.Input<"nav">, `on${string}`> {
-    items?: Marko.AttrTag<Item>[];
+    items?: Marko.AttrTag<Item>;
     variant?: "show-range" | "show-last" | "overflow";
     "a11y-current-text"?: AttrString;
     "a11y-previous-text"?: AttrString;

diff --git a/src/components/ebay-pagination/index.marko b/src/components/ebay-pagination/index.marko
@@ -4,7 +4,7 @@ import type { Item } from './component';
 
 $ const {
     class: inputClass,
-    items: baseItems = [],
+    items: rawItems = [],
     a11yCurrentText = 'Results Pagination - Page 1',
     a11yPreviousText = 'Previous page',
     a11yNextText = 'Next page',
@@ -16,6 +16,7 @@ static var ignoredItemAttributes = ['current', 'disabled'];
 static function isItemHidden(index: number, range: {start: number, end: number, dotsIndex: number, leadingDotsIndex: number}) {
     return (index < range.start || index > range.end) && (range.dotsIndex !== index && range.leadingDotsIndex - 1 !== index);
 }
+$ const baseItems = [...rawItems];
 $ var lastItemIndex = baseItems.length - 1;
 $ var prevItem = (baseItems[0] && baseItems[0].type === 'previous' && baseItems[0]) || disabledItem;
 $ {

diff --git a/src/components/ebay-progress-bar-expressive/component.ts b/src/components/ebay-progress-bar-expressive/component.ts
@@ -17,7 +17,7 @@ interface Message {
 interface ProgressBarExpressiveInput
     extends Omit<Marko.Input<"div">, `on${string}`> {
     "a11y-text"?: AttrString;
-    messages?: Marko.AttrTag<Message>[];
+    messages?: Marko.AttrTag<Message>;
     size?: "medium" | "large";
 }
 
@@ -61,8 +61,8 @@ class ProgressBarExpressive extends Marko.Component<Input, State> {
         clearTimeout(this.timeouts.showMessage);
     }
 
-    initializeMessageRotation(messages?: Marko.AttrTag<Message>[]) {
-        const messageCount = messages?.length || 0;
+    initializeMessageRotation(messages?: Marko.AttrTag<Message>) {
+        const messageCount = [...(messages || [])].length;
 
         if (messageCount > 0) {
             // Ensure next message index is in new message array bounds
@@ -119,8 +119,9 @@ class ProgressBarExpressive extends Marko.Component<Input, State> {
     /**
      * Display a message and queue the next one
      */
-    showMessage(messages = this.input.messages, extraDelay = 0) {
-        if (messages) {
+    showMessage(messageTags = this.input.messages, extraDelay = 0) {
+        const messages = [...(messageTags || [])];
+        if (messageTags) {
             const messageCount = messages.length;
             if (messageCount > 1) {
                 const currentIndex = this.state.nextMessageIndex;

diff --git a/src/components/ebay-progress-bar-expressive/index.marko b/src/components/ebay-progress-bar-expressive/index.marko
@@ -3,11 +3,13 @@ import { useReducedMotion } from "./component";
 $ const {
     a11yText = "Loading...",
     class: inputClass,
-    messages,
+    messages: rawMessages = [],
     size,
     ...htmlInput
 } = input;
 
+$ const messages = [...rawMessages];
+
 <div
     ...processHtmlAttributes(htmlInput)
     class=["progress-bar-expressive", inputClass]

diff --git a/src/components/ebay-progress-stepper/index.marko b/src/components/ebay-progress-stepper/index.marko
@@ -12,7 +12,7 @@ export interface Step extends Omit<Marko.Input<"div">, `on${string}` | "title">
 
 static interface ProgressStepperInput extends Omit<Marko.Input<"div">, `on${string}`> {
     direction?: "row" | "column";
-    step?: Marko.AttrTag<Step>[];
+    step?: Marko.AttrTag<Step>;
     "default-state"?: "complete" | "upcoming" | "attention" | "current";
     "a11y-heading-tag"?: keyof Marko.NativeTags;
     "a11y-heading-text"?: AttrString;

diff --git a/src/components/ebay-video/component.ts b/src/components/ebay-video/component.ts
@@ -58,14 +58,14 @@ interface VideoInput extends Omit<Marko.Input<"video">, `on${string}`> {
     action?: "play" | "pause";
     "volume-slider"?: boolean;
     tracks?: any[];
-    sources: Marko.AttrTag<Marko.Input<"source">>[];
+    sources: Marko.AttrTag<Marko.Input<"source">>;
     "report-text"?: AttrString;
     "spinner-timeout"?: number;
     "cdn-url"?: string;
     "css-url"?: string;
     version?: string;
     thumbnail?: string;
-    track?: Marko.AttrTag<Marko.Input<"track">>[];
+    track?: Marko.AttrTag<Marko.Input<"track">>;
     "error-text"?: AttrString;
     "a11y-play-text"?: AttrString;
     "a11y-load-text"?: AttrString;
@@ -233,9 +233,10 @@ class Video extends Marko.Component<Input, State> {
 
     _loadSrc(index?: number) {
         const currentIndex = index || 0;
-        const src = this.input.sources[currentIndex];
+        const sources = [...this.input.sources];
+        const src = sources[currentIndex];
         let nextIndex: number;
-        if (src && this.input.sources.length > currentIndex + 1) {
+        if (src && sources.length > currentIndex + 1) {
             nextIndex = currentIndex + 1;
         }