Create a publishable mizu hono middleware client library (#18)

* Replace neon with libsql

* Fix json parsing of messages and add support for drizzle studio

* Define db in middleware for the hono app

* Remove the node:dev script

* Add comment to the db middleware

* Remove wrangler toml from api to reduce confusion

* Barebones prototype of npx support

* Improve migration logic for when we are in dist folder

* Hacky ability to serve frontend

* Add catchall for frontend routes

* Allow configuring the port for mizu via env var MIZU_PORT

* Start preparing a publish

* Remove @/ imports because they did not get transpiled correctly and NOW IT WORKS kinda

* Proxy api requests in vite on frontend to the api server

* Update readme and package.json

* Suppress type errors in find-source-function.ts

* Update tsconfig and then appease typescript

- changed types to "node" instead of cloudflare workers
- changed "module" to NodeNext, which required renaming a bunch of imports

* Remove more @/ imports because they do not play nicely with node

* Add comments to some confusing helpers

* Modify additional files after transition to node modules

* Bump package.json

* Fix more conflicts and format

* Modify biome to ignore all files in dist folders (including d.ts, which caused issues for me)

* Organize import test

* Okay vscode is confused about import org

* Change cli.cjs to cli.js

* Hackily automigrate

* Fix cli.js to work with modern node

* Simplify build and update readmes

* Update root readme

* Format

* Update api package.json license

* Ignore the biome config from published package

* Update readme

* Improve comments in cli.js

* Add comments about __dirname shim

* Write a comment to explain the getMigrationsFolder function

* Move typescript to dev deps

* Remove wrangler from the api

* Ignore drizzle.config.ts in the published package

* Bump package version of api to 0.0.8

* Format

* Update comment in index.node.ts about the GET catchall

* Fix references to renamed scripts folder (now test-content)

* Update npmignore and package.json in api after merge

* Format

* Prepare client library for publishing on npm

* Remove postinstall script from client-library

* Update README

* Add default createConfig to createHonoMiddleware

* Make installation easier

* Rename to @mizu-dev/hono

* Update package-lock

* Update README

* Hissssss tabs

client-library/.npmignore

@@ -0,0 +1,53 @@
+node_modules
+.dev.vars
+.dev.vars.example
+
+# do not publish src
+src/*
+
+# do not publish tsconfig or swcrc
+tsconfig.json
+.swcrc
+
+# do not publish biome config
+biome.jsonc
+
+# Change them to your taste:
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
+bun.lockb
+
+# mac
+.DS_Store
+
+# env files
+.env
+.envrc
+
+# VS Code
+.vscode/*
+*.code-workspace
+
+# CLion
+.idea
+
+# TypeScript / Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+node_modules
+package-lock.json
+yarn-error.log
+
+# Build tools
+.parcel-cache*
+.nx/cache
+*.tsbuildinfo
+
+# Personal files
+mizu.boots.code-workspace
+start-dev.sh

client-library/README.md

@@ -1,40 +1,73 @@
 # Mizu Client
 
-This is a client library that will send telemetry data to the Mizu server (in `../api`).
+This is a client library that will send telemetry data to a *local* Mizu server upon every incoming request and outgoing response.
 
-Note that it monkey-patches `console.*` functions to send logs to the Mizu server.
+Note that it also monkey-patches `console.*` functions to send logs to the Mizu server, 
+so any time you use a `console.log`, `console.error`, etc., in your app, it will send that data to Mizu.
 
-So, any time you use a `console.log`, `console.error`, etc., in your app, we will send that data to Mizu!
+## Quick Start
 
-This readme takes you through:
+Create hono project
+```sh
+# Create a hono project, using cloudflare-workers runtime
+npm create hono@latest my-hono-project
+# > cloudflare-workers
+```
 
-- Creating a Hono Project
-- Adding the mizu "client library"
-- Configuring your project to use mizu
+Install middleware
 
-## Create a Hono project
+```sh
+npm i @mizu-dev/hono
+```
 
-Create a new Hono project with the following command. When prompted, choose `cloudflare-workers` as the template.
+Add middleware
+
+```ts
+import { Hono } from "hono";
+import { createHonoMiddleware } from "@mizu-dev/hono";
+
+const app = new Hono();
+
+app.use(createHonoMiddleware())
+
+app.get("/", (c) => {
+  return c.text("Hello Hono!");
+});
+
+export default app;
+```
+
+Launch UI
 
 ```sh
-npm create hono@latest my-hono-project
+npx @mizu-dev/studio
 ```
 
-## Install the mizu client
+Visit `http://localhost:8788` to see your logs come in as you test your app!
 
-### Copy the `mizu.ts` file
-To install the mizu client, add this package as a dependency:
+## Usage
 
-``` bash
-npm install 'https://gitpkg.now.sh/brettimus/mizu/client-library?client-package-refactor'
+This section takes you through:
+
+- Creating a Hono Project
+- Installing the mizu client library
+- **Configuring** your project to use mizu
+- Launching the mizu UI
 
-# or with yarn:
-yarn add 'https://gitpkg.now.sh/brettimus/mizu/client-library?client-package-refactor'
+### Create a Hono project
+
+Create a new Hono project with the following command. When prompted, choose `cloudflare-workers` as the template.
+
+```sh
+npm create hono@latest my-hono-project
+# > cloudflare-workers
 ```
 
-### Trouble getting the latest version
+### Install the mizu client
 
-If you're not getting the latest version, it might be that your package manager is caching an older version of the package.  As a work around you may want to clear your local cache by running something like `yarn cache clean`
+```sh
+npm i @mizu-dev/hono
+```
 
 ### Add middleware
 
@@ -43,8 +76,8 @@ Add the mizu import, and then add middleware definitions **AT THE TOP OF YOUR AP
 If you only just started your project, you can copy paste the entire contents below into your `src/index.ts`:
 
 ```ts
-import { Context, Hono } from "hono";
-import { createHonoMiddleware } from "mizu";
+import { type Context, Hono } from "hono";
+import { createHonoMiddleware } from "@mizu-dev/hono";
 
 const app = new Hono();
 
@@ -63,20 +96,28 @@ const createConfig = (c: Context) => {
 
 app.use(createHonoMiddleware({ createConfig }))
 app.get("/", (c) => {
-	return c.text("Hello Hono!");
+  return c.text("Hello Hono!");
 });
 
 export default app;
 ```
 
-## Add `MIZU_ENDPOINT` environment variable
+### Add `MIZU_ENDPOINT` environment variable
 
-Add `MIZU_ENDPOINT=http://localhost:8788/v0/logs` to your `.dev.vars` file!
+Add `MIZU_ENDPOINT=http://localhost:8788/v0/logs` to your `.dev.vars` file. E.g.,
 
 ```sh
 echo -e '\nMIZU_ENDPOINT=http://localhost:8788/v0/logs\n' >> .dev.vars
 ```
 
 You should be good to go! Just execute `npm run dev` to kick off your new Hono project..
 
-Make requests to your Hono app, and the logs should show up in the Mizu UI at `http://localhost:5173`!
+Make requests to your Hono app, and the logs should show up in the mizu UI!
+
+### Launch the mizu UI
+
+```sh
+npx @mizu-dev/studio
+```
+
+That's it! You should see your logs in the mizu UI.

client-library/package.json

@@ -1,28 +1,36 @@
 {
-  "name": "mizu",
+  "name": "@mizu-dev/hono",
+  "description": "Hono middleware to forward data to a local instance of @mizu-dev/studio",
+  "author": "Fiberplane<[email protected]>",
   "type": "module",
   "main": "dist/index.js",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "dependencies": {
-    "@biomejs/biome": "^1.7.3",
     "@neondatabase/serverless": "^0.9.3",
-    "@swc/cli": "^0.3.12",
-    "@swc/core": "^1.5.22",
-    "@swc/plugin-transform-imports": "^2.0.4",
     "hono": "^4.3.9"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.7.3",
     "@cloudflare/workers-types": "^4.20240403.0",
-    "dotenv": "^16.4.5",
-    "tsx": "^4.10.5",
-    "typescript": "^5.4.5",
-    "wrangler": "^3.47.0"
+    "@swc/cli": "^0.3.12",
+    "@swc/core": "^1.5.22",
+    "@swc/plugin-transform-imports": "^2.0.4",
+    "rimraf": "^5.0.7",
+    "typescript": "^5.4.5"
+  },
+  "publishConfig": {
+    "access": "public"
   },
+  "license": "MIT or Apache 2",
+  "keywords": ["hono", "hono middleware", "local", "debugging"],
   "scripts": {
-    "build": "cd src && swc . -d ../dist",
     "format": "biome check . --write",
     "lint": "biome lint .",
     "lint:ci": "biome ci .",
-    "postinstall": "cd src && swc . -d ../dist"
+    "build": "npm run clean && npm run build:types && npm run build:swc",
+    "build:types": "tsc --project tsconfig.json",
+    "build:swc": "swc src -d dist --source-maps",
+    "prepublishOnly": "npm run build",
+    "clean": "rimraf dist"
   }
 }

client-library/src/honoMiddleware.ts

@@ -28,9 +28,23 @@ type Config = {
 
 type CreateConfig = (context: Context) => Config;
 
-export function createHonoMiddleware(options: {
+const defaultCreateConfig = (c: Context) => {
+  return {
+    endpoint: c.env?.MIZU_ENDPOINT ?? "http://localhost:8788/v0/logs",
+    service: c.env?.SERVICE_NAME || "unknown",
+    libraryDebugMode: c.env?.LIBRARY_DEBUG_MODE,
+    monitor: {
+      fetch: true,
+      logging: true,
+      requests: true,
+    },
+  };
+};
+
+export function createHonoMiddleware(options?: {
   createConfig: CreateConfig;
 }) {
+  const createConfig = options?.createConfig ?? defaultCreateConfig;
   return async function honoMiddleware(c: Context, next: () => Promise<void>) {
     const {
       endpoint,
@@ -42,7 +56,7 @@ export function createHonoMiddleware(options: {
         // logging: monitorLogging,
         // requests: monitorRequests,
       },
-    } = options.createConfig(c);
+    } = createConfig(c);
     const ctx = c.executionCtx;
 
     // NOTE - Polyfilling `waitUntil` is probably not necessary for Cloudflare workers, but could be good for vercel envs

client-library/tsconfig.json

@@ -1,12 +1,16 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "module": "ESNext",
+    "target": "ES2020",
+    "module": "ES6",
     "moduleResolution": "Bundler",
     "strict": true,
     "skipLibCheck": true,
     "lib": ["ESNext"],
     "types": ["@cloudflare/workers-types"],
-    "noEmit": true
-  }
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true
+  },
+  "include": ["src"]
 }