hanni 0.1.0

package/index.js

@@ -0,0 +1,103 @@
+import { Hanni } from './src/hanni.js'
+
+const app = Hanni({
+  swagger: {
+    path: '/docs',
+    title: 'My API',
+    description:
+      'Contoh REST API sederhana untuk manajemen user. Dibangun dengan hanni.js.',
+    version: '2.0.0'
+  }
+})
+
+const users = [
+  { id: '1', name: 'Hanni', age: 21 },
+  { id: '2', name: 'Minji', age: 22 }
+]
+
+app.get(
+  '/users',
+  c => {
+    return c.json({
+      total: users.length,
+      data: users
+    })
+  },
+  {
+    summary: 'Get all users',
+    tags: ['Users'],
+    response: {
+      type: 'object',
+      properties: {
+        total: { type: 'number' },
+        data: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              id: { type: 'string' },
+              name: { type: 'string' },
+              age: { type: 'number' }
+            }
+          }
+        }
+      }
+    }
+  }
+)
+
+app.post(
+  '/users/:id',
+  c => {
+    const { id } = c.params
+    const { verbose } = c.query
+    const body = c.body || {}
+
+    let user = users.find(u => u.id === id)
+
+    if (!user) {
+      user = { id, ...body }
+      users.push(user)
+    } else {
+      Object.assign(user, body)
+    }
+
+    return c.json({
+      success: true,
+      verbose: !!verbose,
+      user
+    })
+  },
+  {
+    summary: 'Update user',
+    description: 'Update user by id',
+    tags: ['Users'],
+    query: {
+      verbose: true
+    },
+    body: {
+      type: 'object',
+      properties: {
+        name: { type: 'string' },
+        age: { type: 'number' }
+      }
+    },
+    response: {
+      type: 'object',
+      properties: {
+        success: { type: 'boolean' },
+        verbose: { type: 'boolean' },
+        user: {
+          type: 'object',
+          properties: {
+            id: { type: 'string' },
+            name: { type: 'string' },
+            age: { type: 'number' }
+          }
+        }
+      }
+    }
+  }
+)
+
+app.listen(3000)

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "hanni",
+  "version": "0.1.0",
+  "description": "Minimalist Bun web framework with built-in Swagger UI",
+  "type": "module",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "src"
+  ],
+  "keywords": [
+    "bun",
+    "framework",
+    "api",
+    "swagger",
+    "openapi"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+  "engines": {
+    "bun": ">=1.0.0"
+  }
+}

package/src/context.js

@@ -0,0 +1,48 @@
+export function createContext(req, params = {}) {
+  const url = new URL(req.url)
+  const headers = Object.fromEntries(req.headers)
+  const cookies = {}
+
+  if (headers.cookie) {
+    headers.cookie.split(';').forEach(c => {
+      const [k, v] = c.trim().split('=')
+      cookies[k] = decodeURIComponent(v)
+    })
+  }
+
+  return {
+    req,
+    method: req.method,
+    url: url.pathname,
+    query: Object.fromEntries(url.searchParams),
+    params,
+    headers,
+    cookies,
+    body: null,
+
+    text(data, status = 200, extra = {}) {
+      return new Response(data, { status, headers: extra })
+    },
+
+    json(data, status = 200, extra = {}) {
+      return new Response(JSON.stringify(data), {
+        status,
+        headers: { 'Content-Type': 'application/json', ...extra }
+      })
+    },
+
+    html(data, status = 200, extra = {}) {
+      return new Response(data, {
+        status,
+        headers: { 'Content-Type': 'text/html', ...extra }
+      })
+    },
+
+    redirect(loc, status = 302) {
+      return new Response(null, {
+        status,
+        headers: { Location: loc }
+      })
+    }
+  }
+}

package/src/hanni.js

