From 7c0ae360c0064bb1da4d30778554ef04ec7e5ca4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20P=C3=A4=C3=A4rni?= <annpaa91@gmail.com>
Date: Tue, 23 Jul 2024 20:59:12 +0200
Subject: [PATCH 1/5] Added property count to Map, to make length of provided
 array available

---
 .../core/src/components/Map.spec.tsx          | 33 +++++++++++++++----
 .../@react-facet/core/src/components/Map.tsx  | 24 ++++++++------
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/packages/@react-facet/core/src/components/Map.spec.tsx b/packages/@react-facet/core/src/components/Map.spec.tsx
index 14d43ddd..19bf7b65 100644
--- a/packages/@react-facet/core/src/components/Map.spec.tsx
+++ b/packages/@react-facet/core/src/components/Map.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { act, render } from '@react-facet/dom-fiber-testing-library'
+import { act, getByTestId, render } from '@react-facet/dom-fiber-testing-library'
 import { createFacet } from '../facet'
 import { Facet } from '../types'
 import { useFacetEffect, useFacetMap } from '../hooks'
@@ -34,7 +34,7 @@ it('renders all items in a Facet of array', () => {
   const Example = () => {
     return (
       <Map array={data} equalityCheck={inputEqualityCheck}>
-        {(item, index) => <ExampleContent item={item} index={index} />}
+        {(item, index, count) => <ExampleContent item={item} index={index} />}
       </Map>
     )
   }
@@ -103,9 +103,9 @@ it('updates only items that have changed', () => {
 
   const mock = jest.fn()
 
-  const ExampleContent = ({ item }: { item: Facet<Input> }) => {
+  const ExampleContent = ({ item, count }: { item: Facet<Input>; count: number }) => {
     useFacetEffect(mock, [], [item])
-    return null
+    return <div data-testId={'count'}>{count}</div>
   }
 
   const inputEqualityCheck = () => {
@@ -125,14 +125,14 @@ it('updates only items that have changed', () => {
   const Example = () => {
     return (
       <Map array={data} equalityCheck={inputEqualityCheck}>
-        {(item) => <ExampleContent item={item} />}
+        {(item, count) => <ExampleContent item={item} count={count} />}
       </Map>
     )
   }
 
   const scenario = <Example />
 
-  render(scenario)
+  const { getByTestId } = render(scenario)
 
   expect(mock).toHaveBeenCalledTimes(5)
 
@@ -145,3 +145,24 @@ it('updates only items that have changed', () => {
   expect(mock).toHaveBeenCalledTimes(1)
   expect(mock).toHaveBeenCalledWith({ a: '6' })
 })
+
+it('count returns length of provided array', () => {
+  const data = createFacet({
+    initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }],
+  })
+
+  const mock = jest.fn()
+
+  const ExampleContent = ({ index, count }: { index: number; count: number }) => {
+    return <>{count === index + 1 && <div data-testid={'count'}>{count}</div>}</>
+  }
+
+  const Example = () => {
+    return <Map array={data}>{(_, index, count) => <ExampleContent index={index} count={count} />}</Map>
+  }
+
+  const { getByTestId } = render(<Example />)
+
+  const counter = getByTestId('count')
+  expect(counter).toHaveTextContent('3')
+})
diff --git a/packages/@react-facet/core/src/components/Map.tsx b/packages/@react-facet/core/src/components/Map.tsx
index 0710419b..ed2a843d 100644
--- a/packages/@react-facet/core/src/components/Map.tsx
+++ b/packages/@react-facet/core/src/components/Map.tsx
@@ -6,12 +6,13 @@ import { EqualityCheck, Facet, NO_VALUE } from '../types'
 
 export type MapProps<T> = {
   array: Facet<T[]>
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
   equalityCheck?: EqualityCheck<T>
 }
 
 export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
-  const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array])) ?? 0
+  const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const countNumber = countValue !== NO_VALUE ? countValue : 0
 
   return (
     <>
@@ -22,13 +23,14 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
               key={index}
               arrayFacet={array}
               index={index}
+              count={countNumber}
               equalityCheck={equalityCheck}
               children={children}
             />
           ) : (
-            <MapChild<T> key={index} arrayFacet={array} index={index} children={children} />
+            <MapChild<T> key={index} arrayFacet={array} index={index} count={countNumber} children={children} />
           ),
-        countValue !== NO_VALUE ? countValue : 0,
+        countNumber,
       )}
     </>
   )
@@ -37,11 +39,12 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
 type MapChildMemoProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  count: number
+  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
   equalityCheck: EqualityCheck<T>
 }
 
