feat(jsx/dom): support createContext and useContext in jsx/dom

deno_dist/jsx/context.ts

@@ -0,0 +1,47 @@
+import { raw } from '../helper/html/index.ts'
+import type { HtmlEscapedString } from '../utils/html.ts'
+import { createContextProviderFunction } from './dom/context.ts'
+import { RENDER_TO_DOM } from './dom/render.ts'
+import { JSXFragmentNode } from './index.ts'
+import type { FC } from './index.ts'
+
+export interface Context<T> {
+  values: T[]
+  Provider: FC<{ value: T }>
+}
+
+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)
+      const string = props.children
+        ? (Array.isArray(props.children)
+            ? new JSXFragmentNode('', {}, props.children)
+            : props.children
+          ).toString()
+        : ''
+      values.pop()
+
+      if (string instanceof Promise) {
+        return Promise.resolve().then<HtmlEscapedString>(async () => {
+          values.push(props.value)
+          const awaited = await string
+          const promiseRes = raw(awaited, (awaited as HtmlEscapedString).callbacks)
+          values.pop()
+          return promiseRes
+        })
+      } else {
+        return raw(string)
+      }
+    },
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(context.Provider as any)[RENDER_TO_DOM] = createContextProviderFunction(values)
+  return context
+}
+
+export const useContext = <T>(context: Context<T>): T => {
+  return context.values.at(-1) as T
+}

deno_dist/jsx/dom/context.ts

