feat(jsx/dom): implement "<Context> as a provider" for compatibility …

…with React 19 (#2962)

src/jsx/context.ts

@@ -5,7 +5,7 @@ import { DOM_RENDERER } from './constants'
 import { createContextProviderFunction } from './dom/context'
 import type { FC, PropsWithChildren } from './'
 
-export interface Context<T> {
+export interface Context<T> extends FC<PropsWithChildren<{ value: T }>> {
   values: T[]
   Provider: FC<PropsWithChildren<{ value: T }>>
 }
@@ -14,33 +14,31 @@ export const globalContexts: Context<unknown>[] = []
 
 export const createContext = <T>(defaultValue: T): Context<T> => {
   const values = [defaultValue]
-  const context: Context<T> = {
-    values,
-    Provider(props): HtmlEscapedString | Promise<HtmlEscapedString> {
-      values.push(props.value)
-      let string
-      try {
-        string = props.children
-          ? (Array.isArray(props.children)
-              ? new JSXFragmentNode('', {}, props.children)
-              : props.children
-            ).toString()
-          : ''
-      } finally {
-        values.pop()
-      }
-
-      if (string instanceof Promise) {
-        return string.then((resString) =>
-          raw(resString, (resString as HtmlEscapedString).callbacks)
-        )
-      } else {
-        return raw(string)
-      }
-    },
-  }
+  const context: Context<T> = ((props): HtmlEscapedString | Promise<HtmlEscapedString> => {
+    values.push(props.value)
+    let string
+    try {
+      string = props.children
+        ? (Array.isArray(props.children)
+            ? new JSXFragmentNode('', {}, props.children)
+            : props.children
+          ).toString()
+        : ''
+    } finally {
+      values.pop()
+    }
+
+    if (string instanceof Promise) {
+      return string.then((resString) => raw(resString, (resString as HtmlEscapedString).callbacks))
+    } else {
+      return raw(string)
+    }
+  }) as Context<T>
+  context.values = values
+  context.Provider = context
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ;(context.Provider as any)[DOM_RENDERER] = createContextProviderFunction(values)
+  ;(context as any)[DOM_RENDERER] = createContextProviderFunction(values)
 
   globalContexts.push(context as Context<unknown>)
 

src/jsx/dom/context.test.tsx

@@ -54,6 +54,24 @@ function runner(
         expect(root.innerHTML).toBe('<p>1</p>')
       })
 
+      it('<Context> as a provider ', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Context value={1}>
+              <Content />
+            </Context>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
       it('simple context with state', async () => {
         const Context = createContext(0)
         const Content = () => {

src/jsx/dom/context.ts

@@ -44,11 +44,9 @@ export const createContextProviderFunction = <T>(values: T[]): Function =>
 
 export const createContext = <T>(defaultValue: T): Context<T> => {
   const values = [defaultValue]
-  const context = {
-    values,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Provider: createContextProviderFunction(values) as any,
-  }
-  globalContexts.push(context)
+  const context: Context<T> = createContextProviderFunction(values) as Context<T>
+  context.values = values
+  context.Provider = context
+  globalContexts.push(context as Context<unknown>)
   return context
 }

src/jsx/index.test.tsx

@@ -618,6 +618,17 @@ describe('Context', () => {
     })
   })
 
+  describe('<Context> as a provider ', () => {
+    it('has a child', () => {
+      const template = (
+        <ThemeContext value='dark'>
+          <Consumer />
+        </ThemeContext>
+      )
+      expect(template.toString()).toBe('<span>dark</span>')
+    })
+  })
+
   it('default value', () => {
     const template = <Consumer />
     expect(template.toString()).toBe('<span>light</span>')