diff --git a/packages/@react-facet/core/src/createFacetContext.spec.tsx b/packages/@react-facet/core/src/createFacetContext.spec.tsx new file mode 100644 index 00000000..08fc2eb1 --- /dev/null +++ b/packages/@react-facet/core/src/createFacetContext.spec.tsx @@ -0,0 +1,73 @@ +import React, { useContext } from 'react' +import { act, render } from '@react-facet/dom-fiber-testing-library' +import { createFacetContext } from './createFacetContext' +import { useFacetState } from './hooks' +import { Setter } from './types' + +it(`has default value`, () => { + const defaultValue = 'defaultValue' + const context = createFacetContext(defaultValue) + const Component = () => { + const stringFacet = useContext(context) + return + } + + const result = render() + + expect(result.baseElement).toContainHTML(defaultValue) +}) + +it(`allows provider to set new value`, () => { + const defaultValue = 'defaultValue' + const context = createFacetContext(defaultValue) + const Component = () => { + const stringFacet = useContext(context) + return + } + const newValue = 'newValue' + const App = () => { + const [facet] = useFacetState(newValue) + + return ( + + + + ) + } + const result = render() + + expect(result.baseElement).toContainHTML(newValue) +}) + +it(`it updates the context value without re-conciliation`, () => { + const defaultValue = 'defaultValue' + const context = createFacetContext(defaultValue) + const Component = () => { + const stringFacet = useContext(context) + return + } + const newValue = 'newValue' + let setFacet: Setter + const hasRenderedMock = jest.fn() + const App = () => { + const [stringFacet, setStringFacet] = useFacetState(newValue) + setFacet = setStringFacet + hasRenderedMock() + return ( + + + + ) + } + const result = render() + + expect(hasRenderedMock).toBeCalledTimes(1) + expect(result.baseElement).toContainHTML(newValue) + const evenNewerValue = 'newNewValue' + act(() => { + setFacet(evenNewerValue) + }) + + expect(result.baseElement).toContainHTML(evenNewerValue) + expect(hasRenderedMock).toBeCalledTimes(1) +}) diff --git a/packages/@react-facet/core/src/createFacetContext.tsx b/packages/@react-facet/core/src/createFacetContext.tsx new file mode 100644 index 00000000..5c4fa8f8 --- /dev/null +++ b/packages/@react-facet/core/src/createFacetContext.tsx @@ -0,0 +1,17 @@ +import { createContext } from 'react' +import { Facet } from './types' + +export function createFacetContext(initialValue: T) { + const facet: Facet = { + get: () => initialValue, + observe: (listener) => { + if (process.env.NODE_ENV !== 'production') { + console.log('Missing Provider') + } + listener(initialValue) + return () => {} + }, + } + const context = createContext(facet) + return context +} diff --git a/packages/@react-facet/core/src/index.ts b/packages/@react-facet/core/src/index.ts index f552af3b..7a668bea 100644 --- a/packages/@react-facet/core/src/index.ts +++ b/packages/@react-facet/core/src/index.ts @@ -1,5 +1,6 @@ export * from './components' export * from './createEqualityChecks' +export * from './createFacetContext' export * from './equalityChecks' export * from './facet' export * from './helpers'