157 lines
4.6 KiB
Markdown
157 lines
4.6 KiB
Markdown
# 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:
|
|
|
|
export default ({ children, title }: any) =>
|
|
<html lang="en">
|
|
<head>
|
|
<title>{title ?? 'hype'}</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<link href="/css/main.css" rel="stylesheet" />
|
|
<script src="/js/main.ts" type="module"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
{children}
|
|
</main>
|
|
</body>
|
|
</html>
|
|
|
|
(Files starting with `_` don't get served directly.)
|
|
|
|
### css
|
|
|
|
CSS can be accessed via `/css/main.css`:
|
|
|
|
<link href="/css/reset.css" rel="stylesheet" />
|
|
|
|
### js
|
|
|
|
JS can be accessed (and transpiled) via `/js/main.ts` or `/shared/utils.ts`:
|
|
|
|
<script src="/js/main.ts" type="module"></script>
|
|
|
|
import your modules relatively, for example in `main.ts`:
|
|
|
|
import { initAbout } from './about'
|
|
import utils from './shared/utils'
|
|
|
|
### pub
|
|
|
|
Anything in `pub/` is served as-is. Simple stuff.
|
|
|
|
## 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
|
|
|
|
bun install
|
|
bun test
|