-const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChildMemoProps<T>) => {
+const MapChildMemo = <T,>({ arrayFacet, index, count, children, equalityCheck }: MapChildMemoProps<T>) => {
   const childFacet = useFacetMemo(
     (array) => {
       if (index < array.length) return array[index]
@@ -51,16 +54,17 @@ const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChi
     [arrayFacet],
     equalityCheck,
   )
-  return children(childFacet, index)
+  return children(childFacet, index, count)
 }
 
 type MapChildProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  count: number
+  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
 }
 
-const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
+const MapChild = <T,>({ arrayFacet, index, count, children }: MapChildProps<T>) => {
   const childFacet = useFacetMap(
     (array) => {
       if (index < array.length) return array[index]
@@ -70,7 +74,7 @@ const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
     [arrayFacet],
   )
 
-  return children(childFacet, index)
+  return children(childFacet, index, count)
 }
 
 interface TimesFn<T> {

From 3023084ad5c46d4be37d452330f3adacc3467a5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20P=C3=A4=C3=A4rni?= <annpaa91@gmail.com>
Date: Tue, 23 Jul 2024 21:11:03 +0200
Subject: [PATCH 2/5] Remove unused code

---
 packages/@react-facet/core/src/components/Map.spec.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/@react-facet/core/src/components/Map.spec.tsx b/packages/@react-facet/core/src/components/Map.spec.tsx
index 19bf7b65..bc2b4714 100644
--- a/packages/@react-facet/core/src/components/Map.spec.tsx
+++ b/packages/@react-facet/core/src/components/Map.spec.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { act, getByTestId, render } from '@react-facet/dom-fiber-testing-library'
+import { act, render } from '@react-facet/dom-fiber-testing-library'
 import { createFacet } from '../facet'
 import { Facet } from '../types'
 import { useFacetEffect, useFacetMap } from '../hooks'
@@ -34,7 +34,7 @@ it('renders all items in a Facet of array', () => {
   const Example = () => {
     return (
       <Map array={data} equalityCheck={inputEqualityCheck}>
-        {(item, index, count) => <ExampleContent item={item} index={index} />}
+        {(item, index) => <ExampleContent item={item} index={index} />}
       </Map>
     )
   }
@@ -130,10 +130,6 @@ it('updates only items that have changed', () => {
     )
   }
 
-  const scenario = <Example />
-
-  const { getByTestId } = render(scenario)
-
   expect(mock).toHaveBeenCalledTimes(5)
 
   mock.mockClear()
@@ -151,8 +147,6 @@ it('count returns length of provided array', () => {
     initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }],
   })
 
-  const mock = jest.fn()
-
   const ExampleContent = ({ index, count }: { index: number; count: number }) => {
     return <>{count === index + 1 && <div data-testid={'count'}>{count}</div>}</>
   }

From 69c297262193411dbbe6b54dff2e47bc63fed215 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anna=20P=C3=A4=C3=A4rni?= <annpaa91@gmail.com>
Date: Tue, 23 Jul 2024 21:14:22 +0200
Subject: [PATCH 3/5] Revert unwanted changes to count returns length of
 provided array

---
 packages/@react-facet/core/src/components/Map.spec.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/@react-facet/core/src/components/Map.spec.tsx b/packages/@react-facet/core/src/components/Map.spec.tsx
index bc2b4714..8dda3693 100644
--- a/packages/@react-facet/core/src/components/Map.spec.tsx
+++ b/packages/@react-facet/core/src/components/Map.spec.tsx
@@ -103,9 +103,9 @@ it('updates only items that have changed', () => {
 
   const mock = jest.fn()
 
-  const ExampleContent = ({ item, count }: { item: Facet<Input>; count: number }) => {
+  const ExampleContent = ({ item }: { item: Facet<Input> }) => {
     useFacetEffect(mock, [], [item])
-    return <div data-testId={'count'}>{count}</div>
+    return null
   }
 
   const inputEqualityCheck = () => {
@@ -125,11 +125,15 @@ it('updates only items that have changed', () => {
   const Example = () => {
     return (
       <Map array={data} equalityCheck={inputEqualityCheck}>
-        {(item, count) => <ExampleContent item={item} count={count} />}
+        {(item) => <ExampleContent item={item} />}
       </Map>
     )
   }
 
+  const scenario = <Example />
+
+  render(scenario)
+
   expect(mock).toHaveBeenCalledTimes(5)
 
   mock.mockClear()

From f99036b30d399edb37a1df1e02aac58a6a982795 Mon Sep 17 00:00:00 2001
From: Paulo <paulo@ragonha.me>
Date: Thu, 25 Jul 2024 10:46:34 +0200
Subject: [PATCH 4/5] Rename count to length

---
 .../@react-facet/core/src/components/Map.tsx  | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/@react-facet/core/src/components/Map.tsx b/packages/@react-facet/core/src/components/Map.tsx
index ed2a843d..96533960 100644
--- a/packages/@react-facet/core/src/components/Map.tsx
+++ b/packages/@react-facet/core/src/components/Map.tsx
@@ -6,13 +6,13 @@ import { EqualityCheck, Facet, NO_VALUE } from '../types'
 
 export type MapProps<T> = {
   array: Facet<T[]>
-  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck?: EqualityCheck<T>
 }
 
 export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
-  const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
-  const countNumber = countValue !== NO_VALUE ? countValue : 0
+  const lengthValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const lengthNumber = lengthValue !== NO_VALUE ? lengthValue : 0
 
   return (
     <>
@@ -23,14 +23,14 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
               key={index}
               arrayFacet={array}
               index={index}
-              count={countNumber}
+              length={lengthNumber}
               equalityCheck={equalityCheck}
               children={children}
             />
           ) : (
-            <MapChild<T> key={index} arrayFacet={array} index={index} count={countNumber} children={children} />
+            <MapChild<T> key={index} arrayFacet={array} index={index} length={lengthNumber} children={children} />
           ),
-        countNumber,
+        lengthNumber,
       )}
     </>
   )
@@ -39,12 +39,12 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
 type MapChildMemoProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  count: number
-  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck: EqualityCheck<T>
 }
 
-const MapChildMemo = <T,>({ arrayFacet, index, count, children, equalityCheck }: MapChildMemoProps<T>) => {
+const MapChildMemo = <T,>({ arrayFacet, index, length, children, equalityCheck }: MapChildMemoProps<T>) => {
   const childFacet = useFacetMemo(
     (array) => {
       if (index < array.length) return array[index]
@@ -54,17 +54,17 @@ const MapChildMemo = <T,>({ arrayFacet, index, count, children, equalityCheck }:
     [arrayFacet],
     equalityCheck,
   )
-  return children(childFacet, index, count)
+  return children(childFacet, index, length)
 }
 
 type MapChildProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  count: number
-  children: (item: Facet<T>, index: number, count: number) => ReactElement | null
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
 }
 
-const MapChild = <T,>({ arrayFacet, index, count, children }: MapChildProps<T>) => {
+const MapChild = <T,>({ arrayFacet, index, length, children }: MapChildProps<T>) => {
   const childFacet = useFacetMap(
     (array) => {
       if (index < array.length) return array[index]
@@ -74,7 +74,7 @@ const MapChild = <T,>({ arrayFacet, index, count, children }: MapChildProps<T>)
     [arrayFacet],
   )
 
-  return children(childFacet, index, count)
+  return children(childFacet, index, length)
 }
 
 interface TimesFn<T> {

From db91fda6b4153c8989938919e83d6de67f1c2cd1 Mon Sep 17 00:00:00 2001
From: Paulo <paulo@ragonha.me>
Date: Thu, 25 Jul 2024 10:48:45 +0200
Subject: [PATCH 5/5] Change "count" to "length" in test as well

---
 .../@react-facet/core/src/components/Map.spec.tsx     | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/@react-facet/core/src/components/Map.spec.tsx b/packages/@react-facet/core/src/components/Map.spec.tsx
index 8dda3693..c42982a9 100644
--- a/packages/@react-facet/core/src/components/Map.spec.tsx
+++ b/packages/@react-facet/core/src/components/Map.spec.tsx
@@ -146,21 +146,20 @@ it('updates only items that have changed', () => {
   expect(mock).toHaveBeenCalledWith({ a: '6' })
 })
 
-it('count returns length of provided array', () => {
+it('provides the length of the array', () => {
   const data = createFacet({
     initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }],
   })
 
-  const ExampleContent = ({ index, count }: { index: number; count: number }) => {
-    return <>{count === index + 1 && <div data-testid={'count'}>{count}</div>}</>
+  const ExampleContent = ({ index, length }: { index: number; length: number }) => {
+    return <>{length === index + 1 && <div data-testid={'length'}>{length}</div>}</>
   }
 
   const Example = () => {
-    return <Map array={data}>{(_, index, count) => <ExampleContent index={index} count={count} />}</Map>
+    return <Map array={data}>{(_, index, length) => <ExampleContent index={index} length={length} />}</Map>
   }
 
   const { getByTestId } = render(<Example />)
 
-  const counter = getByTestId('count')
-  expect(counter).toHaveTextContent('3')
+  expect(getByTestId('length')).toHaveTextContent('3')
 })