Merge branch 'main' of github.com:Mojang/ore-ui into react-18-main

Author: marlonicus

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
     'import/no-cycle': 'error',
     'no-unreachable': 'error',
     'no-undef': 'error',
-    'eqeqeq': 'error',
+    eqeqeq: 'error',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
     'react/jsx-uses-react': 'error',

.github/workflows/benchmarking.yml

@@ -36,7 +36,7 @@ jobs:
           node-version-file: '.nvmrc'
           cache: 'yarn'
       - run: yarn install --immutable
-      - run: cd examples/benchmarking && yarn build && yarn compare mountFacetDomFiber mountReactDom 90
+      - run: cd examples/benchmarking && yarn build && yarn compare mountFacetDomFiber mountReactDom 91
 
   overhead:
     runs-on: ubuntu-latest

.nvmrc

@@ -1 +1 @@
-v14.20.0
+v20.11.1

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 Currently the process of updating the version of the packages is mostly manual. Before you start, first you need to make sure you have the permissions to publish the packages.
 
-- If there is a release branch (see __Release candidate__ below) that hasn't been merged to `main` yet now is the time to do so.
+- If there is a release branch (see **Release candidate** below) that hasn't been merged to `main` yet now is the time to do so.
 - Make sure that you are logged in into your `npm` account. Use the command `yarn npm login` on the project folder to do this.
 - While on the `main` branch.
 - Perform a search an replace on all "package.json" files from the old version to the new. (ex `0.1.4` to `0.2.0`).
@@ -25,4 +25,4 @@ Currently the process of updating the version of the packages is mostly manual.
 - Create an annotated git tag by running `git tag -a v0.4.0-rc.0` (replace with the version). The tag message can be the version again.
 - Push commit and the tag `git push --follow-tags`.
 - Publish the packages by running `yarn publish --tag rc` (it will also build the packages).
-- We are currently not doing release notes for release candidates so you are all done! 🎉
+- We are currently not doing release notes for release candidates so you are all done! 🎉

examples/benchmarking/package.json

@@ -9,10 +9,10 @@
     "compare": "ts-node compare.ts"
   },
   "dependencies": {
-    "@react-facet/core": "0.5.3",
-    "@react-facet/dom-fiber": "0.5.3",
-    "@react-facet/shared-facet": "0.5.3",
-    "@react-facet/spring": "0.5.3",
+    "@react-facet/core": "0.6.1",
+    "@react-facet/dom-fiber": "0.6.1",
+    "@react-facet/shared-facet": "0.6.1",
+    "@react-facet/spring": "0.6.1",
     "ramda": "^0.27.1",
     "react": "18.2.0",
     "react-dom": "^18.2.0"
@@ -28,7 +28,7 @@
     "ts-loader": "^9.2.5",
     "ts-node": "^10.3.1",
     "typescript": "^4.8.2",
-    "webpack": "^5.51.1",
+    "webpack": "^5.91.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.0.0"
   }

packages/@react-facet/core/package.json

@@ -29,7 +29,7 @@
   "homepage": "https://react-facet.mojang.com/",
   "bugs": "https://github.com/Mojang/ore-ui/issues",
   "license": "MIT",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "main": "src/index.ts",
   "publishConfig": {
     "main": "dist/index.js",
@@ -44,7 +44,7 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@react-facet/dom-fiber-testing-library": "0.5.3",
+    "@react-facet/dom-fiber-testing-library": "0.6.1",
     "@types/react": "^18.0.8",
     "@types/react-reconciler": "^0.28.0",
     "@types/rimraf": "^3",

packages/@react-facet/core/src/components/Map.spec.tsx

@@ -149,3 +149,21 @@ it('updates only items that have changed', () => {
   expect(mock).toHaveBeenCalledTimes(1)
   expect(mock).toHaveBeenCalledWith({ a: '6' })
 })
+
+it('provides the length of the array', () => {
+  const data = createFacet({
+    initialValue: [{ a: '1' }, { a: '2' }, { a: '3' }],
+  })
+
+  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, length) => <ExampleContent index={index} length={length} />}</Map>
+  }
+
+  const { getByTestId } = render(<Example />)
+
+  expect(getByTestId('length')).toHaveTextContent('3')
+})

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) => ReactElement | null
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck?: EqualityCheck<T>
 }
 
 export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