@@ -0,0 +1,39 @@
+import type { Child } from '../index.ts'
+import type { Context } from '../context.ts'
+import { Fragment } from './jsx-runtime.ts'
+import { ERROR_HANDLER } from './render.ts'
+
+export const createContextProviderFunction =
+  <T>(values: T[]) =>
+  ({ value, children }: { value: T; children: Child[] }) => {
+    const res = Fragment({
+      children: [
+        {
+          tag: () => {
+            values.push(value)
+          },
+        },
+        ...(children as Child[]),
+        {
+          tag: () => {
+            values.pop()
+          },
+        },
+      ],
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(res as any)[ERROR_HANDLER] = (err: unknown) => {
+      values.pop()
+      throw err
+    }
+    return res
+  }
+
+export const createContext = <T>(defaultValue: T): Context<T> => {
+  const values = [defaultValue]
+  return {
+    values,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Provider: createContextProviderFunction(values) as any,
+  }
+}

deno_dist/jsx/dom/index.ts

@@ -1,2 +1,5 @@
 export { render } from './render.ts'
 export { Suspense, ErrorBoundary } from './components.ts'
+export { useContext } from '../context.ts'
+export type { Context } from '../context.ts'
+export { createContext } from './context.ts'

deno_dist/jsx/index.ts

@@ -2,6 +2,7 @@ import { raw } from '../helper/html/index.ts'
 import { escapeToBuffer, stringBufferToString } from '../utils/html.ts'
 import type { StringBuffer, HtmlEscaped, HtmlEscapedString } from '../utils/html.ts'
 import type { IntrinsicElements as IntrinsicElementsDefined } from './intrinsic-elements.ts'
+
 export { ErrorBoundary } from './components.ts'
 export { Suspense } from './streaming.ts'
 export {
@@ -15,6 +16,8 @@ export {
   useDeferredValue,
 } from './hooks/index.ts'
 export type { RefObject } from './hooks/index.ts'
+export { createContext, useContext } from './context.ts'
+export type { Context } from './context.ts'
 
 export const HONO_COMPONENT = 'hono-component'
 export const HONO_COMPONENT_ID = 'hono-component-id'
@@ -235,7 +238,7 @@ class JSXFunctionNode extends JSXNode {
   }
 }
 
-class JSXFragmentNode extends JSXNode {
+export class JSXFragmentNode extends JSXNode {
   toStringToBuffer(buffer: StringBuffer): void {
     childrenToStringToBuffer(this.children, buffer)
   }
@@ -319,41 +322,3 @@ export const Fragment = ({
     Array.isArray(children) ? children : children ? [children] : []
   ) as never
 }
-
-export interface Context<T> {
-  values: T[]
-  Provider: FC<{ value: T }>
-}
-
-export const createContext = <T>(defaultValue: T): Context<T> => {
-  const values = [defaultValue]
-  return {
-    values,
-    Provider(props): HtmlEscapedString | Promise<HtmlEscapedString> {
-      values.push(props.value)
-      const string = props.children
-        ? (Array.isArray(props.children)
-            ? new JSXFragmentNode('', {}, props.children)
-            : props.children
-          ).toString()
-        : ''
-      values.pop()
-
-      if (string instanceof Promise) {
-        return Promise.resolve().then<HtmlEscapedString>(async () => {
-          values.push(props.value)
-          const awaited = await string
-          const promiseRes = raw(awaited, (awaited as HtmlEscapedString).callbacks)
-          values.pop()
-          return promiseRes
-        })
-      } else {
-        return raw(string)
-      }
-    },
-  }
-}
-
-export const useContext = <T>(context: Context<T>): T => {
-  return context.values[context.values.length - 1]
-}

src/jsx/context.ts

@@ -0,0 +1,47 @@
+import { raw } from '../helper/html'
+import type { HtmlEscapedString } from '../utils/html'
+import { createContextProviderFunction } from './dom/context'
+import { RENDER_TO_DOM } from './dom/render'
+import { JSXFragmentNode } from '.'
+import type { FC } from '.'
+
+export interface Context<T> {
+  values: T[]
+  Provider: FC<{ value: T }>
+}
+
+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)
+      const string = props.children
+        ? (Array.isArray(props.children)
+            ? new JSXFragmentNode('', {}, props.children)
+            : props.children
+          ).toString()
+        : ''
+      values.pop()
+
+      if (string instanceof Promise) {
+        return Promise.resolve().then<HtmlEscapedString>(async () => {
+          values.push(props.value)
+          const awaited = await string
+          const promiseRes = raw(awaited, (awaited as HtmlEscapedString).callbacks)
+          values.pop()
+          return promiseRes
+        })
+      } else {
+        return raw(string)
+      }
+    },
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(context.Provider as any)[RENDER_TO_DOM] = createContextProviderFunction(values)
+  return context
+}
+
+export const useContext = <T>(context: Context<T>): T => {
+  return context.values.at(-1) as T
+}

src/jsx/dom/context.test.tsx

@@ -0,0 +1,131 @@
+import { JSDOM } from 'jsdom'
+// run tests by old style jsx default
+// hono/jsx/jsx-runtime and hono/jsx/dom/jsx-runtime are tested in their respective settings
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { jsx, Fragment } from '..'
+import { createContext as createContextCommon, useContext as useContextCommon } from '..' // for common
+import { use, Suspense } from '..'
+import { createContext as createContextDom, useContext as useContextDom } from '.' // for dom
+import { render } from '.'
+
+runner('Common', createContextCommon, useContextCommon)
+runner('DOM', createContextDom, useContextDom)
+
+function runner(
+  name: string,
+  createContext: typeof createContextCommon,
+  useContext: typeof useContextCommon
+) {
+  describe(name, () => {
+    describe('Context', () => {
+      let dom: JSDOM
+      let root: HTMLElement
+      beforeEach(() => {
+        dom = new JSDOM('<html><body><div id="root"></div></body></html>', {
+          runScripts: 'dangerously',
+        })
+        global.document = dom.window.document
+        global.HTMLElement = dom.window.HTMLElement
+        global.Text = dom.window.Text
+        root = document.getElementById('root') as HTMLElement
+      })
+
+      it('simple context', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <Context.Provider value={1}>
+              <Content />
+            </Context.Provider>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p>')
+      })
+
+      it('multiple provider', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+              </Context.Provider>
+              <Context.Provider value={2}>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><p>2</p>')
+      })
+
+      it('nested provider', async () => {
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+                <Context.Provider value={3}>
+                  <Content />
+                </Context.Provider>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><p>3</p><p>1</p>')
+      })
+
+      it('inside Suspense', async () => {
+        const promise = Promise.resolve(2)
+        const AsyncComponent = () => {
+          const num = use(promise)
+          return <p>{num}</p>
+        }
+        const Context = createContext(0)
+        const Content = () => {
+          const num = useContext(Context)
+          return <p>{num}</p>
+        }
+        const Component = () => {
+          return (
+            <>
+              <Context.Provider value={1}>
+                <Content />
+                <Suspense fallback={<div>Loading...</div>}>
+                  <Context.Provider value={3}>
+                    <Content />
+                    <AsyncComponent />
+                  </Context.Provider>
+                </Suspense>
+                <Content />
+              </Context.Provider>
+            </>
+          )
+        }
+        const App = <Component />
+        render(App, root)
+        expect(root.innerHTML).toBe('<p>1</p><div>Loading...</div><p>1</p>')
+      })
+    })
+  })
+}

src/jsx/dom/context.ts

@@ -0,0 +1,39 @@
+import type { Child } from '..'
+import type { Context } from '../context'
+import { Fragment } from './jsx-runtime'
+import { ERROR_HANDLER } from './render'
+
+export const createContextProviderFunction =
+  <T>(values: T[]) =>
+  ({ value, children }: { value: T; children: Child[] }) => {
+    const res = Fragment({
+      children: [
+        {
+          tag: () => {
+            values.push(value)
+          },
+        },
+        ...(children as Child[]),
+        {
+          tag: () => {
+            values.pop()
+          },
+        },
+      ],
+    })
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(res as any)[ERROR_HANDLER] = (err: unknown) => {
+      values.pop()
+      throw err
+    }
+    return res
+  }
+
+export const createContext = <T>(defaultValue: T): Context<T> => {
+  const values = [defaultValue]
+  return {
+    values,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Provider: createContextProviderFunction(values) as any,
+  }
+}

src/jsx/dom/index.ts

@@ -1,2 +1,5 @@
 export { render } from './render'
 export { Suspense, ErrorBoundary } from './components'
+export { useContext } from '../context'
+export type { Context } from '../context'
+export { createContext } from './context'