Merge pull request #25 from grrowl/react-support

React support

.github/workflows/test.yml

@@ -15,6 +15,7 @@ jobs:
     strategy:
       matrix:
         node-version: [16.x, 18.x, 20.x]
+        react-version: [18, 19]
 
     steps:
       - uses: actions/checkout@v4
@@ -23,6 +24,20 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
-      - run: npm ci
+      # Add caching
+      - uses: actions/cache@v3
+        id: npm-cache
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ matrix.node-version }}-
+
+      # Only run npm ci if cache missed
+      - if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm ci
+
+      # Override React versions
+      - run: npm install --no-save react@^${{ matrix.react-version }} react-dom@^${{ matrix.react-version }} react-is@^${{ matrix.react-version }}
 
       - run: npm test

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 5.0.0
+
+Move `react-is` to a peer dependency so we can support all react versions in a single version. (thanks @imjordanxd!)
+
 # 4.0.0
 
 React 19 support! (thanks for the help @bmv437, @benface)

README.md

@@ -1,17 +1,19 @@
 # react-keyed-flatten-children
 
-Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray), this utility takes children and returns them as an array for introspection or filtering. Different from `Children.toArray`, it will flatten arrays and `React.Fragment`s into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders.
-
-⚠️ As of v4.0.0, this library only supports React 19. If you're using React 18 or under, stay on the (still maintained) v3.2.0+.
+Similar to [React's built-in `Children.toArray` method](https://reactjs.org/docs/react-api.html#reactchildrentoarray), this utility takes children and returns them as an array for introspection or filtering. Different from `Children.toArray`, it will flatten nested arrays and `React.Fragment`s into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders.
 
 ## getting started
 
+This library requires a version of `react-is` matching your React version be installed alongside this library as a peer dependency. So, if you're using React 19:
+
 ```
-npm install react-keyed-flatten-children
+npm install react-keyed-flatten-children react-is@19
 ```
 
+If you're using React 18 or lower:
+
 ```
-yarn add react-keyed-flatten-children
+npm install react-keyed-flatten-children react-is@18
 ```
 
 ## why?

index.spec.tsx

@@ -56,7 +56,39 @@ test("simple children", function (t) {
   );
 });
 
-test.onFinish(cleanup);
+test("nested arrays and fragments with mixed content", function (t) {
+  t.plan(2);
+
+  const { container } = render(
+    <Assert
+      assert={(result) => {
+        t.equal(result.length, 8, "array length");
+        t.deepEqual(
+          result.map((c: any) => c.key),
+          [
+            ".0",
+            undefined,
+            ".1:$a",
+            undefined,
+            ".1:2:$b",
+            undefined,
+            undefined,
+            ".2",
+          ],
+          "element keys"
+        );
+      }}
+    >
+      <span>start</span>
+      {[
+        "one",
+        <span key="a">nested element</span>,
+        ["two", <span key="b">deep element</span>, "three", 4],
+      ]}
+      <span>end</span>
+    </Assert>
+  );
+});
 
 test("conditional children", function (t) {
   t.plan(4);
@@ -206,3 +238,5 @@ test("renders through to react", function (t) {
     "element keys"
   );
 });
+
+test.onFinish(cleanup);

package.json

@@ -21,18 +21,10 @@
     "test": "tsx index.spec.tsx",
     "prepublishOnly": "npm run build"
   },
-  "keywords": [
-    "react",
-    "fragment",
-    "flatten",
-    "children",
-    "utility"
-  ],
+  "keywords": ["react", "fragment", "flatten", "children", "utility"],
   "author": "Tom McKenzie <[email protected]>",
   "license": "MIT",
-  "files": [
-    "dist/"
-  ],
+  "files": ["dist/"],
   "devDependencies": {
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
@@ -51,7 +43,7 @@
     "typescript": "^5.0.4"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-is": "^18.0.0 || ^19.0.0"
+    "react": ">=18.0.0",
+    "react-is": ">=18.0.0"
   }
 }