-  // When mounting lists, we always want to defer
-  const countValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const lengthValue = useFacetUnwrap(useFacetMap((array) => array.length, [], [array]))
+  const lengthNumber = lengthValue !== NO_VALUE ? lengthValue : 0
 
   return (
     <>
@@ -23,13 +23,14 @@ export const Map = <T,>({ array, children, equalityCheck }: MapProps<T>) => {
               key={index}
               arrayFacet={array}
               index={index}
+              length={lengthNumber}
               equalityCheck={equalityCheck}
               children={children}
             />
           ) : (
-            <MapChild<T> key={index} arrayFacet={array} index={index} children={children} />
+            <MapChild<T> key={index} arrayFacet={array} index={index} length={lengthNumber} children={children} />
           ),
-        countValue !== NO_VALUE ? countValue : 0,
+        lengthNumber,
       )}
     </>
   )
@@ -38,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
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
   equalityCheck: EqualityCheck<T>
 }
 
-const MapChildMemo = <T,>({ arrayFacet, index, 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]
@@ -52,16 +54,17 @@ const MapChildMemo = <T,>({ arrayFacet, index, children, equalityCheck }: MapChi
     [arrayFacet],
     equalityCheck,
   )
-  return children(childFacet, index)
+  return children(childFacet, index, length)
 }
 
 type MapChildProps<T> = {
   arrayFacet: Facet<T[]>
   index: number
-  children: (item: Facet<T>, index: number) => ReactElement | null
+  length: number
+  children: (item: Facet<T>, index: number, length: number) => ReactElement | null
 }
 
