van icon indicating copy to clipboard operation
van copied to clipboard

vanjs-jsx fixes

Open damienflament opened this issue 1 year ago • 9 comments

Fixes #325, #328 and other issues.

damienflament avatar May 20 '24 00:05 damienflament

@cqh963852, FYI

Tao-VanJS avatar May 20 '24 00:05 Tao-VanJS

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

thednp avatar May 20 '24 17:05 thednp

@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.

damienflament avatar May 20 '24 19:05 damienflament

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

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

thednp avatar May 22 '24 05:05 thednp

@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.

damienflament avatar May 22 '24 21:05 damienflament

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

thednp avatar May 22 '24 21:05 thednp

@Tao-VanJS / @damienflament any news on these changes please?

thednp avatar Dec 17 '24 17:12 thednp

I'm waiting for @cqh963852's approval for this PR.

Tao-VanJS avatar Dec 17 '24 22:12 Tao-VanJS

In my tests, only the fragment modification is needed.

But the entire thing needs to be updated to React 19 jsx.

If nothing happens here, I will add this feature into my vite-plugin-vanjs.

thednp avatar Dec 18 '24 05:12 thednp

@Tao-VanJS and @damienflament this PR can be closed, you can now use vite-plugin-vanjs for JSX support.

thednp avatar Jun 08 '25 14:06 thednp