WebReflection / uhtml

A micro HTML/SVG render

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Bug with textnodes/tags in a component in jsx

berlinfox opened this issue · comments

I was playing around with x.js and found (at least for me) a minor bug. Here is my example:

import { render } from "https://esm.sh/uhtml@3.0.1/esm/x.js";

function MyElement({ children }) {
  return <div>{children}</div>;
}

render(
  document.querySelector("#test"),
  <MyElement>
    Some Text <b>and some more text</b>
  </MyElement>,
);

The result is a concatenated string inside the div element:

<div>Some Text ,[object HTMLElement]<!--isµ0--></div>

Adding a fragment around the text node fixes the issue.

<MyElement>
  <>Some Text </>
  <b>and some more text</b>
</MyElement>

Edit: and this works, too:

<MyElement>
  {html`Some Text <b>some more text</b>`}
</MyElement>

closing here as this is likely a jsx2tag issue, the x.js doesn't really do much and html itself works, as you stated

It shuold be up and running 👋