fix: add "key" attribute to suppress react "key" warnings (#238)

Fixes #233

* fix: add key attribute to placeholder template element

To suppress react key warnings in SSR.

* fix(client): add key attribute to each nested element in runtime

To suppress react key warnings in runtime.

* refactor: use `createElement` instead of `jsx` for compatibility with react

package.json

@@ -129,6 +129,7 @@
     "@types/node": "^20.10.5",
     "eslint": "^9.10.0",
     "glob": "^10.3.10",
+    "happy-dom": "^15.11.6",
     "hono": "4.4.13",
     "np": "7.7.0",
     "prettier": "^3.1.1",

src/client/client.ts

@@ -1,5 +1,4 @@
-import { render } from 'hono/jsx/dom'
-import { jsx as jsxFn } from 'hono/jsx/dom/jsx-runtime'
+import { render, createElement as createElementHono } from 'hono/jsx/dom'
 import {
   COMPONENT_EXPORT,
   COMPONENT_NAME,
@@ -61,7 +60,7 @@ export const createClient = async (options?: ClientOptions) => {
           const props = JSON.parse(serializedProps ?? '{}') as Record<string, unknown>
 
           const hydrate = options?.hydrate ?? render
-          const createElement = options?.createElement ?? jsxFn
+          const createElement = options?.createElement ?? createElementHono
 
           let maybeTemplate = element.childNodes[element.childNodes.length - 1]
           while (maybeTemplate?.nodeName === 'TEMPLATE') {

src/client/runtime.test.ts

@@ -0,0 +1,21 @@
+import { buildCreateChildrenFn } from './runtime'
+
+describe('buildCreateChildrenFn', () => {
+  it('should set key for children', async () => {
+    const createElement = vi.fn()
+    const importComponent = vi.fn()
+    const createChildren = buildCreateChildrenFn(createElement, importComponent)
+
+    const div = document.createElement('div')
+    div.innerHTML = '<span>test</span><div>test2</div>'
+    const result = await createChildren(div.childNodes)
+    expect(createElement).toHaveBeenNthCalledWith(1, 'SPAN', {
+      children: ['test'],
+      key: 1,
+    })
+    expect(createElement).toHaveBeenNthCalledWith(2, 'DIV', {
+      children: ['test2'],
+      key: 2,
+    })
+  })
+})

src/client/runtime.ts

@@ -7,6 +7,7 @@ export const buildCreateChildrenFn = (
   createElement: CreateElement,
   importComponent: ImportComponent
 ): CreateChildren => {
+  let keyIndex = 0
   const setChildrenFromTemplate = async (props: { children?: Node[] }, element: HTMLElement) => {
     const maybeTemplate = element.childNodes[element.childNodes.length - 1]
     if (
@@ -26,7 +27,10 @@ export const buildCreateChildrenFn = (
     for (let i = 0; i < attributes.length; i++) {
       props[attributes[i].name] = attributes[i].value
     }
-    return createElement(element.nodeName, props)
+    return createElement(element.nodeName, {
+      key: ++keyIndex,
+      ...props,
+    })
   }
   const createChildren = async (childNodes: NodeListOf<ChildNode>): Promise<Node[]> => {
     const children = []
@@ -117,7 +121,12 @@ export const buildCreateChildrenFn = (
         if (component) {
           const props = JSON.parse(child.getAttribute(DATA_SERIALIZED_PROPS) || '{}')
           await setChildrenFromTemplate(props, child)
-          children.push(await createElement(component, props))
+          children.push(
+            await createElement(component, {
+              key: ++keyIndex,
+              ...props,
+            })
+          )
         } else {
           children.push(await createElementFromHTMLElement(child))
         }

src/vite/components/honox-island.test.tsx

@@ -0,0 +1,18 @@
+import { HonoXIsland } from './honox-island'
+
+const TestComponent = () => <div>Test</div>
+
+describe('HonoXIsland', () => {
+  it('should set key for children', () => {
+    const element = HonoXIsland({
+      componentName: 'Test',
+      componentExport: 'Test',
+      Component: () => <div>Test</div>,
+      props: {
+          children: <TestComponent />,
+      },
+    })
+    // XXX: tested by internal implementation
+    expect((element as any).children[1][0].key).toBe('children')
+  })
+})

src/vite/components/honox-island.tsx

@@ -57,7 +57,7 @@ export const HonoXIsland = ({
         <Component {...props} />
       </IslandContext.Provider>
       {Object.entries(elementProps).map(([key, children]) => (
-        <template {...{ [DATA_HONO_TEMPLATE]: key }}>
+        <template {...{ [DATA_HONO_TEMPLATE]: key }} key={key}>
           <IslandContext.Provider value={{ ...islandState, [inChildren]: true }}>
             {children}
           </IslandContext.Provider>

vitest.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitest/config'
 export default defineConfig({
   test: {
     globals: true,
+    environment: 'happy-dom',
     exclude: ['node_modules', 'dist', '.git', '.cache', 'test-presets', 'sandbox', 'examples'],
   },
 })

yarn.lock

@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: 543A293A66C80C95-f7ab18b32b9678e2-D7579C357F066BE3-94c80f775e73166d
+# bun ./bun.lockb --hash: 4D4CD2136DCE3975-f38db2e954b12206-5D94700DFFA576F1-3e4dda30ab363703
 
 
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.24.7":
@@ -2521,6 +2521,15 @@ graphemer@^1.4.0:
   resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
+happy-dom@^15.11.6:
+  version "15.11.6"
+  resolved "https://registry.npmjs.org/happy-dom/-/happy-dom-15.11.6.tgz"
+  integrity sha512-elX7iUTu+5+3b2+NGQc0L3eWyq9jKhuJJ4GpOMxxT/c2pg9O3L5H3ty2VECX0XXZgRmmRqXyOK8brA2hDI6LsQ==
+  dependencies:
+    entities "^4.5.0"
+    webidl-conversions "^7.0.0"
+    whatwg-mimetype "^3.0.0"
+
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz"
@@ -5491,6 +5500,16 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz"