Change types to allow regular array types as children (#2470)

In #2466 we changed the types and validation of JSX components to use `NonEmptyArray<Type>` as children. This causes issues however when using utility functions like `.map()` and `.filter()`, since they return a regular `Type[]` type. This is not great for devex, since it would require type assertions everywhere. I've changed the types to accept `Type[]`, though we technically still validate `NonEmptyArray<Type>`.
MetaMask · Jun 7, 2024 · 4c8ee13 · 4c8ee13
1 parent 3866525
commit 4c8ee13
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 33 deletions.
diff --git a/packages/snaps-sdk/src/jsx/component.ts b/packages/snaps-sdk/src/jsx/component.ts
@@ -1,4 +1,4 @@
-import type { Json, NonEmptyArray } from '@metamask/utils';
+import type { Json } from '@metamask/utils';
 
 /**
  * A key, which can be a string or a number.
@@ -48,7 +48,7 @@ export type SnapElement<
  * const maybeArrayString: MaybeArrayString = 'hello';
  * const maybeArrayStringArray: MaybeArrayString = ['hello', 'world'];
  */
-export type MaybeArray<Type> = Type | NonEmptyArray<Type>;
+export type MaybeArray<Type> = Type | Type[];
 
 /**
  * A JSX node, which can be an element, a string, null, or an array of nodes.

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -430,7 +430,6 @@ describe('BoxStruct', () => {
     [],
     // @ts-expect-error - Invalid props.
     <Box />,
-    // @ts-expect-error - Invalid props.
     <Box children={[]} />,
     <Text>foo</Text>,
     <Row label="label">
@@ -765,7 +764,6 @@ describe('DropdownStruct', () => {
     [],
     // @ts-expect-error - Invalid props.
     <Dropdown name="foo" />,
-    // @ts-expect-error - Invalid props.
     <Dropdown name="foo" children={[]} />,
     // @ts-expect-error - Invalid props.
     <Spinner>foo</Spinner>,

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -1,4 +1,3 @@
-import type { NonEmptyArray } from '@metamask/utils';
 import {
   hasProperty,
   HexChecksumAddressStruct,
@@ -86,11 +85,8 @@ export const ElementStruct: Describe<GenericSnapElement> = object({
  */
 function nonEmptyArray<Type, Schema>(
   struct: Struct<Type, Schema>,
-): Struct<NonEmptyArray<Type>, any> {
-  return nonempty(array(struct)) as unknown as Struct<
-    NonEmptyArray<Type>,
-    Schema
-  >;
+): Struct<Type[], Struct<Type, Schema>> {
+  return nonempty(array(struct));
 }
 
 /**

diff --git a/packages/snaps-utils/src/ui.tsx b/packages/snaps-utils/src/ui.tsx
@@ -2,7 +2,6 @@ import type { Component } from '@metamask/snaps-sdk';
 import { NodeType } from '@metamask/snaps-sdk';
 import type {
   BoldChildren,
-  FieldElement,
   ItalicChildren,
   JSXElement,
   LinkElement,
@@ -29,7 +28,6 @@ import {
   Button,
   Address,
 } from '@metamask/snaps-sdk/jsx';
-import type { NonEmptyArray } from '@metamask/utils';
 import {
   assert,
   assertExhaustive,
@@ -67,7 +65,7 @@ function getButtonVariant(variant?: 'primary' | 'secondary' | undefined) {
  * @param elements - The JSX elements.
  * @returns The child or children.
  */
-function getChildren<Type>(elements: NonEmptyArray<Type>) {
+function getChildren<Type>(elements: Type[]) {
   if (elements.length === 1) {
     return elements[0];
   }
@@ -83,11 +81,7 @@ function getChildren<Type>(elements: NonEmptyArray<Type>) {
  */
 function getLinkText(token: Tokens.Link | Tokens.Generic) {
   if (token.tokens && token.tokens.length > 0) {
-    return getChildren(
-      token.tokens.flatMap(
-        getTextChildFromToken,
-      ) as NonEmptyArray<TextChildren>,
-    );
+    return getChildren(token.tokens.flatMap(getTextChildFromToken));
   }
 
   return token.href;
@@ -100,9 +94,7 @@ function getLinkText(token: Tokens.Link | Tokens.Generic) {
  * @returns The text child.
  */
 function getTextChildFromTokens(tokens: Token[]) {
-  return getChildren(
-    tokens.flatMap(getTextChildFromToken) as NonEmptyArray<TextChildren>,
-  );
+  return getChildren(tokens.flatMap(getTextChildFromToken));
 }
 
 /**
@@ -161,7 +153,7 @@ function getTextChildFromToken(token: Token): TextChildren {
  */
 export function getTextChildren(
   value: string,
-): NonEmptyArray<string | StandardFormattingElement | LinkElement> {
+): (string | StandardFormattingElement | LinkElement)[] {
   const rootTokens = lexer(value, { gfm: false });
   const children: (string | StandardFormattingElement | LinkElement | null)[] =
     [];
@@ -177,9 +169,12 @@ export function getTextChildren(
     }
   });
 
-  return children.filter((child) => child !== null) as NonEmptyArray<
-    string | StandardFormattingElement | LinkElement
-  >;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  return children.filter((child) => child !== null) as (
+    | string
+    | StandardFormattingElement
+    | LinkElement
+  )[];
 }
 
 /**
@@ -249,9 +244,7 @@ export function getJsxElementFromComponent(
       case NodeType.Form:
         return (
           <Form name={component.name}>
-            {getChildren(
-              component.children.map(getElement) as NonEmptyArray<FieldElement>,
-            )}
+            {getChildren(component.children.map(getElement))}
           </Form>
         );
 
@@ -277,11 +270,7 @@ export function getJsxElementFromComponent(
       case NodeType.Panel:
         // `Panel` is renamed to `Box` in JSX.
         return (
-          <Box
-            children={getChildren(
-              component.children.map(getElement) as NonEmptyArray<JSXElement>,
-            )}
-          />
+          <Box children={getChildren(component.children.map(getElement))} />
         );
 
       case NodeType.Row: