vanjs-org / van

🍦 VanJS: World's smallest reactive UI framework. Incredibly Powerful, Insanely Small - Everyone can build a useful UI app in an hour.
https://vanjs.org
MIT License
3.77k stars 87 forks source link

vanjs-jsx fixes #329

Open damienflament opened 3 months ago

damienflament commented 3 months ago

Fixes #325, #328 and other issues.

Tao-VanJS commented 3 months ago

@cqh963852, FYI

thednp commented 3 months ago

@damienflament does this fix also help with the Fragment error?

damienflament commented 3 months ago

@thednp No. I just started using Vite and JSX on my VanJS app. But I have some place where I put elements on a <div> to allow my component to return an array. I recently discovered in the React documentation about JSX that Fragments are made for that.

I read your ticket #324 about the missing Fragment implementation. I will take a look later.

thednp commented 3 months ago

@damienflament question: will the jsx runtime support custom VanJS components?

EG: function MyComp() { return div({}, 'some text')} with <MyComp /> syntax?

damienflament commented 3 months ago

@thednp Actually, that's how I use it.

MyComp() {
  return <div>Some text</>
}
<MyComp />
// transformed by the parser to:
jsx(MyComp)

In vanjs-jsx, jsx() is aliased to createElement().

Because MyComp is your custom function, it is called with properties as parameters.

But this function is also transformed by the parser:

MyComp() {
  return jsx("div", {children: "Some text"})
}

Now, createElement() is called with a tag name. The tag is created using van.tags as usual.

thednp commented 3 months ago

Thank you @damienflament for the explanation, how's the fix coming in? When can we test?