Repository: yusukebe/hono-htmx Branch: main Commit: 9636122a4504 Files: 8 Total size: 3.9 KB Directory structure: gitextract_aewqrsr1/ ├── .gitignore ├── README.md ├── package.json ├── src/ │ ├── components.tsx │ └── index.tsx ├── todo.sql ├── tsconfig.json └── wrangler.sample.toml ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ .wrangler node_modules yarn-error.log yarn.lock wrangler.toml ================================================ FILE: README.md ================================================ # Todo Example Stack: * Hono * JSX (Hono middleware) * htmx * Zod * Cloudflare Workers * Cloudflare D1 ## Usage Install: ``` npm install ``` Setup: ``` wrangler d1 create todo wrangler d1 execute todo --local --file=todo.sql ``` Dev: ``` npm run dev ``` Deploy: ``` npm run deploy ``` ## Author Yusuke Wada ## License MIT ================================================ FILE: package.json ================================================ { "scripts": { "dev": "wrangler dev --live-reload src/index.tsx", "deploy": "wrangler deploy --minify src/index.tsx" }, "dependencies": { "@hono/zod-validator": "^0.1.9", "hono": "^3.8.0-rc.2", "zod": "^3.21.4" }, "devDependencies": { "@cloudflare/workers-types": "^4.20231002.0", "wrangler": "^3.11.0" } } ================================================ FILE: src/components.tsx ================================================ import { html } from 'hono/html' import { jsxRenderer } from 'hono/jsx-renderer' export const renderer = jsxRenderer(({ children }) => { return html` Hono + htmx

Todo

${children}
` }) export const AddTodo = () => (
) export const Item = ({ title, id }: { title: string; id: string }) => (

{title}

) ================================================ FILE: src/index.tsx ================================================ import { Hono } from 'hono' import { z } from 'zod' import { zValidator } from '@hono/zod-validator' import { renderer, AddTodo, Item } from './components' type Bindings = { DB: D1Database } type Todo = { title: string id: string } const app = new Hono<{ Bindings: Bindings }>() app.get('*', renderer) app.get('/', async (c) => { const { results } = await c.env.DB.prepare(`SELECT id, title FROM todo;`).all() const todos = results return c.render(
{todos.map((todo) => { return })}
) }) app.post( '/todo', zValidator( 'form', z.object({ title: z.string().min(1) }) ), async (c) => { const { title } = c.req.valid('form') const id = crypto.randomUUID() await c.env.DB.prepare(`INSERT INTO todo(id, title) VALUES(?, ?);`).bind(id, title).run() return c.html() } ) app.delete('/todo/:id', async (c) => { const id = c.req.param('id') await c.env.DB.prepare(`DELETE FROM todo WHERE id = ?;`).bind(id).run() c.status(200) return c.body(null) }) export default app ================================================ FILE: todo.sql ================================================ CREATE TABLE todo ( id TEXT PRIMARY KEY, title TEXT NOT NULL ); ================================================ FILE: tsconfig.json ================================================ { "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "node", "esModuleInterop": true, "strict": true, "lib": [ "esnext" ], "types": [ "@cloudflare/workers-types" ], "jsx": "react-jsx", "jsxImportSource": "hono/jsx" }, } ================================================ FILE: wrangler.sample.toml ================================================ name = "todo" compatibility_date = "2023-01-01" [[d1_databases]] binding = "DB" # i.e. available in your Worker on env.DB database_name = "todo" database_id = "" preview_database_id = "local-todo"