Added createFacetContext

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 <fast-text text={stringFacet}></fast-text>
+  }
+
+  const result = render(<Component />)
+
+  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 <fast-text text={stringFacet}></fast-text>
+  }
+  const newValue = 'newValue'
+  const App = () => {
+    const [facet] = useFacetState(newValue)
+
+    return (
+      <context.Provider value={facet}>
+        <Component />
+      </context.Provider>
+    )
+  }
+  const result = render(<App />)
+
+  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 <fast-text text={stringFacet}></fast-text>
+  }
+  const newValue = 'newValue'
+  let setFacet: Setter<string>
+  const hasRenderedMock = jest.fn()
+  const App = () => {
+    const [stringFacet, setStringFacet] = useFacetState(newValue)
+    setFacet = setStringFacet
+    hasRenderedMock()
+    return (
+      <context.Provider value={stringFacet}>
+        <Component />
+      </context.Provider>
+    )
+  }
+  const result = render(<App />)
+
+  expect(hasRenderedMock).toBeCalledTimes(1)
+  expect(result.baseElement).toContainHTML(newValue)
+  const evenNewerValue = 'newNewValue'
+  act(() => {
+    setFacet(evenNewerValue)
+  })
+
+  expect(result.baseElement).toContainHTML(evenNewerValue)
+  expect(hasRenderedMock).toBeCalledTimes(1)
+})

packages/@react-facet/core/src/createFacetContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+import { Facet } from './types'
+
+export function createFacetContext<T>(initialValue: T) {
+  const facet: Facet<T> = {
+    get: () => initialValue,
+    observe: (listener) => {
+      if (process.env.NODE_ENV !== 'production') {
+        console.log('Missing Provider')
+      }
+      listener(initialValue)
+      return () => {}
+    },
+  }
+  const context = createContext(facet)
+  return context
+}

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'