fix type issues

grrowl · Jan 19, 2025 · d82c09f · d82c09f
1 parent f63df70
commit d82c09f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 57 deletions.
diff --git a/index.spec.tsx b/index.spec.tsx
@@ -1,51 +1,49 @@
+import { cleanup, render } from "@testing-library/react";
 import "jsdom-global/register";
-import test from "tape";
-import flattenChildren from "./index";
-import { render, cleanup } from "@testing-library/react";
 import React, { Fragment, FunctionComponent, ReactNode } from "react";
 import { isElement } from "react-is";
+import test from "tape";
+import flattenChildren from "./index";
 
 const Assert: FunctionComponent<{
   assert: (result: ReturnType<typeof flattenChildren>) => void;
-  children: ReactNode
+  children: ReactNode;
 }> = (props) => {
   const result = flattenChildren(props.children);
   props.assert(result);
-  return <div data-testid="assert-container">
-    {React.Children.map(result, child => 
-      React.isValidElement(child) 
-        ? React.cloneElement(child, { 'data-reactkey': child.key })
-        : child
-    )}
-  </div>;
+  return (
+    <div data-testid="assert-container">
+      {React.Children.map(result, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child, {
+              "data-reactkey": child.key,
+            } as React.HTMLAttributes<HTMLElement>)
+          : child
+      )}
+    </div>
+  );
 };
 
 function getRenderedChildren(container: HTMLElement) {
-  const assertContainer = container.querySelector('[data-testid="assert-container"]');
+  const assertContainer = container.querySelector(
+    '[data-testid="assert-container"]'
+  );
   if (!assertContainer) throw new Error("No assert container found");
   return Array.from(assertContainer.children);
 }
 
-test("simple children", function(t) {
+test("simple children", function (t) {
   t.plan(5);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         // this inner function tests the return value of flattenChildren
         t.equal(result.length, 4, "array length");
 
-        t.equal(
-          isElement(result[0]) && result[0].key,
-          ".0",
-          "0th element key"
-        );
+        t.equal(isElement(result[0]) && result[0].key, ".0", "0th element key");
         t.equal(result[1], "two", "1st text child");
-        t.equal(
-          isElement(result[2]) && result[2].key,
-          ".2",
-          "2nd element key"
-        );
+        t.equal(isElement(result[2]) && result[2].key, ".2", "2nd element key");
         t.equal(result[3], "10", "3rd number child");
       }}
     >
@@ -60,29 +58,17 @@ test("simple children", function(t) {
 
 test.onFinish(cleanup);
 
-test("conditional children", function(t) {
+test("conditional children", function (t) {
   t.plan(4);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 3, "array length");
 
-        t.equal(
-          isElement(result[0]) && result[0].key,
-          ".0",
-          "0th element key"
-        );
-        t.equal(
-          isElement(result[1]) && result[1].key,
-          ".2",
-          "2nd element key"
-        );
-        t.equal(
-          isElement(result[2]) && result[2].key,
-          ".4",
-          "4th element key"
-        );
+        t.equal(isElement(result[0]) && result[0].key, ".0", "0th element key");
+        t.equal(isElement(result[1]) && result[1].key, ".2", "2nd element key");
+        t.equal(isElement(result[2]) && result[2].key, ".4", "4th element key");
       }}
     >
       <span>one</span>
@@ -94,12 +80,12 @@ test("conditional children", function(t) {
   );
 });
 
-test("keyed children", function(t) {
+test("keyed children", function (t) {
   t.plan(2);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 5, "array length");
         t.deepEqual(
           result.map((c: any) => c.key),
@@ -117,12 +103,12 @@ test("keyed children", function(t) {
   );
 });
 
-test("fragment children", function(t) {
+test("fragment children", function (t) {
   t.plan(2);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 3, "array length");
         t.deepEqual(
           result.map((c: any) => c.key),
@@ -142,12 +128,12 @@ test("fragment children", function(t) {
   );
 });
 
-test("keyed fragment children", function(t) {
+test("keyed fragment children", function (t) {
   t.plan(2);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 3, "array length");
         t.deepEqual(
           result.map((c: any) => c.key),
@@ -167,12 +153,12 @@ test("keyed fragment children", function(t) {
   );
 });
 
-test("array children", function(t) {
+test("array children", function (t) {
   t.plan(2);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 5, "array length");
         t.deepEqual(
           result.map((c: any) => c.key),
@@ -188,12 +174,12 @@ test("array children", function(t) {
   );
 });
 
-test("renders through to react", function(t) {
+test("renders through to react", function (t) {
   t.plan(3);
 
   const { container } = render(
     <Assert
-      assert={result => {
+      assert={(result) => {
         t.equal(result.length, 6, "array length");
       }}
     >
@@ -215,7 +201,7 @@ test("renders through to react", function(t) {
 
   t.equal(children.length, 6, "props.children.length");
   t.deepEqual(
-    Array.from(children).map(child => child.getAttribute('data-reactkey')),
+    Array.from(children).map((child) => child.getAttribute("data-reactkey")),
     [".0", ".$apple..$one", ".$apple..$two", ".2", ".$banana..$three", ".5"],
     "element keys"
   );

diff --git a/index.ts b/index.ts
@@ -1,21 +1,26 @@
 /* Returns React children into an array, flattening fragments. */
 import {
   ReactNode,
-  ReactChild,
   Children,
+  cloneElement,
+  ReactElement,
   isValidElement,
-  cloneElement
+  Fragment
 } from "react";
 import { isFragment } from "react-is";
 
+function isFragmentWithChildren(node: unknown): node is ReactElement<{children: ReactNode}> {
+  return isFragment(node);
+}
+
 export default function flattenChildren(
   children: ReactNode,
   depth: number = 0,
   keys: (string | number)[] = []
-): ReactChild[] {
+): (ReactElement | string | number)[] {
   return Children.toArray(children).reduce(
-    (acc: ReactChild[], node, nodeIndex) => {
-      if (isFragment(node)) {
+    (acc: (ReactElement | string | number)[], node, nodeIndex) => {
+      if (isFragmentWithChildren(node)) {
         acc.push.apply(
           acc,
           flattenChildren(