-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rewrite block refs with observableMap, which moves to compose
- Loading branch information
Showing
14 changed files
with
113 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useMemo, useSyncExternalStore } from '@wordpress/element'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import type { ObservableMap } from '../../utils/observable-map'; | ||
|
||
/** | ||
* React hook that lets you observe an individual entry in an `ObservableMap`. | ||
* | ||
* @param map The `ObservableMap` to observe. | ||
* @param name The map key to observe. | ||
*/ | ||
export default function useObservableValue< K, V >( | ||
map: ObservableMap< K, V >, | ||
name: K | ||
): V | undefined { | ||
const [ subscribe, getValue ] = useMemo( | ||
() => [ | ||
( listener: () => void ) => map.subscribe( name, listener ), | ||
() => map.get( name ), | ||
], | ||
[ map, name ] | ||
); | ||
return useSyncExternalStore( subscribe, getValue, getValue ); | ||
} |
42 changes: 42 additions & 0 deletions
42
packages/compose/src/hooks/use-observable-value/test/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { render, screen, act } from '@testing-library/react'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { observableMap } from '../../../utils/observable-map'; | ||
import useObservableValue from '..'; | ||
|
||
describe( 'useObservableValue', () => { | ||
test( 'reacts only to the specified key', () => { | ||
const map = observableMap(); | ||
map.set( 'a', 1 ); | ||
|
||
const MapUI = jest.fn( () => { | ||
const value = useObservableValue( map, 'a' ); | ||
return <div>value is { value }</div>; | ||
} ); | ||
|
||
render( <MapUI /> ); | ||
expect( screen.getByText( /^value is/ ) ).toHaveTextContent( | ||
'value is 1' | ||
); | ||
expect( MapUI ).toHaveBeenCalledTimes( 1 ); | ||
|
||
act( () => { | ||
map.set( 'a', 2 ); | ||
} ); | ||
expect( screen.getByText( /^value is/ ) ).toHaveTextContent( | ||
'value is 2' | ||
); | ||
expect( MapUI ).toHaveBeenCalledTimes( 2 ); | ||
|
||
// check that setting unobserved map key doesn't trigger a render at all | ||
act( () => { | ||
map.set( 'b', 1 ); | ||
} ); | ||
expect( MapUI ).toHaveBeenCalledTimes( 2 ); | ||
} ); | ||
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.