-const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
+const MapChild = <T,>({ arrayFacet, index, length, children }: MapChildProps<T>) => {
   const childFacet = useFacetMap(
     (array) => {
       if (index < array.length) return array[index]
@@ -71,7 +74,7 @@ const MapChild = <T,>({ arrayFacet, index, children }: MapChildProps<T>) => {
     [arrayFacet],
   )
 
-  return children(childFacet, index)
+  return children(childFacet, index, length)
 }
 
 interface TimesFn<T> {

packages/@react-facet/core/src/hooks/useFacetUnwrap.spec.tsx

@@ -228,7 +228,7 @@ it('does not trigger a re-render when changing a facet from undefined to undefin
 })
 
 it('supports custom equality checks', () => {
-  const value = {}
+  const value = { prop: 'initial' }
   const demoFacet = createFacet({ initialValue: value })
 
   // Dummy equality check that always returns its not equal
@@ -267,4 +267,18 @@ it('supports custom equality checks', () => {
   expect(check).toHaveBeenCalledTimes(1) // but the check should be executed
   expect(check).toHaveBeenCalledWith(value) // passing the value (which should be the same)
   expect(renderedMock).toHaveBeenCalledTimes(1) // and since the equality check always returns "false", we have a render
+
+  jest.clearAllMocks()
+
+  const newValue = { prop: 'new' }
+
+  // If we update with a new object,
+  act(() => {
+    demoFacet.set(newValue)
+  })
+
+  expect(equalityCheck).toHaveBeenCalledTimes(0) // equality check was already initialized
+  expect(check).toHaveBeenCalledTimes(1) // but the check should be executed
+  expect(check).toHaveBeenCalledWith(newValue) // passing the new value
+  expect(renderedMock).toHaveBeenCalledTimes(1) // and since the equality check always returns "false", we have a render
 })

packages/@react-facet/core/src/hooks/useFacetUnwrap.ts

@@ -61,7 +61,7 @@ export function useFacetUnwrap<T extends Value>(
           return { value }
         }
 
-        if (previousValue !== NO_VALUE && isEqual(previousValue)) {
+        if (previousValue !== NO_VALUE && isEqual(value)) {
           return previousState
         }
 

packages/@react-facet/core/src/mapFacets/mapFacetArrayCached.ts

@@ -9,9 +9,25 @@ export function mapFacetArrayCached<M>(
 ): Facet<M> {
   const initialValues = facets.map((facet) => facet.get())
   const hasAllValues = initialValues.reduce<boolean>((prev, curr) => prev && curr !== NO_VALUE, true)
-  return createFacet<M>({
+  const cachedFacet = createFacet<M>({
     // pass the equalityCheck to the mapIntoObserveArray to prevent even triggering the observable
     startSubscription: mapIntoObserveArray(facets, fn, equalityCheck),
     initialValue: hasAllValues ? fn(...initialValues) : NO_VALUE,
   })
+
+  return {
+    get: () => {
+      const cachedValue = cachedFacet.get()
+      if (cachedValue !== NO_VALUE) return cachedValue
+
+      const dependencyValues = facets.map((facet) => facet.get())
+      const hasAllValues = dependencyValues.reduce<boolean>((acc, value) => acc && value !== NO_VALUE, true)
+      if (!hasAllValues) return NO_VALUE
+
+      const mappedValue = fn(...dependencyValues)
+      if (mappedValue !== NO_VALUE) cachedFacet.set(mappedValue)
+      return mappedValue
+    },
+    observe: cachedFacet.observe,
+  }
 }

packages/@react-facet/core/src/mapFacets/mapFacetArrayLightweight.ts

@@ -8,11 +8,11 @@ export function mapFacetArrayLightweight<M>(
 ): Facet<M> {
   return {
     get: () => {
-      const values = facets.map((facet) => facet.get())
-      const hasAllValues = values.reduce<boolean>((acc, value) => acc && value !== NO_VALUE, true)
+      const dependencyValues = facets.map((facet) => facet.get())
+      const hasAllValues = dependencyValues.reduce<boolean>((acc, value) => acc && value !== NO_VALUE, true)
       if (!hasAllValues) return NO_VALUE
 
-      return fn(...values)
+      return fn(...dependencyValues)
     },
     observe: mapIntoObserveArray(facets, fn, equalityCheck),
   }

packages/@react-facet/core/src/mapFacets/mapFacetSingleCached.ts

@@ -3,14 +3,29 @@ import { mapIntoObserveSingle } from './mapIntoObserveSingle'
 import { createFacet } from '../facet'
 
 export function mapFacetSingleCached<T, M>(
-  facets: Facet<T>,
+  facet: Facet<T>,
   fn: (value: T) => M | NoValue,
   equalityCheck?: EqualityCheck<M>,
 ): Facet<M> {
-  const initialValue = facets.get()
-  return createFacet<M>({
+  const initialValue = facet.get()
+  const cachedFacet = createFacet<M>({
     // pass the equalityCheck to the mapIntoObserveSingle to prevent even triggering the observable
-    startSubscription: mapIntoObserveSingle(facets, fn, equalityCheck),
+    startSubscription: mapIntoObserveSingle(facet, fn, equalityCheck),
     initialValue: initialValue !== NO_VALUE ? fn(initialValue) : NO_VALUE,
   })
+
+  return {
+    get: () => {
+      const cachedValue = cachedFacet.get()
+      if (cachedValue !== NO_VALUE) return cachedValue
+
+      const dependencyValue = facet.get()
+      if (dependencyValue === NO_VALUE) return NO_VALUE
+
+      const mappedValue = fn(dependencyValue)
+      if (mappedValue !== NO_VALUE) cachedFacet.set(mappedValue)
+      return mappedValue
+    },
+    observe: cachedFacet.observe,
+  }
 }

packages/@react-facet/core/src/mapFacets/mapFacetSingleLightweight.ts

@@ -8,10 +8,10 @@ export function mapFacetSingleLightweight<T, M>(
 ): Facet<M> {
   return {
     get: () => {
-      const value = facet.get()
-      if (value === NO_VALUE) return NO_VALUE
+      const dependencyValue = facet.get()
+      if (dependencyValue === NO_VALUE) return NO_VALUE
 
-      return fn(value)
+      return fn(dependencyValue)
     },
 
     observe: mapIntoObserveSingle(facet, fn, equalityCheck),

packages/@react-facet/core/src/mapFacets/mapFacets.spec.ts

@@ -124,6 +124,67 @@ describe('mapFacetsCached WITH an initial value', () => {
     // check that the map was called just once
     expect(mapFunction).toHaveBeenCalledTimes(1)
   })
+
+  it('gets NO_VALUE as a value from a single source if it also has NO_VALUE', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceFacet = createFacet({ initialValue: NO_VALUE })
+    const mapFacet = mapFacetsCached([sourceFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe(NO_VALUE)
+  })
+
+  it('gets NO_VALUE as a value from multiple sources if they also have NO_VALUE', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceAFacet = createFacet({ initialValue: 'initial value' })
+    const sourceBFacet = createFacet({ initialValue: NO_VALUE })
+    const mapFacet = mapFacetsCached([sourceAFacet, sourceBFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe(NO_VALUE)
+  })
+
+  it('can get the mapped value from a single source before any subscription', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceFacet = createFacet({ initialValue: 'initial value' })
+    const mapFacet = mapFacetsCached([sourceFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe('dummy')
+  })
+
+  it('can get the mapped value from multiple sources before any subscription', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceAFacet = createFacet({ initialValue: 'initial value' })
+    const sourceBFacet = createFacet({ initialValue: 'initial value' })
+    const mapFacet = mapFacetsCached([sourceAFacet, sourceBFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe('dummy')
+  })
+
+  it('caches calls to the mapFunction through a get call before any subscription, given a single source', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceFacet = createFacet({ initialValue: 'initial value' })
+    const mapFacet = mapFacetsCached([sourceFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe('dummy')
+    expect(mapFunction).toHaveBeenCalledTimes(1)
+
+    mapFunction.mockClear()
+    expect(mapFacet.get()).toBe('dummy')
+    expect(mapFunction).not.toHaveBeenCalled()
+  })
+
+  it('caches calls to the mapFunction through a get call before any subscription, given multiple sources', () => {
+    const mapFunction = jest.fn().mockReturnValue('dummy')
+    const sourceAFacet = createFacet({ initialValue: 'initial value' })
+    const sourceBFacet = createFacet({ initialValue: 'initial value' })
+    const mapFacet = mapFacetsCached([sourceAFacet, sourceBFacet], mapFunction, () => () => false)
+
+    expect(mapFacet.get()).toBe('dummy')
+    expect(mapFunction).toHaveBeenCalledTimes(1)
+
+    mapFunction.mockClear()
+    expect(mapFacet.get()).toBe('dummy')
+    expect(mapFunction).not.toHaveBeenCalled()
+  })
 })
 
 describe('mapFacetsLightweight', () => {

packages/@react-facet/dom-components/package.json

@@ -29,7 +29,7 @@
   "homepage": "https://react-facet.mojang.com/",
   "bugs": "https://github.com/Mojang/ore-ui/issues",
   "license": "MIT",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "main": "src/index.tsx",
   "publishConfig": {
     "main": "dist/index.js",
@@ -41,12 +41,12 @@
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "@react-facet/core": "0.5.3",
+    "@react-facet/core": "0.6.1",
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@react-facet/core": "0.5.3",
-    "@react-facet/dom-fiber-testing-library": "0.5.3",
+    "@react-facet/core": "0.6.1",
+    "@react-facet/dom-fiber-testing-library": "0.6.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/react": "^18.0.8",
     "@types/rimraf": "^3",