Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herudi/egx
ExpressJS Got (Htmx + JSX)
https://github.com/herudi/egx
expressjs htmx jsx tsx typescript
Last synced: 4 days ago
JSON representation
ExpressJS Got (Htmx + JSX)
- Host: GitHub
- URL: https://github.com/herudi/egx
- Owner: herudi
- License: mit
- Created: 2024-05-18T04:45:20.000Z (8 months ago)
- Default Branch: master
- Last Pushed: 2024-05-20T05:28:49.000Z (8 months ago)
- Last Synced: 2024-11-18T04:10:05.471Z (about 2 months ago)
- Topics: expressjs, htmx, jsx, tsx, typescript
- Language: TypeScript
- Homepage:
- Size: 28.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Egx
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.
## Features
- Hooks support (`useRequest`, `useResponse`, `useBody`, `useParams`,
`useQuery`, etc.).
- Helmet support.
- `AsyncComponent` support.
- `CleanupComponent` support.
## Install
### Starter Template
```bash
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
```
### Install Manually
```bash
npm i egx
```
## Basic Usage
```tsx
/** @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(
Welcome Home
Click Me
,
);
});
app.post("/clicked", (req, res) => {
res.egx(
It's Me
);
});
// handling promise
app.get("/pet", async (req, res, next) => {
try {
await res.egx(
Cat
);
} catch (err) {
next(err);
}
});
app.listen(3000, () => {
console.log("> Running on port 3000");
});
```
## Using Hooks
### useRequest
```tsx
const Foo = () => {
const { url } = useRequest();
return
{url}
;
};
```
### useResponse
```tsx
const Foo = () => {
const res = useResponse();
res.set("my-header", "value");
return
hello
;
};
```
### useParams
```tsx
type User = { name: string };
const Foo = () => {
const { name } = useParams();
return
{name}
;
};
app.get("/user/:name", (req, res) => {
res.egx();
});
```
### useQuery
```tsx
type User = { name: string };
const Foo = () => {
const { name } = useQuery();
return
{name}
;
};
app.get("/user", (req, res) => {
res.egx();
});
// GET /user?name=john
```
### useBody
```tsx
type User = { name: string };
const UserPost = async () => {
const user = useBody();
// example save to db
await db.user.save(user);
return
{user.name}
;
};
app.post("/user", (req, res) => {
res.egx();
});
```
## Using Cleanup Component
A `cleanup` component for any custom `send`. for example: json/redirect.
### Example Sign and redirect
```tsx
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 ;
};
```
### Example Auth and NextFunction
```tsx
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(
,
);
});
```
## License
[MIT](LICENSE)