feat(jsx/dom): improve compatibility with React - The 2024 May Update

[usualoma]

Added hook

useInsertionEffect

useInsertionEffect is implemented. https://ja.react.dev/reference/react/useInsertionEffect

Fixed Features

createPortal

When createPortal was called repeatedly in the same context, the DOM was not updated correctly. fixed in 8974135e400cd0f8d1e03b8d623a6dd05f841dc3.

Update when key attribute is not specified

Adjusted the rules for finding old elements when the key attribute is not specified so that the behavior is more like React. efb876e8725c70e81183de1817d0b8167aeaada8

Attribute name for SVGElement

SVGElement has a variety of attribute names, some are camel cases, some are kebab cases. So far, we have not converted to Kebab case, but now we convert to Kebab case as well as React. a036181677a1e6d3611f6d10323e9c4c57d2bb9b https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

Multiple uses of children

It did not work correctly when children were used multiple times within a single component, as in the following test case, which has been fixed. https://github.com/usualoma/hono/blob/8f6639f218c768beae414a78d13271d86e6007b5/src/jsx/dom/index.test.tsx#L439-L444

b19749bb29a620057a975cf66a240fa6f366ce9d

Cautions for updating

I don't think there is a breaking change since it is the addition of one hook and a minor bug fix. However, for 8974135e400cd0f8d1e03b8d623a6dd05f841dc3, there is a slight possibility that "previously the bug resulted in the expected result, but the correction results in an unexpected result". Therefore, I think this should be in the minor release, not in the patch release.

What did I use to verify?

https://ui.shadcn.com/docs/components/toast https://ui.shadcn.com/docs/components/tooltip

These two UI components were verified in the following repositories

https://github.com/usualoma/hono-react-compat-demo

The author should do the following, if applicable

• [x] Add tests
• [x] Run tests
• [x] bun denoify to generate files for Deno
• [x] bun run format:fix && bun run lint:fix to format the code

[yusukebe]

@usualoma Thanks! I'll check it later.

[yusukebe]

Hi @usualoma !

I've tried your project, but "Toast 2" and "Tooltip" are not working. Could you check them? I also tried using The Toast and Tooltip in shading/ui with this PR in my project, but it does not work well, though my setup may be wrong.

[usualoma]

@yusukebe Thank you!

Hmmm, I wonder why. The style is not applied, but I have it working as follows: the DOM has been changed as intended by the original library, I believe.

https://github.com/honojs/hono/assets/30598/2ebb221f-ed96-4a2e-8613-d495fc20e7b2

I started over from git clone and got it working in the following 3 steps.

1. git clone
2. bun install
3. npm run dev

If you were using bun install, maybe "hono": ". /hono.tgz", is strongly cached with absolute paths and may not be updated. When I had that problem on my end, I solved it by deleting ~/.bun/install/cache and starting over.

[yusukebe]

@usualoma

When I had that problem on my end, I solved it by deleting ~/.bun/install/cache and starting over.

Wow, it works after I've done this instruction! Thanks!