PR Feedback:

* Move asHumanfriendlyTokenList to cli-kit/common/array, rename to asHumanFriendlyArray, update asHumanFriendlyArray to accept a generic so the return array can be explicitly typed if needed

Author: byrichardpowell

packages/app/src/cli/services/dev.ts

@@ -43,11 +43,12 @@ import {checkPortAvailability, getAvailableTCPPort} from '@shopify/cli-kit/node/
 import {TunnelClient} from '@shopify/cli-kit/node/plugins/tunnel'
 import {getBackendPort} from '@shopify/cli-kit/node/environment'
 import {basename} from '@shopify/cli-kit/node/path'
-import {renderWarning, renderInfo, Token} from '@shopify/cli-kit/node/ui'
+import {renderWarning, renderInfo} from '@shopify/cli-kit/node/ui'
 import {reportAnalyticsEvent} from '@shopify/cli-kit/node/analytics'
 import {OutputProcess, formatPackageManagerCommand, outputDebug} from '@shopify/cli-kit/node/output'
 import {hashString} from '@shopify/cli-kit/node/crypto'
 import {AbortError} from '@shopify/cli-kit/node/error'
+import {asHumanFriendlyArray} from '@shopify/cli-kit/common/array'
 
 export interface NoTunnel {
   mode: 'use-localhost'
@@ -637,44 +638,11 @@ export function renderPortWarnings(portWarnings: PortWarning[] = []) {
     return
   }
 
-  const formattedWarningTypes = asHumanFriendlyTokenList(portWarnings.map((warning) => warning.type)).join(' ')
-  const formattedFlags = asHumanFriendlyTokenList(portWarnings.map((warning) => ({command: warning.flag})))
+  const formattedWarningTypes = asHumanFriendlyArray(portWarnings.map((warning) => warning.type)).join(' ')
+  const formattedFlags = asHumanFriendlyArray(portWarnings.map((warning) => ({command: warning.flag})))
 
   renderWarning({
     headline: [`Random ports will be used for ${formattedWarningTypes} because the requested ports are not available.`],
     body: [`If you want to use specific ports, you can choose different ports using the`, ...formattedFlags, `flags.`],
   })
 }
-
-/**
- * Converts an array of Tokens into a human friendly list
- *
- * Returns a new array that contains the items separated by commas,
- * except for the last item, which is seperated by "and".
- * This is useful for creating human-friendly sentences.
- *
- * @example
- * ```ts
- *   const items = ['apple', 'banana', 'cherry'];
- *   const result = asHumanFriendlyList(items)
- *
- *   //['apple', ',', 'banana', ',', 'and', 'cherry']
- *   console.log(result);
- * ```
- */
-
-function asHumanFriendlyTokenList(items: Token[]): Token[] {
-  if (items.length < 2) {
-    return items
-  }
-
-  return items.reduce<Token[]>((acc, item, index) => {
-    if (index === items.length - 1) {
-      acc.push('and')
-    } else if (index !== 0) {
-      acc.push(', ')
-    }
-    acc.push(item)
-    return acc
-  }, [])
-}

packages/cli-kit/src/public/common/array.ts

@@ -67,3 +67,37 @@ export function uniqBy<T>(array: List<T> | null | undefined, iteratee: ValueIter
 export function difference<T>(array: List<T> | null | undefined, ...values: List<T>[]): T[] {
   return lodashDifference(array, ...values)
 }
+
+/**
+ * Converts an array of anything into a human friendly list.
+ *
+ * Returns a new array that contains the items separated by commas,
+ * except for the last item, which is separated by "and".
+ * This is useful for creating human-friendly sentences.
+ *
+ * @param items - Token[].
+ * @returns Token[].
+ * @example
+ * ```ts
+ *   const items = ['apple', 'banana', {command: "--flag"}];
+ *   const result = asHumanFriendlyList(items)
+ *
+ *   // ['apple', ',', 'banana', ',', 'and', {command: "--flag"}]
+ *   console.log(result);
+ * ```
+ */
+export function asHumanFriendlyArray<T>(items: T[]): (T | string)[] {
+  if (items.length < 2) {
+    return items
+  }
+
+  return items.reduce<(T | string)[]>((acc, item, index) => {
+    if (index === items.length - 1) {
+      acc.push('and')
+    } else if (index !== 0) {
+      acc.push(', ')
+    }
+    acc.push(item)
+    return acc
+  }, [])
+}