From c8ac0633f5b5cc44216cea298d9b9d743f39fabb Mon Sep 17 00:00:00 2001 From: Marco Cabrera Date: Tue, 24 Sep 2024 21:45:09 -0500 Subject: [PATCH] Adds hono-bun-jsx example --- hono-bun-jsx/README.md | 28 ++++++++++++++++++++++++++++ hono-bun-jsx/package.json | 12 ++++++++++++ hono-bun-jsx/src/App.tsx | 28 ++++++++++++++++++++++++++++ hono-bun-jsx/src/index.tsx | 27 +++++++++++++++++++++++++++ hono-bun-jsx/static/fallback.txt | 1 + hono-bun-jsx/static/hello.txt | 1 + hono-bun-jsx/tsconfig.json | 7 +++++++ 7 files changed, 104 insertions(+) create mode 100644 hono-bun-jsx/README.md create mode 100644 hono-bun-jsx/package.json create mode 100644 hono-bun-jsx/src/App.tsx create mode 100644 hono-bun-jsx/src/index.tsx create mode 100644 hono-bun-jsx/static/fallback.txt create mode 100644 hono-bun-jsx/static/hello.txt create mode 100644 hono-bun-jsx/tsconfig.json diff --git a/hono-bun-jsx/README.md b/hono-bun-jsx/README.md new file mode 100644 index 0000000..61a505c --- /dev/null +++ b/hono-bun-jsx/README.md @@ -0,0 +1,28 @@ +# Hono + Bun Basic Client Component Example +This is a simple project that demonstrates how to build a basic Hono app with Bun, including a client-side component rendered using `hono/jsx`. + +## Getting Started +1. **Install Dependencies** + First, make sure you have Bun installed. Then, install the necessary dependencies: + + ```sh + bun install + ``` + +2. **Running the Project** + To start the development server and bundle the client-side code: + + ```sh + bun run dev + ``` + + This will do two things: + - Bundle the client-side code from `src/App.tsx` into `static/App.js`. + - Start the Bun server with hot reloading using `src/index.tsx`. + +3. **Open the App** + Once the server is running, open your browser and navigate to: + [http://localhost:3000](http://localhost:3000) + + You should see a basic app with a counter component that you can increment. + diff --git a/hono-bun-jsx/package.json b/hono-bun-jsx/package.json new file mode 100644 index 0000000..9c5349e --- /dev/null +++ b/hono-bun-jsx/package.json @@ -0,0 +1,12 @@ +{ + "name": "my-app", + "scripts": { + "dev": "bun build src/App.tsx --outdir ./static --outfile App.js && bun run --hot src/index.tsx" + }, + "dependencies": { + "hono": "^4.5.11" + }, + "devDependencies": { + "@types/bun": "latest" + } +} \ No newline at end of file diff --git a/hono-bun-jsx/src/App.tsx b/hono-bun-jsx/src/App.tsx new file mode 100644 index 0000000..26d63f2 --- /dev/null +++ b/hono-bun-jsx/src/App.tsx @@ -0,0 +1,28 @@ +import { FC, useState } from 'hono/jsx'; +import {render} from 'hono/jsx/dom'; + +function Counter() { + const [count, setCount] = useState(0); + return ( +
+

Count: {count}

+ +
+ ); +} + +export const App: FC = () => { + return ( +
+

Counter Example

+ +
+ ); +}; + +if (typeof window !== 'undefined') { + const root = document.getElementById('root'); + if (root) { + render(, root); + } +} diff --git a/hono-bun-jsx/src/index.tsx b/hono-bun-jsx/src/index.tsx new file mode 100644 index 0000000..99f0a0e --- /dev/null +++ b/hono-bun-jsx/src/index.tsx @@ -0,0 +1,27 @@ +import { Hono } from 'hono'; +import { serveStatic } from 'hono/bun'; +import {App} from "./App"; + +const app = new Hono(); + +app.use('/static/*', serveStatic({ root: './' })); + +app.get('/hello', (c) => c.text('You can access: /static/hello.txt')) + + +app.get('/', (c) => { + return c.html( + + +
+ {/* Render the App component on the server */} +
+ + + + ); +}); + +app.get('*', serveStatic({ path: './static/fallback.txt' })); + +export default app; \ No newline at end of file diff --git a/hono-bun-jsx/static/fallback.txt b/hono-bun-jsx/static/fallback.txt new file mode 100644 index 0000000..e8a037c --- /dev/null +++ b/hono-bun-jsx/static/fallback.txt @@ -0,0 +1 @@ +Error on page. Hold your horses. \ No newline at end of file diff --git a/hono-bun-jsx/static/hello.txt b/hono-bun-jsx/static/hello.txt new file mode 100644 index 0000000..688c09b --- /dev/null +++ b/hono-bun-jsx/static/hello.txt @@ -0,0 +1 @@ +Hello from the static folder! \ No newline at end of file diff --git a/hono-bun-jsx/tsconfig.json b/hono-bun-jsx/tsconfig.json new file mode 100644 index 0000000..c442b33 --- /dev/null +++ b/hono-bun-jsx/tsconfig.json @@ -0,0 +1,7 @@ +{ + "compilerOptions": { + "strict": true, + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx" + } +} \ No newline at end of file