feat(middlewares): add logger middleware

packages/emittor-middlewares/README.md

@@ -102,8 +102,27 @@ page.use(
 );
 ```
 
+## Usage
+
+### 4) Log state changes
+
+A simple logger to trace state changes.
+
+```ts
+import { createEmittor } from "emittor";
+import { middlewareLogger } from "emittor-middlewares";
+
+export const search = createEmittor("");
+
+search.use(middlewareLogger);
+```
+
 ## API
 
+### `middlewareLogger => Middleware`
+
+Log state changes with timestamps.
+
 ### `middlewareDebounce(callback, options?) => Middleware`
 
 Debounce a callback that receives the emittor, then calls `next()`.

packages/emittor-middlewares/package.json

@@ -22,7 +22,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "check-types": "tsc --noEmit"
   },
   "keywords": [],
   "author": "immi",

packages/emittor-middlewares/src/index.ts

@@ -1 +1,2 @@
 export * from "./middlewares";
+export * from "./logger";

packages/emittor-middlewares/src/logger.ts

@@ -0,0 +1,21 @@
+import type { Middleware } from "emittor";
+
+const style = (color: string) => `color: ${color}; font-weight: bold;`;
+
+export const middlewareLogger: Middleware<any, any> = (next, em) => {
+  const prevState = em.getState();
+  const time = new Date();
+
+  console.groupCollapsed(
+    `%cemittor @ ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}.${time.getMilliseconds()}`,
+    style("gray")
+  );
+
+  console.log("%cprev state", style("#9E9E9E"), prevState);
+
+  next();
+
+  const nextState = em.getState();
+  console.log("%cnext state", style("#4CAF50"), nextState);
+  console.groupEnd();
+};

packages/emittor-middlewares/tsconfig.json

@@ -7,7 +7,6 @@
     "noUncheckedIndexedAccess": true,
     "target": "ES2022",
     "outDir": "dist",
-    "rootDir": "src",
     "module": "esnext",
     "moduleResolution": "node",
     "lib": ["dom", "dom.iterable", "esnext", "es2022"],
@@ -21,11 +20,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     // "noEmit": true,
-    "jsx": "react-jsx",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
+    "jsx": "react-jsx"
   },
   "include": ["src"],
   "exclude": ["node_modules", "dist"]

packages/emittor/package.json

@@ -21,7 +21,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsx ./preBuild.ts && tsup"
+    "build": "tsx ./preBuild.ts && tsup",
+    "check-types": "tsc --noEmit"
   },
   "keywords": [
     "next",