fix(jsx): preserve the state of element even if it is repeatedly evaluated by children

deno_dist/jsx/dom/render.ts

@@ -435,6 +435,9 @@ const buildNode = (node: Child): Node | undefined => {
  return [node.toString(), true] as NodeString
  } else {
  if (typeof (node as JSXNode).tag === 'function') {
+ if ((node as NodeObject)[DOM_STASH]) {
+ node = { ...node } as NodeObject
+ }
  ;(node as NodeObject)[DOM_STASH] = [0, []]
  } else {
  const ns = nameSpaceMap[(node as JSXNode).tag as string]

src/jsx/dom/index.test.tsx

@@ -1,5 +1,5 @@
 import { JSDOM } from 'jsdom'
-import type { FC } from '..'
+import type { FC, Child } from '..'
 // 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
@@ -771,14 +771,73 @@ describe('DOM', () => {
  '<div><p>Count: 0</p><button>+</button><div><p>Child Count: 0</p><button>+</button></div></div>'
  )
  const [button, childButton] = root.querySelectorAll('button')
- for (let i = 0; i < 5; i++) {
+ for (let i = 0; i < 3; i++) {
+ childButton.click()
+ await Promise.resolve()
+ }
+ for (let i = 0; i < 2; i++) {
+ button.click()
+ await Promise.resolve()
+ }
+ for (let i = 0; i < 3; i++) {
+ childButton.click()
+ await Promise.resolve()
+ }
+ for (let i = 0; i < 3; i++) {
+ button.click()
+ await Promise.resolve()
+ }
+ expect(root.innerHTML).toBe(
+ '<div><p>Count: 5</p><button>+</button><div><p>Child Count: 6</p><button>+</button></div></div>'
+ )
+ })
+
+ it('nested useState() with children', async () => {
+ const ChildCounter = () => {
+ const [count, setCount] = useState(0)
+ return (
+ <div>
+ <p>Child Count: {count}</p>
+ <button onClick={() => setCount(count + 1)}>+</button>
+ </div>
+ )
+ }
+ const Counter = ({ children }: { children: Child }) => {
+ const [count, setCount] = useState(0)
+ return (
+ <div>
+ <p>Count: {count}</p>
+ <button onClick={() => setCount(count + 1)}>+</button>
+ {children}
+ </div>
+ )
+ }
+ const app = (
+ <Counter>
+ <ChildCounter />
+ </Counter>
+ )
+ render(app, root)
+ expect(root.innerHTML).toBe(
+ '<div><p>Count: 0</p><button>+</button><div><p>Child Count: 0</p><button>+</button></div></div>'
+ )
+ const [button, childButton] = root.querySelectorAll('button')
+ for (let i = 0; i < 3; i++) {
+ childButton.click()
+ await Promise.resolve()
+ }
+ for (let i = 0; i < 2; i++) {
  button.click()
  await Promise.resolve()
  }
- for (let i = 0; i < 6; i++) {
+ for (let i = 0; i < 3; i++) {
  childButton.click()
  await Promise.resolve()
  }
+ for (let i = 0; i < 3; i++) {
+ button.click()
+ await Promise.resolve()
+ }
  expect(root.innerHTML).toBe(
  '<div><p>Count: 5</p><button>+</button><div><p>Child Count: 6</p><button>+</button></div></div>'
  )

src/jsx/dom/render.ts

@@ -435,6 +435,9 @@ const buildNode = (node: Child): Node | undefined => {
  return [node.toString(), true] as NodeString
  } else {
  if (typeof (node as JSXNode).tag === 'function') {
+ if ((node as NodeObject)[DOM_STASH]) {
+ node = { ...node } as NodeObject
+ }
  ;(node as NodeObject)[DOM_STASH] = [0, []]
  } else {
  const ns = nameSpaceMap[(node as JSXNode).tag as string]