Added support for foreignObject in our custom renderer and a test alongside it (#134)

Author: Shenato

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

@@ -128,6 +128,17 @@ describe('mount', () => {
     })
 
     describe('for svg', () => {
+      it('renders foreignObject and sets dimensions', () => {
+        render(
+          <svg>
+            <foreignObject x="50" y="100" width="150" height="200" />
+          </svg>,
+        )
+        expect(root?.innerHTML ?? '').toBe(
+          '<svg><foreignObject height="200" x="50" width="150" y="100"></foreignObject></svg>',
+        )
+      })
+
       it('sets the d', () => {
         render(<fast-path d="M0,0 L0,10 Z" />)
         expect(root?.innerHTML ?? '').toBe('<path d="M0,0 L0,10 Z"></path>')
@@ -517,6 +528,22 @@ describe('mount', () => {
     })
 
     describe('for svg', () => {
+      it('renders foreignObject and sets dimensions', () => {
+        const xFacet = createFacet({ initialValue: '50' })
+        const yFacet = createFacet({ initialValue: '100' })
+        const widthFacet = createFacet({ initialValue: '150' })
+        const heightFacet = createFacet({ initialValue: '200' })
+
+        render(
+          <svg>
+            <fast-foreignObject x={xFacet} y={yFacet} width={widthFacet} height={heightFacet} />
+          </svg>,
+        )
+        expect(root?.innerHTML ?? '').toBe(
+          '<svg><foreignObject height="200" x="50" width="150" y="100"></foreignObject></svg>',
+        )
+      })
+
       it('sets the d', () => {
         const dFacet = createFacet({ initialValue: 'M0,0 L0,10 Z' })
 
@@ -1213,6 +1240,48 @@ describe('update', () => {
   })
 
   describe('for svg', () => {
+    it('updates foreignObject dimensions', () => {
+      const MockComponent = () => {
+        const [xFacet, setXFacet] = useState<string | undefined>('50')
+        const [yFacet, setYFacet] = useState<string | undefined>('100')
+        const [widthFacet, setWidthFacet] = useState<string | undefined>('150')
+        const [heightFacet, setHeightFacet] = useState<string | undefined>('200')
+
+        useEffect(() => {
+          setTimeout(() => setXFacet('350'), 1)
+          setTimeout(() => setYFacet('400'), 2)
+          setTimeout(() => setWidthFacet('450'), 3)
+          setTimeout(() => setHeightFacet('500'), 4)
+        }, [])
+        return (
+          <svg>
+            <fast-foreignObject x={xFacet} y={yFacet} width={widthFacet} height={heightFacet} />
+          </svg>
+        )
+      }
+
+      render(<MockComponent />)
+      expect(root?.innerHTML ?? '').toBe(
+        '<svg><foreignObject height="200" x="50" width="150" y="100"></foreignObject></svg>',
+      )
+      jest.advanceTimersByTime(1)
+      expect(root?.innerHTML ?? '').toBe(
+        '<svg><foreignObject height="200" x="350" width="150" y="100"></foreignObject></svg>',
+      )
+      jest.advanceTimersByTime(1)
+      expect(root?.innerHTML ?? '').toBe(
+        '<svg><foreignObject height="200" x="350" width="150" y="400"></foreignObject></svg>',
+      )
+      jest.advanceTimersByTime(1)
+      expect(root?.innerHTML ?? '').toBe(
+        '<svg><foreignObject height="200" x="350" width="450" y="400"></foreignObject></svg>',
+      )
+      jest.advanceTimersByTime(1)
+      expect(root?.innerHTML ?? '').toBe(
+        '<svg><foreignObject height="500" x="350" width="450" y="400"></foreignObject></svg>',
+      )
+    })
+
     it('updates d', () => {
       const MockComponent = () => {
         const [d, setD] = useState<string | undefined>('M0,0 L0,10 Z')

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

@@ -1112,6 +1112,7 @@ const fastTypeMapSVG: Record<TypeSVG, keyof SVGElementTagNameMap> = {
   'fast-path': 'path',
   'fast-rect': 'rect',
   'fast-svg': 'svg',
+  'fast-foreignObject': 'foreignObject',
   'fast-use': 'use',
   'fast-polyline': 'polyline',
   'fast-polygon': 'polygon',
@@ -1127,6 +1128,7 @@ const fastTypeMapSVG: Record<TypeSVG, keyof SVGElementTagNameMap> = {
   path: 'path',
   rect: 'rect',
   svg: 'svg',
+  foreignObject: 'foreignObject',
   symbol: 'symbol',
   g: 'g',
   use: 'use',

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

@@ -28,6 +28,7 @@ export type TypeSVG =
   | 'fast-path'
   | 'fast-rect'
   | 'fast-svg'
+  | 'fast-foreignObject'
   | 'fast-use'
   | 'fast-polyline'
   | 'fast-polygon'
@@ -50,6 +51,7 @@ export type TypeSVG =
   | 'polygon'
   | 'linearGradient'
   | 'radialGradient'
+  | 'foreignObject'
   | 'stop'
   | 'text'
   | 'pattern'
@@ -289,6 +291,7 @@ export type FastPathProps = ElementProps<SVGPathElement>
 export type FastRectProps = ElementProps<SVGRectElement>
 export type FastSpanProps = ElementProps<HTMLSpanElement>
 export type FastSvgProps = ElementProps<SVGSVGElement>
+export type FastForeignOBjectProps = ElementProps<SVGForeignObjectElement>
 export type FastTextProps = TextProps
 export type FastUseProps = ElementProps<SVGUseElement>
 export type FastPolylineProps = ElementProps<SVGPolylineElement>
@@ -320,6 +323,7 @@ declare global {
       'fast-span': FastSpanProps
       'fast-text': FastTextProps
       'fast-svg': FastSvgProps
+      'fast-foreignObject': FastForeignOBjectProps
       'fast-use': FastUseProps
       'fast-polyline': FastPolylineProps
       'fast-polygon': FastPolyGonProps