@@ -0,0 +1,78 @@
+import { Router } from './router.js'
+import { createContext } from './context.js'
+import { buildSpec, swaggerHTML } from './swagger.js'
+import { compose } from './middleware.js'
+import { parseBody, corsHeaders } from './utils.js'
+
+export function Hanni(config = {}) {
+  const router = new Router()
+  const middlewares = []
+  const swaggerCfg = config.swagger
+
+  const app = {}
+
+  const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS', 'ALL']
+
+  for (const m of methods) {
+    app[m.toLowerCase()] = (path, handler, meta) => {
+      router.add(m, path, handler, meta)
+      return app
+    }
+  }
+
+  app.use = fn => {
+    middlewares.push(fn)
+    return app
+  }
+
+  app.listen = port => {
+    Bun.serve({
+      port,
+      async fetch(req) {
+        const url = new URL(req.url)
+
+        if (swaggerCfg) {
+          const base = swaggerCfg.path
+
+          if (url.pathname === base || url.pathname === base + '/') {
+            return new Response(
+              swaggerHTML(base + '/json', swaggerCfg),
+              { headers: { 'Content-Type': 'text/html' } }
+            )
+          }
+
+          if (url.pathname === base + '/json') {
+            return Response.json(
+              buildSpec(router.list(), swaggerCfg)
+            )
+          }
+        }
+
+        if (config.cors && req.method === 'OPTIONS') {
+          return new Response(null, { headers: corsHeaders() })
+        }
+
+        const match = router.match(req.method, url.pathname)
+        if (!match) return new Response('Not Found', { status: 404 })
+
+        const ctx = createContext(req, match.params)
+        ctx.body = await parseBody(req)
+
+        const handler = compose(middlewares, match.handler)
+        const res = await handler(ctx)
+
+        if (config.cors) {
+          Object.entries(corsHeaders()).forEach(([k, v]) =>
+            res.headers.set(k, v)
+          )
+        }
+
+        return res
+      }
+    })
+
+    console.log(`hanni.js running on ${port}`)
+  }
+
+  return app
+}

package/src/middleware.js

@@ -0,0 +1,13 @@
+export function compose(middlewares, handler) {
+  return function (ctx) {
+    let i = -1
+    const dispatch = idx => {
+      if (idx <= i) return Promise.reject()
+      i = idx
+      const fn = idx === middlewares.length ? handler : middlewares[idx]
+      if (!fn) return Promise.resolve()
+      return Promise.resolve(fn(ctx, () => dispatch(idx + 1)))
+    }
+    return dispatch(0)
+  }
+}

package/src/router.js

@@ -0,0 +1,35 @@
+export class Router {
+  constructor() {
+    this.routes = []
+  }
+
+  add(method, path, handler, meta = {}) {
+    const keys = []
+    const regex = new RegExp(
+      '^' +
+        path.replace(/\/:([^/]+)/g, (_, k) => {
+          keys.push(k)
+          return '/([^/]+)'
+        }) +
+        '$'
+    )
+
+    this.routes.push({ method, path, regex, keys, handler, meta })
+  }
+
+  match(method, pathname) {
+    for (const r of this.routes) {
+      if (r.method !== method && r.method !== 'ALL') continue
+      const m = pathname.match(r.regex)
+      if (!m) continue
+
+      const params = {}
+      r.keys.forEach((k, i) => (params[k] = m[i + 1]))
+      return { handler: r.handler, params, meta: r.meta }
+    }
+  }
+
+  list() {
+    return this.routes
+  }
+}

package/src/swagger.js

