An ExpressJS Got Htmx and JSX.
ExpressJS is a Fast, unopinionated, minimalist web framework.
Htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.
JSX it's just JavaScript XML. JSX makes it easier to write markup HTML.
- Hooks support (
useRequest
,useResponse
,useBody
,useParams
,useQuery
, etc.). - Helmet support.
AsyncComponent
support.CleanupComponent
support.
npx degit herudi/egx/starter my-app
cd my-app
npm install
// run dev
npm run dev
// build
npm run build
// run prod
npm run start
npm i egx
/** @jsx h */
/** @jsxFrag h.Fragment */
import express from "express";
import { egx, h, Helmet } from "egx";
const app = express();
app.use(egx());
app.get("/", (req, res) => {
res.egx(
<div>
<Helmet>
<title>Welcome Home</title>
</Helmet>
<button hx-post="/clicked" hx-swap="outerHTML">Click Me</button>
</div>,
);
});
app.post("/clicked", (req, res) => {
res.egx(<h1>It's Me</h1>);
});
// handling promise
app.get("/pet", async (req, res, next) => {
try {
await res.egx(<h1>Cat</h1>);
} catch (err) {
next(err);
}
});
app.listen(3000, () => {
console.log("> Running on port 3000");
});
const Foo = () => {
const { url } = useRequest();
return <h1>{url}</h1>;
};
const Foo = () => {
const res = useResponse();
res.set("my-header", "value");
return <h1>hello</h1>;
};
type User = { name: string };
const Foo = () => {
const { name } = useParams<User>();
return <h1>{name}</h1>;
};
app.get("/user/:name", (req, res) => {
res.egx(<Foo />);
});
type User = { name: string };
const Foo = () => {
const { name } = useQuery<User>();
return <h1>{name}</h1>;
};
app.get("/user", (req, res) => {
res.egx(<Foo />);
});
// GET /user?name=john
type User = { name: string };
const UserPost = async () => {
const user = useBody<User>();
// example save to db
await db.user.save(user);
return <h1>{user.name}</h1>;
};
app.post("/user", (req, res) => {
res.egx(<UserPost />);
});
A cleanup
component for any custom send
. for example: json/redirect.
const Sign = async () => {
const req = useRequest();
const res = useResponse();
const token = await getToken(req.body);
if (token) {
// use cleanup to redirect
return () => {
res.cookie("user", token).redirect("/admin");
};
}
return <SignPost message="login failure" />;
};
const Auth: FC = (props) => {
const req = useRequest();
const next = useNext();
if (req.isLogin === false) {
// use cleanup to next function
return () => {
next(new Error("user not found"));
};
}
return props.children;
};
app.get("/", (req, res) => {
res.egx(
<Auth>
<Home />
</Auth>,
);
});