@Elysia/html with React for shadcn/ui

[ARCADEGC]

Hi,

I am trying to build a stack using Elysia and other technologies. One of these technologies, at last I wanted, to be shadcn/ui which uses React. I then tried to make React compatible with Elysia and succeeded. I got to Elysia through the BETH stack video where there is typed-html used for the components. This is fine with elysia/html because the compiler options complement each other. This is not the case with React.

This needs to be used with React:

        "jsx": "react",
        "jsxFactory": "React.createElement",
        "jsxFragmentFactory": "React.Fragment",

And this needs to be used with @elysia/html:

"compilerOptions": {
        "jsx": "react",
        "jsxFactory": "Html.createElement",
        "jsxFragmentFactory": "Html.Fragment"
    }

Also using HTMX for every response i need to add the following:

set.headers["Content-Type"] = "text/html";
return renderToString(

in full this would look like this for one endpoint

import { Elysia, t } from "elysia";
import React, { useState } from "react";
import { renderToString } from "react-dom/server";

import { Button } from "@/components/ui/button";

export const plugin = new Elysia({
    name: "buttonpostplugin",
}).post(
    "/post/:id",
    ({ params, set }) => {
        set.headers["Content-Type"] = "text/html";
        return renderToString(
            <Button hx-post="/post/1" hx-swap="afterend">
                params.id: {params.id}
            </Button>,
        );
    },
    {
        params: t.Object({
            id: t.Numeric(),
        }),
    },
)

This is quite annoying, and I would love if someone could help me with my problem. I put the code onto this branch of my repo: https://github.com/ARCADEGC/BETHversion/tree/react

followed docs on main branch and https://asleepace.com/blog/bun-elysia-react-ssr/

[ARCADEGC]

Improvement is that I created my own html plugin with the decorate function in a different folder that I can import and use as the html plugin. Not sure how well will it scale. Using a group or something then could help i guess.

import { Elysia } from "elysia";

export const htmlPlugin = new Elysia({
    name: "htmlPlugin",
}).decorate(
    "html",
    ({ set }: { set: { headers: { "Content-Type": string } } }) =>
        (set.headers["Content-Type"] = "text/html"),
);

Then I can import it and use it in the same example:

.use(htmlPlugin)
    .post(
        "/post/:id",
        ({ params }) => {
            return renderToString(
                <Button hx-post="/post/1" hx-swap="afterend">
                    params.id: {params.id}
                </Button>,
            );
        },
        {
            params: t.Object({
                id: t.Numeric(),
            }),
        },
    );

It is true that I still need to use return renderToString() but still an improvement.