vanjs-jsx Fragment missing

[thednp]

Hi @Tao-VanJS, I'm getting this error:

Uncaught SyntaxError:
The requested module '/node_modules/.vite/deps/vanjs-jsx_jsx-dev-runtime.js?v=6fa83af3'
does not provide an export named 'Fragment' 

Perhaps including something in compileOptions or the jsx-runtime would fix this? Let me try and let you know later ;)

Btw, I'm using the default bare example converted to JSX

import "./app.css";
import van from "vanjs-core";
import vanjsLogo from "./vanjs.svg";
import viteLogo from "/vite.svg";
import { Counter } from "./counter";
const app = document.getElementById("app")!;

const App = () => {
  return (
    <>
      <div className="flex flex-row gap-3">

        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo w-3 h-auto" alt="Vite logo" />
        </a>
        <a href="https://vanjs.org" target="_blank">
          <img src={vanjsLogo} className="logo vanilla w-3 h-auto" alt="VanJS logo" />
        </a>
      </div>

      <Counter />
      <p className="read-the-docs">Click on the Vite and VanJS logos to learn more</p>
    </>

  );
};

van.add(app, <App />);

[Tao-VanJS]

@cqh963852, could you take a look at this?

[thednp]

@cqh963852 sorry to bother you, I believe you need to export something like this

// vanjs-jsx/src/index.js
import van from "vanjs-core";
export function createState(v) {
    return van.state(v);
}

export const Fragment = (props) => props.children; // <<<<<<<<<<<<< THIS

export { default as createElement, default as jsx, default as jsxDEV } from "./createElement";

Another option would be something like Solid has implemented with "jsx": "preserve" and not rely on React's usage of className and htmlFor. But that's just an opinion, we might want to accommodate both React devs and new comers. @Tao-VanJS thoughts?

[cqh963852]

"jsx": "preserve"

solidjs has its own babel transform.

I tend to fork the react's compiler to do this work.

[cqh963852]

className and htmlFor

I can understand your expectation.

Do you mean it to be more like writing html?

<label for="xxx" />
<div class="xxx" />

[cqh963852]

A react compiler example

react compiler does not implement the build time reconcile part

[cqh963852]

A solidjs example

Personally, I don't like the For tag.

[thednp]

For those looking for a working solution, check out the:

• vite-starter-vanjs-ssr-jsx (express, vite, vanjs, van-plate) featuring SSR , SSG and JSX;
• vite-starter-vanjs-ssr (express, vite, vanjs, van-plate) featuring SSR and SSG.

Powered by vite-plugin-vanjs.