Deno compatibility with `react-jsx` runtime

[arthurfiorette]

@arthurfiorette I feel that we should export both jsx and jsxDEV functions from the jsx-runtime file and also create a jsx-dev-runtime file. They should have the same signature, this should be an easy thing to do.

@7f8ddd you should open an issue to Bun about this. Bun should handle the difference between dev and prod when it bundles. For this library, the difference is zero but for something like React you should not use the dev mode in a prod build.

Originally posted by @JacopoPatroclo in https://github.com/kitajs/html/issues/150#issuecomment-2017531537

[arthurfiorette]

I feel that we should export both jsx and jsxDEV functions from the jsx-runtime file and also create a jsx-dev-runtime file. They should have the same signature, this should be an easy thing to do.

Sure, this is probably the correct way to solve this.

However, I made some tests a week ago, and this scared me a little bit. Bun was rendering objects in production mode, even for KitaJS. Just like as if bun in prod mode was react-only compatible.

More tests using bun should be made, and probably also setup a CI for It.

Originally posted by @arthurfiorette in https://github.com/kitajs/html/issues/150#issuecomment-2017811718

[arthurfiorette]

More tests using bun should be made, and probably also setup a CI for It.

https://github.com/oven-sh/bun/issues/5090#issuecomment-2017845333 and https://github.com/oven-sh/bun/issues/3554.

Running our tests in Bun might be a problem.

[aralroca]

I think exporting the jsx-runtime could help to make kitajs/html even faster if you prerender the static content with this plugin: https://github.com/aralroca/prerender-macro in fact I tried to do the integration with kitajs/html, I think that with a public jsx-runtime it could be well integrated.

[arthurfiorette]

I think exporting the jsx-runtime could help to make kitajs/html even faster if you prerender the static content with this plugin: https://github.com/aralroca/prerender-macro in fact I tried to do the integration with kitajs/html, I think that with a public jsx-runtime it could be well integrated.

This could indeed work... I'll take a look at it. It's probably just like deno's https://deno.com/blog/v1.38#fastest-jsx-transform

[aralroca]

I just realized that Deno has JSX precompile! that's amazing! thanks to share it

[arthurfiorette]

I think exporting the jsx-runtime could help to make kitajs/html even faster if you prerender the static content with this plugin: https://github.com/aralroca/prerender-macro in fact I tried to do the integration with kitajs/html, I think that with a public jsx-runtime it could be well integrated.

I do not have enough time these days to test it, but the link below is pretty much self explanatory if someone would like to help me :) (I'm happy to review and help with any PRs made)

https://github.com/aralroca/prerender-macro?tab=readme-ov-file#add-your-framework-example

[7f8ddd]

I think exporting the jsx-runtime could help to make kitajs/html even faster if you prerender the static content with this plugin: https://github.com/aralroca/prerender-macro in fact I tried to do the integration with kitajs/html, I think that with a public jsx-runtime it could be well integrated.

I do not have enough time these days to test it, but the link below is pretty much self explanatory if someone would like to help me :) (I'm happy to review and help with any PRs made)

https://github.com/aralroca/prerender-macro?tab=readme-ov-file#add-your-framework-example

I put this together, seems like it's working, not sure, maybe someone here can test it.

import Html from "@kitajs/html";
import prerenderMacroPlugin, { type PrerenderConfig } from "prerender-macro";

export const prerenderConfig = {
  render: async (Component: Html.Component, props: Html.PropsWithChildren) =>
    Html.contentToString(<Component {...props} />),
} satisfies PrerenderConfig;

export const plugin = prerenderMacroPlugin({
  prerenderConfigPath: import.meta.url,
});

await Bun.build({
  plugins: [prerenderMacroPlugin({ prerenderConfigPath: import.meta.url })],
  entrypoints: ["src/index.ts"],
  outdir: "./build",
  target: "bun",
});

[arthurfiorette]

Can you try with:

export const prerenderConfig = { render: Html.createElement } satisfies PrerenderConfig;

[aralroca]

@arthurfiorette I tried the tests and it works, but I did a monkey-patch (adding the file jsx-dev-runtime with jsxDEV):

[arthurfiorette]

@arthurfiorette I tried the tests and it works, but I did a monkey-patch (adding the file jsx-dev-runtime with jsxDEV):

~Yeah, we're going to also add the jsx-dev-runtime because of https://github.com/kitajs/html/issues/150#issuecomment-2016957295~

nvm just saw your https://github.com/kitajs/html/pull/166. Thanks a lot!!

[arthurfiorette]

Anyone wants to work on supporting this to bun? After #166 I think only adding a CI for it would be enough

[arthurfiorette]

With #166, Bun works fine. I'll let this open when "official" support for Deno will be added.