Forward keys to JSX component

MetaMask · May 1, 2024 · 82da4ff · 82da4ff
1 parent 1d5e56a
commit 82da4ff
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 6 deletions.
diff --git a/packages/snaps-sdk/src/jsx/jsx-dev-runtime.test.tsx b/packages/snaps-sdk/src/jsx/jsx-dev-runtime.test.tsx
@@ -11,6 +11,16 @@ describe('jsx', () => {
     });
   });
 
+  it('renders a JSX component with a key', () => {
+    const element = <Text key="foo">Hello</Text>;
+
+    expect(element).toStrictEqual({
+      type: 'Text',
+      key: 'foo',
+      props: { children: 'Hello' },
+    });
+  });
+
   it('renders a nested JSX component', () => {
     const element = (
       <Box>

diff --git a/packages/snaps-sdk/src/jsx/jsx-dev-runtime.ts b/packages/snaps-sdk/src/jsx/jsx-dev-runtime.ts
@@ -13,14 +13,16 @@ import { assertJSXElement } from './validation';
  *
  * @param component - The component to render.
  * @param props - The props to pass to the component.
+ * @param key - The key of the component.
  * @returns The rendered component.
  * @see https://www.typescriptlang.org/tsconfig/#jsx
  */
 export function jsxDEV<Props extends JsonObject>(
   component: SnapComponent<Props>,
-  props: Props & { key?: Key | null },
+  props: Props,
+  key: Key | null,
 ): unknown | null {
-  const element = jsx(component, props);
+  const element = jsx(component, props, key);
   assertJSXElement(element);
 
   return element;

diff --git a/packages/snaps-sdk/src/jsx/jsx-runtime.test.tsx b/packages/snaps-sdk/src/jsx/jsx-runtime.test.tsx
@@ -11,6 +11,16 @@ describe('jsx', () => {
     });
   });
 
+  it('renders a JSX component with a key', () => {
+    const element = <Text key="foo">Hello</Text>;
+
+    expect(element).toStrictEqual({
+      type: 'Text',
+      key: 'foo',
+      props: { children: 'Hello' },
+    });
+  });
+
   it('does not validate the element', () => {
     // @ts-expect-error - Invalid props.
     expect(() => <Text foo="bar" />).not.toThrow();
@@ -66,4 +76,31 @@ describe('jsxs', () => {
       },
     });
   });
+
+  it('renders a nested JSX component with a key', () => {
+    const element = (
+      <Box>
+        <Text key="foo">
+          Hello, <Bold key="bar">world</Bold>
+        </Text>
+      </Box>
+    );
+
+    expect(element).toStrictEqual({
+      type: 'Box',
+      key: null,
+      props: {
+        children: {
+          type: 'Text',
+          key: 'foo',
+          props: {
+            children: [
+              'Hello, ',
+              { type: 'Bold', key: 'bar', props: { children: 'world' } },
+            ],
+          },
+        },
+      },
+    });
+  });
 });
diff --git a/packages/snaps-sdk/src/jsx/jsx-runtime.ts b/packages/snaps-sdk/src/jsx/jsx-runtime.ts
@@ -11,12 +11,14 @@ import type { JsonObject, Key, SnapComponent } from './component';
  *
  * @param component - The component to render.
  * @param props - The props to pass to the component.
+ * @param key - The key of the component.
  * @returns The rendered component.
  * @see https://www.typescriptlang.org/tsconfig/#jsx
  */
 export function jsx<Props extends JsonObject>(
   component: SnapComponent<Props>,
-  props: Props & { key?: Key | null },
+  props: Props,
+  key: Key | null,
 ): unknown | null {
   if (typeof component === 'string') {
     // If component is a string, it is a built-in HTML element. This is not
@@ -36,7 +38,7 @@ export function jsx<Props extends JsonObject>(
     );
   }
 
-  return component(props);
+  return component({ ...props, key });
 }
 
 /**
@@ -52,12 +54,14 @@ export function jsx<Props extends JsonObject>(
  *
  * @param component - The component to render.
  * @param props - The props to pass to the component.
+ * @param key - The key of the component.
  * @returns The rendered component.
  * @see https://www.typescriptlang.org/tsconfig/#jsx
  */
 export function jsxs<Props extends JsonObject>(
   component: SnapComponent<Props>,
-  props: Props & { key?: Key | null },
+  props: Props,
+  key: Key | null,
 ): unknown | null {
-  return jsx(component, props);
+  return jsx(component, props, key);
 }