@@ -0,0 +1,193 @@
+const HTTP_METHODS = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options']
+
+function normalizePath(path) {
+  return path.replace(/:([^/]+)/g, '{$1}')
+}
+
+function extractPathParams(path) {
+  const params = []
+  path.replace(/:([^/]+)/g, (_, k) => {
+    params.push({
+      name: k,
+      in: 'path',
+      required: true,
+      schema: { type: 'string' }
+    })
+  })
+  return params
+}
+
+function extractQueryParams(meta) {
+  if (!meta?.query) return []
+  return Object.keys(meta.query).map(k => ({
+    name: k,
+    in: 'query',
+    required: false,
+    schema: { type: 'string' }
+  }))
+}
+
+function buildRequestBody(meta, method) {
+  if (!meta?.body) return undefined
+  if (method === 'get' || method === 'head') return undefined
+
+  return {
+    required: true,
+    content: {
+      'application/json': {
+        schema: meta.body
+      }
+    }
+  }
+}
+
+export function buildSpec(routes, cfg = {}) {
+  const paths = {}
+  const tagsMap = new Map()
+
+  for (const r of routes) {
+    const openPath = normalizePath(r.path)
+    if (!paths[openPath]) paths[openPath] = {}
+
+    const methods =
+      r.method === 'ALL'
+        ? HTTP_METHODS
+        : [r.method.toLowerCase()]
+
+    const routeTags =
+      Array.isArray(r.meta?.tags) && r.meta.tags.length
+        ? r.meta.tags
+        : ['Default']
+
+    for (const tag of routeTags) {
+      if (!tagsMap.has(tag)) {
+        tagsMap.set(tag, { name: tag })
+      }
+    }
+
+    for (const method of methods) {
+      paths[openPath][method] = {
+        tags: routeTags,
+        summary: r.meta?.summary || '',
+        description: r.meta?.description || '',
+        parameters: [
+          ...extractPathParams(r.path),
+          ...extractQueryParams(r.meta)
+        ],
+        requestBody: buildRequestBody(r.meta, method),
+        responses: {
+          200: {
+            description: 'Success',
+            content: {
+              'application/json': {
+                schema: r.meta?.response || { type: 'object' }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    openapi: '3.0.3',
+    info: {
+      title: cfg.title || 'API',
+      version: cfg.version || '1.0.0',
+      description: cfg.description || ''
+    },
+    tags: Array.from(tagsMap.values()),
+    paths
+  }
+}
+
+export function swaggerHTML(jsonPath, cfg = {}) {
+  const title = cfg.title || 'Hanni Docs'
+  const favicon =
+    cfg.favicon ||
+    `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>`
+
+  return `
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8"/>
+<title>${title}</title>
+
+<link rel="icon" href="${favicon}">
+
+<!-- Tailwind CDN -->
+<script src="https://cdn.tailwindcss.com"></script>
+
+<!-- Font Awesome -->
+<link
+  rel="stylesheet"
+  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+/>
+
+<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css">
+
+<style>
+body.dark .swagger-ui {
+  filter: invert(1) hue-rotate(180deg);
+}
+</style>
+</head>
+
+<body class="bg-white text-slate-900 transition-all">
+
+<!-- Toggle Button -->
+<button
+  id="theme-toggle"
+  class="fixed top-4 right-4 z-50 w-11 h-11 rounded-xl
+         bg-blue-600 text-white flex items-center justify-center
+         shadow-lg hover:bg-blue-700 transition"
+  aria-label="Toggle theme"
+>
+  <i class="fa-solid fa-moon"></i>
+</button>
+
+<div id="swagger"></div>
+
+<script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
+
+<script>
+const btn = document.getElementById('theme-toggle')
+const icon = btn.querySelector('i')
+
+function setTheme(theme) {
+  document.body.classList.toggle('dark', theme === 'dark')
+  document.body.classList.toggle('bg-slate-950', theme === 'dark')
+  document.body.classList.toggle('text-slate-100', theme === 'dark')
+  document.body.classList.toggle('bg-white', theme !== 'dark')
+
+  icon.className =
+    theme === 'dark'
+      ? 'fa-solid fa-sun'
+      : 'fa-solid fa-moon'
+
+  localStorage.setItem('swagger-theme', theme)
+}
+
+setTheme(localStorage.getItem('swagger-theme') || 'light')
+
+btn.onclick = () => {
+  setTheme(
+    document.body.classList.contains('dark')
+      ? 'light'
+      : 'dark'
+  )
+}
+
+SwaggerUIBundle({
+  url: '${jsonPath}',
+  dom_id: '#swagger',
+  documentTitle: '${title}',
+  deepLinking: true,
+  persistAuthorization: true
+})
+</script>
+</body>
+</html>
+`
+}

package/src/utils.js

@@ -0,0 +1,14 @@
+export async function parseBody(req) {
+  const type = req.headers.get('content-type') || ''
+  if (type.includes('application/json')) return req.json().catch(() => null)
+  if (type.includes('text/')) return req.text().catch(() => null)
+  return null
+}
+
+export function corsHeaders() {
+  return {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Headers': '*',
+    'Access-Control-Allow-Methods': '*'
+  }
+}