Support for Gameface's cohinline attribute

For more information check Gameface's documentation: https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/#experimental-inline-layout-for-paragraph-elements

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
     "cSpell.words": [
+        "cohinline",
+        "Gameface",
         "gamepad"
     ],
     "typescript.tsdk": "./node_modules/typescript/lib"

packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx

@@ -77,6 +77,11 @@ describe('mount', () => {
       expect(root?.innerHTML ?? '').toBe('<input disabled="">')
     })
 
+    it('sets cohinline', () => {
+      render(<fast-p cohinline />)
+      expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    })
+
     it('sets maxlength', () => {
       render(<input type="text" maxLength={10} />)
       expect(root?.innerHTML ?? '').toBe('<input maxlength="10" type="text">')
@@ -370,6 +375,16 @@ describe('mount', () => {
       expect(root?.innerHTML ?? '').toBe('<input>')
     })
 
+    it('sets cohinline', () => {
+      const cohinlineFacet = createFacet({ initialValue: true })
+
+      render(<fast-p cohinline={cohinlineFacet} />)
+      expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+
+      cohinlineFacet.set(false)
+      expect(root?.innerHTML ?? '').toBe('<p></p>')
+    })
+
     it('sets maxlength', () => {
       const maxLengthFacet = createFacet({ initialValue: 10 })
 
@@ -1134,6 +1149,27 @@ describe('update', () => {
     expect(root?.innerHTML ?? '').toBe('<input>')
   })
 
+  it('updates cohinline', () => {
+    const MockComponent = () => {
+      const [cohinline, setCohinline] = useState<boolean | undefined>(true)
+      useEffect(() => {
+        setTimeout(() => setCohinline(false), 1)
+        setTimeout(() => setCohinline(true), 2)
+        setTimeout(() => setCohinline(undefined), 3)
+      }, [])
+      return <fast-p cohinline={cohinline} />
+    }
+
+    render(<MockComponent />)
+    expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p cohinline=""></p>')
+    jest.advanceTimersByTime(1)
+    expect(root?.innerHTML ?? '').toBe('<p></p>')
+  })
+
   it('updates maxLength', () => {
     const MockComponent = () => {
       const [maxLength, setMaxLength] = useState<number | undefined>(1)

packages/@react-facet/dom-fiber/src/setupHostConfig.ts

@@ -308,6 +308,9 @@ export const setupHostConfig = (): HostConfig<
         newProps['data-x-ray'] != null
           ? setupAttributeUpdate('data-x-ray', newProps['data-x-ray'], element)
           : undefined,
+
+      cohinline:
+        newProps.cohinline != null ? setupAttributeUpdate('cohinline', newProps.cohinline, element) : undefined,
     }
   },
 
@@ -881,6 +884,16 @@ export const setupHostConfig = (): HostConfig<
       }
     }
 
+    if (newProps.cohinline !== oldProps.cohinline) {
+      instance.cohinline?.()
+
+      if (newProps.cohinline == null) {
+        element.removeAttribute('cohinline')
+      } else {
+        instance.cohinline = setupAttributeUpdate('cohinline', newProps.cohinline, element)
+      }
+    }
+
     if (newProps.onClick !== oldProps.onClick) {
       if (oldProps.onClick) element.removeEventListener('click', oldProps.onClick)
       if (newProps.onClick) element.addEventListener('click', newProps.onClick)

packages/@react-facet/dom-fiber/src/types.ts

@@ -175,6 +175,12 @@ export type ElementProps<T> = PointerEvents &
     stopOpacity?: FacetProp<string | undefined>
     fontFamily?: FacetProp<string | undefined>
     fontSize?: FacetProp<string | undefined>
+
+    /**
+     * Support for Gameface's Experimental inline layout for paragraph elements
+     * More info: https://docs.coherent-labs.com/cpp-gameface/what_is_gfp/htmlfeaturesupport/#experimental-inline-layout-for-paragraph-elements
+     */
+    cohinline?: FacetProp<boolean | undefined>
   }
 
 export type TextProps = {
@@ -242,6 +248,7 @@ export type ElementContainer = {
   stopOpacity?: Unsubscribe
   fontFamily?: Unsubscribe
   fontSize?: Unsubscribe
+  cohinline?: Unsubscribe
 }
 
 export const isElementContainer = (value: ElementContainer | TextContainer): value is ElementContainer => {