├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── .yarn └── releases │ └── yarn-3.4.1.cjs ├── .yarnrc.yml ├── README.md ├── package.json ├── projects ├── .gitignore ├── cloudflare-pages-trpc │ ├── .gitignore │ ├── README.md │ ├── functions │ │ └── trpc │ │ │ └── [[route]].ts │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── Greeting.tsx │ │ ├── main.tsx │ │ ├── router.ts │ │ ├── utils │ │ │ └── trpc.ts │ │ └── vite-env.d.ts │ ├── tsconfig.json │ └── vite.config.ts ├── hono-with-preact │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── api │ │ │ └── index.ts │ │ ├── client │ │ │ ├── App.tsx │ │ │ └── index.tsx │ │ └── index.ts │ ├── tsconfig.json │ ├── vite.config.js │ ├── vite.config.worker.js │ └── wrangler.toml ├── hono-with-qwik │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── .prettierignore │ ├── README.md │ ├── assets │ │ └── public │ │ │ ├── favicon.svg │ │ │ ├── manifest.json │ │ │ └── robots.txt │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── header │ │ │ │ ├── header.css │ │ │ │ └── header.tsx │ │ │ ├── icons │ │ │ │ └── qwik.tsx │ │ │ └── router-head │ │ │ │ └── router-head.tsx │ │ ├── entry.bun.tsx │ │ ├── entry.dev.tsx │ │ ├── entry.hono.tsx │ │ ├── entry.preview.tsx │ │ ├── entry.ssr.tsx │ │ ├── entry.workers.tsx │ │ ├── global.css │ │ ├── middleware │ │ │ └── qwik-city.ts │ │ ├── root.tsx │ │ └── routes │ │ │ ├── flower │ │ │ ├── flower.css │ │ │ └── index.tsx │ │ │ ├── index.tsx │ │ │ ├── layout.tsx │ │ │ └── service-worker.ts │ ├── tsconfig.json │ ├── vite.config.bun.ts │ ├── vite.config.ts │ ├── vite.config.workers.ts │ └── wrangler.toml ├── nextjs-hc │ ├── .gitignore │ ├── README.md │ ├── next-env.d.ts │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── _app.tsx │ │ ├── _document.tsx │ │ ├── api │ │ │ └── hello.ts │ │ └── index.tsx │ └── tsconfig.json ├── pages-react-query │ ├── .gitignore │ ├── functions │ │ └── api │ │ │ └── [[route]].ts │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ └── main.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── pages-vite-minimal │ ├── .dev.vars │ ├── .gitignore │ ├── functions │ │ └── api │ │ │ └── [[route]].ts │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ └── main.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── preact-ssr │ ├── .gitignore │ ├── .vscode │ │ └── settings.json │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── api │ │ │ └── index.ts │ │ ├── app │ │ │ ├── About.tsx │ │ │ ├── Home.tsx │ │ │ ├── NotFound.tsx │ │ │ └── components │ │ │ │ └── Header.tsx │ │ ├── client.tsx │ │ ├── server.ts │ │ └── ssr │ │ │ ├── helmet.d.ts │ │ │ └── middleware.tsx │ ├── tsconfig.json │ ├── vite.config.js │ └── wrangler.toml ├── r2-app │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── wrangler.toml └── todo │ ├── .gitignore │ ├── README.md │ ├── common │ └── types.ts │ ├── front │ ├── App.tsx │ ├── client.ts │ ├── components │ │ ├── AddTaskForm.tsx │ │ ├── TaskItem.tsx │ │ └── TaskList.tsx │ └── main.tsx │ ├── functions │ └── api │ │ └── [[route]].ts │ ├── index.html │ ├── package.json │ ├── server │ └── index.ts │ ├── todo.sql │ ├── tsconfig.json │ ├── vite.config.ts │ └── wrangler.sample.toml └── tsconfig.json /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const { defineConfig } = require('eslint-define-config') 2 | 3 | module.exports = defineConfig({ 4 | root: true, 5 | extends: [ 6 | 'eslint:recommended', 7 | 'plugin:node/recommended', 8 | 'plugin:@typescript-eslint/recommended', 9 | 'prettier', 10 | ], 11 | parser: '@typescript-eslint/parser', 12 | parserOptions: { 13 | sourceType: 'module', 14 | ecmaVersion: 2021, 15 | }, 16 | plugins: ['@typescript-eslint', 'import'], 17 | globals: { 18 | fetch: false, 19 | Response: false, 20 | Request: false, 21 | addEventListener: false, 22 | }, 23 | rules: { 24 | quotes: ['error', 'single'], 25 | semi: ['error', 'never'], 26 | 'no-debugger': ['error'], 27 | 'no-empty': ['warn', { allowEmptyCatch: true }], 28 | 'no-process-exit': 'off', 29 | 'no-useless-escape': 'off', 30 | 'prefer-const': [ 31 | 'warn', 32 | { 33 | destructuring: 'all', 34 | }, 35 | ], 36 | '@typescript-eslint/ban-types': [ 37 | 'error', 38 | { 39 | types: { 40 | Function: false, 41 | '{}': false, 42 | }, 43 | }, 44 | ], 45 | 'sort-imports': 0, 46 | 'import/order': [2, { alphabetize: { order: 'asc' } }], 47 | 48 | 'node/no-missing-import': 'off', 49 | 'node/no-missing-require': 'off', 50 | 'node/no-deprecated-api': 'off', 51 | 'node/no-unpublished-import': 'off', 52 | 'node/no-unpublished-require': 'off', 53 | 'node/no-unsupported-features/es-syntax': 'off', 54 | 55 | '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }], 56 | '@typescript-eslint/no-empty-interface': 'off', 57 | '@typescript-eslint/no-inferrable-types': 'off', 58 | '@typescript-eslint/no-var-requires': 'off', 59 | '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }], 60 | }, 61 | }) 62 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | package-lock.json 4 | yarn.lock 5 | bun.lockb 6 | yarn-error.log 7 | 8 | # Output of 'npm pack' 9 | *.tgz 10 | 11 | # yarn 12 | .yarn/* 13 | !.yarn/patches 14 | !.yarn/plugins 15 | !.yarn/releases 16 | !.yarn/sdks 17 | !.yarn/versions -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "trailingComma": "es5", 4 | "tabWidth": 2, 5 | "semi": false, 6 | "singleQuote": true, 7 | "jsxSingleQuote": true, 8 | "endOfLine": "lf" 9 | } 10 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deno.enable": false, 3 | "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], 4 | "editor.codeActionsOnSave": { 5 | "source.fixAll.eslint": true 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | yarnPath: .yarn/releases/yarn-3.4.1.cjs 2 | nodeLinker: node-modules 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # My Hono examples 2 | 3 | ## Tips 4 | 5 | `degit` is useful to copy the project. 6 | 7 | ``` 8 | npx degit yusukebe/hono-examples/projects/my-app my-app 9 | ``` 10 | 11 | ## Author 12 | 13 | Yusuke Wada 14 | 15 | ## License 16 | 17 | MIT 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hono-examples", 3 | "version": "0.0.0", 4 | "workspaces": [ 5 | "projects/*" 6 | ], 7 | "private": true, 8 | "license": "MIT", 9 | "packageManager": "yarn@3.4.1", 10 | "devDependencies": { 11 | "@typescript-eslint/eslint-plugin": "^5.51.0", 12 | "@typescript-eslint/parser": "^5.51.0", 13 | "eslint": "^8.33.0", 14 | "eslint-config-prettier": "^8.6.0", 15 | "eslint-define-config": "^1.15.0", 16 | "eslint-plugin-import": "^2.27.5", 17 | "eslint-plugin-node": "latest", 18 | "prettier": "^2.8.4" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /projects/.gitignore: -------------------------------------------------------------------------------- 1 | .yarn -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/.gitignore: -------------------------------------------------------------------------------- 1 | yarn.lock 2 | pages 3 | node_modules 4 | yarn-error.log -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/README.md: -------------------------------------------------------------------------------- 1 | # Cloudflare Pages with tRPC 2 | 3 | ``` 4 | yarn dev 5 | ``` 6 | 7 | ## Author 8 | 9 | Yusuke Wada 10 | 11 | ## License 12 | 13 | MIT 14 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/functions/trpc/[[route]].ts: -------------------------------------------------------------------------------- 1 | import { Hono } from 'hono' 2 | import { handle } from 'hono/cloudflare-pages' 3 | import { trpcServer } from '@hono/trpc-server' 4 | import { appRouter } from '../../src/router' 5 | import { cors } from 'hono/cors' 6 | 7 | const app = new Hono() 8 | 9 | app.all( 10 | '*', 11 | cors(), 12 | trpcServer({ 13 | router: appRouter, 14 | }) 15 | ) 16 | 17 | export const onRequest = handle(app) 18 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "trpc-pages", 3 | "version": "0.10.0", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "wrangler pages dev --local --compatibility-date=2023-02-05 -- yarn dev:client", 7 | "dev:client": "vite", 8 | "build": "vite build", 9 | "deploy": "yarn build && wrangler pages publish pages" 10 | }, 11 | "dependencies": { 12 | "@hono/trpc-server": "^0.0.1", 13 | "@tanstack/react-query": "^4.3.8", 14 | "@trpc/client": "^10.10.0", 15 | "@trpc/react-query": "^10.10.0", 16 | "@trpc/server": "^10.10.0", 17 | "hono": "^3.3.1", 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "zod": "3.19.1" 21 | }, 22 | "devDependencies": { 23 | "@types/react": "^18.0.9", 24 | "@types/react-dom": "^18.0.5", 25 | "@vitejs/plugin-react": "^2.1.0", 26 | "vite": "^4.1.1", 27 | "wrangler": "^2.9.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 2 | import { httpBatchLink } from '@trpc/client' 3 | import { useState } from 'react' 4 | import { trpc } from './utils/trpc' 5 | import Greeting from './Greeting' 6 | 7 | export function App() { 8 | const [queryClient] = useState(() => new QueryClient()) 9 | const [trpcClient] = useState(() => 10 | trpc.createClient({ 11 | links: [ 12 | httpBatchLink({ 13 | url: '/trpc', 14 | }), 15 | ], 16 | }) 17 | ) 18 | return ( 19 | 20 | 21 | 22 | 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/Greeting.tsx: -------------------------------------------------------------------------------- 1 | import { trpc } from './utils/trpc' 2 | 3 | export default function Greeting() { 4 | const greeting = trpc.greeting.useQuery({ name: 'Hono!' }) 5 | if (!greeting.data) return
Loading...
6 | return ( 7 |
8 |

{greeting.data.text}

9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/main.tsx: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom/client' 2 | import { App } from './App' 3 | 4 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render() 5 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/router.ts: -------------------------------------------------------------------------------- 1 | import { initTRPC } from '@trpc/server' 2 | import { z } from 'zod' 3 | 4 | const t = initTRPC.create() 5 | 6 | const publicProcedure = t.procedure 7 | const router = t.router 8 | 9 | export const appRouter = router({ 10 | greeting: publicProcedure 11 | .input( 12 | z 13 | .object({ 14 | name: z.string().nullish(), 15 | }) 16 | .nullish() 17 | ) 18 | .query(({ input }) => { 19 | return { 20 | text: `Hello ${input?.name ?? 'World'}`, 21 | } 22 | }), 23 | }) 24 | 25 | export type AppRouter = typeof appRouter 26 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/utils/trpc.ts: -------------------------------------------------------------------------------- 1 | import { createTRPCReact } from '@trpc/react-query' 2 | import type { AppRouter } from '../router' 3 | 4 | export const trpc = createTRPCReact() 5 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src", "vite.config.ts"] 20 | } 21 | -------------------------------------------------------------------------------- /projects/cloudflare-pages-trpc/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | build: { 6 | minify: true, 7 | outDir: './pages', 8 | }, 9 | plugins: [react()], 10 | }); 11 | -------------------------------------------------------------------------------- /projects/hono-with-preact/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | yarn.lock 3 | node_modules -------------------------------------------------------------------------------- /projects/hono-with-preact/README.md: -------------------------------------------------------------------------------- 1 | # Hono with Preact 2 | 3 | ## Author 4 | 5 | Yusuke Wada 6 | 7 | ## License 8 | 9 | MIT 10 | -------------------------------------------------------------------------------- /projects/hono-with-preact/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Hono with Preact

8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /projects/hono-with-preact/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hono-with-preact", 3 | "version": "0.0.0", 4 | "main": "src/index.ts", 5 | "scripts": { 6 | "dev": "miniflare -m --live-reload dist/worker/index.mjs", 7 | "build:client": "vite build", 8 | "build:worker": "vite build --ssr src/index.ts --config vite.config.worker.js", 9 | "build": "run-p 'build:*'", 10 | "deploy": "wrangler publish dist/worker/index.mjs" 11 | }, 12 | "license": "MIT", 13 | "dependencies": { 14 | "hono": "^3.3.1", 15 | "preact": "^10.11.3" 16 | }, 17 | "devDependencies": { 18 | "miniflare": "^2.11.0", 19 | "npm-run-all": "^4.1.5", 20 | "vite": "^4.0.3", 21 | "wrangler": "^2.6.2" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /projects/hono-with-preact/src/api/index.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from 'hono' 2 | 3 | const api = new Hono() 4 | 5 | api.get('/', (c) => { 6 | return c.json({ message: 'foo' }) 7 | }) 8 | 9 | export default api 10 | -------------------------------------------------------------------------------- /projects/hono-with-preact/src/client/App.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact' 2 | import { useState, useEffect } from 'preact/hooks' 3 | 4 | const App = () => { 5 | const [message, setMessage] = useState('') 6 | 7 | useEffect(() => { 8 | const fetchData = async () => { 9 | const res = await fetch('/api') 10 | const data = await res.json() 11 | setMessage(data.message) 12 | } 13 | fetchData() 14 | }, []) 15 | return ( 16 |
17 |

Message from API

18 |

{message}

19 |
20 | ) 21 | } 22 | 23 | export default App 24 | -------------------------------------------------------------------------------- /projects/hono-with-preact/src/client/index.tsx: -------------------------------------------------------------------------------- 1 | import { h, render } from 'preact' 2 | import App from './App' 3 | 4 | render(, document.getElementById('root')) 5 | -------------------------------------------------------------------------------- /projects/hono-with-preact/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from 'hono' 2 | import api from './api' 3 | import { serveStatic } from 'hono/serve-static.module' 4 | 5 | const app = new Hono() 6 | 7 | app.route('/api', api) 8 | app.get('*', serveStatic({ root: './public' })) 9 | 10 | export default app 11 | -------------------------------------------------------------------------------- /projects/hono-with-preact/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "jsx": "react", 5 | "jsxFactory": "h", 6 | "jsxFragmentFactory": "Fragment", 7 | } 8 | } -------------------------------------------------------------------------------- /projects/hono-with-preact/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | 3 | export default defineConfig({ 4 | build: { 5 | minify: true, 6 | outDir: './dist/static/public', 7 | }, 8 | }) 9 | -------------------------------------------------------------------------------- /projects/hono-with-preact/vite.config.worker.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | 3 | export default defineConfig({ 4 | build: { 5 | minify: true, 6 | ssr: true, 7 | outDir: './dist/worker', 8 | rollupOptions: { 9 | external: ['__STATIC_CONTENT_MANIFEST'], 10 | }, 11 | }, 12 | ssr: { 13 | noExternal: true, 14 | format: 'esm', 15 | }, 16 | }) 17 | -------------------------------------------------------------------------------- /projects/hono-with-preact/wrangler.toml: -------------------------------------------------------------------------------- 1 | name = "hono-with-preact" 2 | compatibility_date = "2022-12-21" 3 | 4 | main = "dist/index.mjs" 5 | 6 | [build] 7 | command = "yarn run build" 8 | 9 | [site] 10 | bucket = "./dist/static" 11 | 12 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | es2021: true, 6 | node: true, 7 | }, 8 | extends: [ 9 | 'eslint:recommended', 10 | 'plugin:@typescript-eslint/recommended', 11 | 'plugin:qwik/recommended', 12 | ], 13 | parser: '@typescript-eslint/parser', 14 | parserOptions: { 15 | tsconfigRootDir: __dirname, 16 | project: ['./tsconfig.json'], 17 | ecmaVersion: 2021, 18 | sourceType: 'module', 19 | ecmaFeatures: { 20 | jsx: true, 21 | }, 22 | }, 23 | plugins: ['@typescript-eslint'], 24 | rules: { 25 | '@typescript-eslint/no-explicit-any': 'off', 26 | '@typescript-eslint/explicit-module-boundary-types': 'off', 27 | '@typescript-eslint/no-inferrable-types': 'off', 28 | '@typescript-eslint/no-non-null-assertion': 'off', 29 | '@typescript-eslint/no-empty-interface': 'off', 30 | '@typescript-eslint/no-namespace': 'off', 31 | '@typescript-eslint/no-empty-function': 'off', 32 | '@typescript-eslint/no-this-alias': 'off', 33 | '@typescript-eslint/ban-types': 'off', 34 | '@typescript-eslint/ban-ts-comment': 'off', 35 | 'prefer-spread': 'off', 36 | 'no-case-declarations': 'off', 37 | 'no-console': 'off', 38 | '@typescript-eslint/no-unused-vars': ['error'], 39 | '@typescript-eslint/consistent-type-imports': 'warn', 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/.gitignore: -------------------------------------------------------------------------------- 1 | # Build 2 | /dist 3 | /lib 4 | /lib-types 5 | /server 6 | 7 | # Development 8 | node_modules 9 | 10 | # Cache 11 | .cache 12 | .mf 13 | .vscode 14 | .rollup.cache 15 | tsconfig.tsbuildinfo 16 | 17 | # Logs 18 | logs 19 | *.log 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | pnpm-debug.log* 24 | lerna-debug.log* 25 | 26 | # Editor 27 | !.vscode/extensions.json 28 | .idea 29 | .DS_Store 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | 36 | # Yarn 37 | .yarn/* 38 | !.yarn/releases 39 | 40 | yarn.lock -------------------------------------------------------------------------------- /projects/hono-with-qwik/.prettierignore: -------------------------------------------------------------------------------- 1 | # Files Prettier should not format 2 | **/*.log 3 | **/.DS_Store 4 | *. 5 | dist 6 | node_modules 7 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/README.md: -------------------------------------------------------------------------------- 1 | # Hono🔥 meets Qwik ⚡️ 2 | 3 | Qwik City works on Cloudflare Workers and Bun with Hono / Qwik middleware. 4 | 5 | It's middleware, so you can integrate Qwik into Hono ultra easily! 6 | 7 | ```ts 8 | import qwikCityPlan from '@qwik-city-plan' 9 | import render from './entry.ssr' 10 | import { qwikMiddleware } from './middleware/qwik-city' 11 | import { logger } from 'hono/logger' 12 | 13 | import { Hono } from 'hono' 14 | 15 | const app = new Hono() 16 | app.get('*', logger()) 17 | 18 | app.get('*', qwikMiddleware({ render, qwikCityPlan })) 19 | 20 | export default app 21 | ``` 22 | 23 | ## Notice 24 | 25 | This is WIP. It may be hosted on `github.com/honojs/middleware`. 26 | 27 | ## Author 28 | 29 | Yusuke Wada 30 | 31 | ## License 32 | 33 | MIT 34 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/assets/public/favicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/assets/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/web-manifest-combined.json", 3 | "name": "qwik-project-name", 4 | "short_name": "Welcome to Qwik", 5 | "start_url": ".", 6 | "display": "standalone", 7 | "background_color": "#fff", 8 | "description": "A Qwik project app." 9 | } 10 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/assets/public/robots.txt: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yusukebe/hono-examples/8f176854cd4dcd353543663a6b39344ba6408459/projects/hono-with-qwik/assets/public/robots.txt -------------------------------------------------------------------------------- /projects/hono-with-qwik/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-qwik-basic-starter", 3 | "description": "App with Routing built-in (recommended)", 4 | "engines": { 5 | "node": ">=15.0.0" 6 | }, 7 | "private": true, 8 | "scripts": { 9 | "build": "qwik build", 10 | "build.client": "vite build", 11 | "build.preview": "vite build --ssr src/entry.preview.tsx", 12 | "build.workers": "vite build -c vite.config.workers.ts", 13 | "build.bun": "vite build -c vite.config.bun.ts", 14 | "build.types": "tsc --incremental --noEmit", 15 | "deploy": "yarn build.workers && wrangler publish server/entry.workers.mjs", 16 | "dev": "vite --mode ssr", 17 | "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force", 18 | "fmt": "prettier --write .", 19 | "fmt.check": "prettier --check .", 20 | "lint": "eslint \"src/**/*.ts*\"", 21 | "preview": "qwik build preview && vite preview --open", 22 | "start": "vite --open --mode ssr", 23 | "qwik": "qwik" 24 | }, 25 | "devDependencies": { 26 | "@builder.io/qwik": "0.16.2", 27 | "@builder.io/qwik-city": "^0.1.0-beta9", 28 | "@types/eslint": "8.4.10", 29 | "@types/node": "^18.11.18", 30 | "@types/node-fetch": "latest", 31 | "@typescript-eslint/eslint-plugin": "5.48.0", 32 | "@typescript-eslint/parser": "5.48.0", 33 | "eslint": "8.31.0", 34 | "eslint-plugin-qwik": "0.16.2", 35 | "hono": "^3.3.1", 36 | "node-fetch": "3.3.0", 37 | "prettier": "2.8.1", 38 | "typescript": "4.9.4", 39 | "undici": "5.14.0", 40 | "vite": "^4.1.1", 41 | "vite-tsconfig-paths": "3.5.0", 42 | "wrangler": "^2.7.1" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/src/components/header/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | display: flex; 3 | background: white; 4 | border-bottom: 10px solid var(--qwik-dark-purple); 5 | } 6 | 7 | header .logo a { 8 | display: inline-block; 9 | padding: 10px 10px 7px 20px; 10 | } 11 | 12 | header ul { 13 | margin: 0; 14 | padding: 3px 10px 0 0; 15 | list-style: none; 16 | flex: 1; 17 | text-align: right; 18 | } 19 | 20 | header li { 21 | display: inline-block; 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | header li a { 27 | display: inline-block; 28 | padding: 15px 10px; 29 | text-decoration: none; 30 | } 31 | 32 | header li a:hover { 33 | text-decoration: underline; 34 | } 35 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/src/components/header/header.tsx: -------------------------------------------------------------------------------- 1 | import { component$, useStylesScoped$ } from '@builder.io/qwik'; 2 | import { QwikLogo } from '../icons/qwik'; 3 | import styles from './header.css?inline'; 4 | 5 | export default component$(() => { 6 | useStylesScoped$(styles); 7 | 8 | return ( 9 |
10 | 15 | 32 |
33 | ); 34 | }); 35 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/src/components/icons/qwik.tsx: -------------------------------------------------------------------------------- 1 | export const QwikLogo = () => ( 2 | 3 | 7 | 11 | 15 | 19 | 23 | 27 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /projects/hono-with-qwik/src/components/router-head/router-head.tsx: -------------------------------------------------------------------------------- 1 | import { component$ } from '@builder.io/qwik'; 2 | import { useDocumentHead, useLocation } from '@builder.io/qwik-city'; 3 | 4 | /** 5 | * The RouterHead component is placed inside of the document `` element. 6 | */ 7 | export const RouterHead = component$(() => { 8 | const head = useDocumentHead(); 9 | const loc = useLocation(); 10 | 11 | return ( 12 | <> 13 | {head.title} 14 | 15 | 16 | 17 | 18 | 19 | {head.meta.map((m) => ( 20 | 21 | ))} 22 | 23 | {head.links.map((l) => ( 24 | 25 | ))} 26 | 27 | {head.styles.map((s) => ( 28 |