# hype
░▒▓███████████████████████████████████████████████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░
░▒▓████████▓▒░░▒▓██████▓▒░░▒▓███████▓▒░░▒▓██████▓▒░
░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░
░▒▓█▓▒░░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓█▓▒░ ░▒▓████████▓▒░
░▒▓███████████████████████████████████████████████▓▒░
`hype` wraps `hono` with useful defaults:
- HTTP logging (disable with `NO_HTTP_LOG` env variable)
- Static files served from `pub/`
- Page-based routing to `.tsx` files that export a `JSX` function in `./src/pages`
- Transpile `.ts` files in `src/js/blah.ts` via `website.com/js/blah.ts`
## Overview
Your project structure should be:
```
.
├── README.md
├── package.json
├── pub
│ ├── asset.txt
│ └── img
│ └── logo.png
├── src
│ ├── css
│ │ └── main.css
│ ├── js
│ │ ├── about.ts
│ │ └── main.ts
│ ├── shared
│ │ └── utils.ts
│ ├── pages
│ │ ├── _layout.tsx
│ │ ├── about.tsx
│ │ └── index.tsx
│ └── server.tsx
└── tsconfig.json
```
### URLs
In the above, `/about` will render `./src/pages/about.tsx`.
The `req` JSX prop will be given the `Hono` request:
export default ({ req }) => `Query Param 'id': ${req.query('id')}`
If `_layout.tsx` exists, your pages will automatically be wrapped in it:
```tsx
export default ({ children, title }: any) => (
{title ?? "hype"}
{children}
)
```
(Files starting with `_` don't get served directly.)
### css
CSS can be accessed via `/css/main.css`:
```html
```
### css reset
`hype` includes a css reset for your convenience:
```html
```
### js
JS can be accessed (and transpiled) via `/js/main.ts` or `/shared/utils.ts`:
```html
```
import your modules relatively, for example in `main.ts`:
```typescript
import { initAbout } from "./about"
import utils from "./shared/utils"
```
### pub
Anything in `pub/` is served as-is. Simple stuff.
### utils
`hype` includes helpful utils for your webapp:
- capitalize
- darkenColor
- isDarkMode
- lightenColor
- rand
- randIndex
- randItem
- randomId
- randRange
- redirectBack
- transpile
- unique
- weightedRand
## Setup
1. Add `dev` and `start` to `package.json`:
```json
"scripts": {
"start": "bun run src/server.tsx",
"dev": "bun run --hot src/server.tsx"
},
```
2. Use our `tsconfig.json`:
```json
{
"compilerOptions": {
"lib": ["ESNext", "DOM"],
"target": "ESNext",
"module": "Preserve",
"moduleDetection": "force",
"jsx": "react-jsx",
"jsxImportSource": "hono/jsx",
"allowJs": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
"strict": true,
"skipLibCheck": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true,
"noImplicitOverride": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noPropertyAccessFromIndexSignature": false,
"baseUrl": ".",
"paths": {
"#*": ["src/*"]
}
}
}
```
3. Use `Hype` just like `Hono` in your `server.tsx`, exporting `app.defaults`:
```typescript
import { Hype } from "hype"
const app = new Hype()
app.get("/my-custom-routes", (c) => c.text("wild, wild stuff"))
export default app.defaults
```
4. Enter dev mode
```sh
bun install
bun test
```