fix(element): correct createElement props and children

remarkablegames · Jan 8, 2024 · b2cfbc1 · b2cfbc1
1 parent ffd1998
commit b2cfbc1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/element/__snapshots__/create.test.ts.snap b/src/element/__snapshots__/create.test.ts.snap
@@ -2,33 +2,31 @@
 
 exports[`creates element %p 1`] = `
 {
-  "props": {
-    "children": [],
-  },
+  "key": null,
+  "props": {},
   "type": undefined,
 }
 `;
 
 exports[`creates element [Function Component] 1`] = `
 {
-  "props": {
-    "children": [],
-  },
+  "key": null,
+  "props": {},
   "type": [Function],
 }
 `;
 
 exports[`creates element [Function Component] 2`] = `
 {
-  "props": {
-    "children": [],
-  },
+  "key": null,
+  "props": {},
   "type": [Function],
 }
 `;
 
 exports[`creates element [Function Component] 3`] = `
 {
+  "key": null,
   "props": {
     "children": [
       null,
@@ -40,8 +38,8 @@ exports[`creates element [Function Component] 3`] = `
 
 exports[`creates element [Function Component] 4`] = `
 {
+  "key": null,
   "props": {
-    "children": [],
     "style": {
       "height": 200,
       "width": 100,
@@ -53,6 +51,7 @@ exports[`creates element [Function Component] 4`] = `
 
 exports[`creates element [Function Component] 5`] = `
 {
+  "key": null,
   "props": {
     "children": [
       null,
@@ -68,6 +67,7 @@ exports[`creates element [Function Component] 5`] = `
 
 exports[`creates element [Function Component] 6`] = `
 {
+  "key": null,
   "props": {
     "children": [
       [Function],

diff --git a/src/element/create.ts b/src/element/create.ts
@@ -1,5 +1,7 @@
 import type { ComponentClass, FC, JSX } from 'react';
 
+import type { Props } from '../types';
+
 /**
  * Creates an element.
  *
@@ -10,14 +12,20 @@ import type { ComponentClass, FC, JSX } from 'react';
  */
 export function createElement(
   type: FC | ComponentClass,
-  props?: React.Attributes | null,
+  props?: Props | null,
   ...children: JSX.Element[]
-) {
+): JSX.Element {
+  if (!props) {
+    props = {};
+  }
+
+  if (children.length) {
+    props.children = children;
+  }
+
   return {
     type,
-    props: {
-      ...props,
-      children,
-    },
+    props,
+    key: null,
   };
 }