feat(example): add proxy counter app

sor4chi · Dec 1, 2023 · 976a1fe · 976a1fe
1 parent 96dab87
commit 976a1fe
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 0 deletions.
diff --git a/examples/proxy-counter/README.md b/examples/proxy-counter/README.md
@@ -0,0 +1,8 @@
+```
+npm install
+npm run dev
+```
+
+```
+npm run deploy
+```
diff --git a/examples/proxy-counter/package.json b/examples/proxy-counter/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "hono-do-example-proxy-counter",
+  "private": true,
+  "version": "0.0.4",
+  "scripts": {
+    "lint": "eslint --fix --ext .ts,.tsx src",
+    "lint:check": "eslint --ext .ts,.tsx src",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "dev": "wrangler dev src/index.ts --port 3000",
+    "deploy": "wrangler deploy --minify src/index.ts"
+  },
+  "dependencies": {
+    "hono": "^3.6.0",
+    "hono-do": "workspace:*"
+  },
+  "devDependencies": {
+    "@cloudflare/workers-types": "^4.20230821.0",
+    "wrangler": "^3.7.0"
+  }
+}
diff --git a/examples/proxy-counter/src/counter.ts b/examples/proxy-counter/src/counter.ts
@@ -0,0 +1,20 @@
+import { generateHonoObject } from "hono-do";
+
+export const Counter = generateHonoObject("/counter", async (app, state) => {
+  const { storage } = state;
+  let value = (await storage.get<number>("value")) ?? 0;
+
+  app.post("/increment", (c) => {
+    storage.put("value", value++);
+    return c.text(value.toString());
+  });
+
+  app.post("/decrement", (c) => {
+    storage.put("value", value--);
+    return c.text(value.toString());
+  });
+
+  app.get("/", (c) => {
+    return c.text(value.toString());
+  });
+});
diff --git a/examples/proxy-counter/src/index.ts b/examples/proxy-counter/src/index.ts
@@ -0,0 +1,15 @@
+import { Hono } from "hono";
+
+import { Counter } from "./counter";
+import { Template } from "./template";
+
+const app = new Hono();
+
+app.use("/counter/*", Counter.byName("COUNTER", "counter"));
+
+app.get("/", (c) => {
+  return c.html(Template);
+});
+
+export default app;
+export * from "./counter";
diff --git a/examples/proxy-counter/src/template.ts b/examples/proxy-counter/src/template.ts
@@ -0,0 +1,28 @@
+export const Template = /*html*/ `
+<html>
+  <body>
+    <h1>Counter</h1>
+    <p>Current value: <span id="value"></span></p>
+    <button id="increment">Increment</button>
+    <button id="decrement">Decrement</button>
+    <script>
+      const value = document.getElementById("value");
+      const increment = document.getElementById("increment");
+      const decrement = document.getElementById("decrement");
+      const updateValue = async () => {
+        const res = await fetch("/counter");
+        value.innerText = await res.text();
+      }
+      increment.addEventListener("click", async () => {
+        await fetch("/counter/increment", { method: "POST" });
+        await updateValue();
+      })
+      decrement.addEventListener("click", async () => {
+        await fetch("/counter/decrement", { method: "POST" });
+        await updateValue();
+      })
+      updateValue();
+    </script>
+  </body>
+</html>
+`.trim();
diff --git a/examples/proxy-counter/tsconfig.json b/examples/proxy-counter/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "lib": [
+      "esnext"
+    ],
+    "types": [
+      "@cloudflare/workers-types"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "hono/jsx"
+  },
+}
diff --git a/examples/proxy-counter/wrangler.toml b/examples/proxy-counter/wrangler.toml
@@ -0,0 +1,9 @@
+name = "proxy-counter"
+compatibility_date = "2023-01-01"
+
+[durable_objects]
+bindings = [{ name = "COUNTER", class_name = "Counter" }]
+
+[[migrations]]
+tag = "v1"
+new_classes = ["Counter"]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml