@remix-run/logger-middleware 0.2.1 → 0.3.0

package/README.md

@@ -1,10 +1,11 @@
 # logger-middleware
 
-HTTP request/response logging middleware for Remix. It logs request metadata and response details with configurable output formats.
+HTTP request/response logging middleware for Remix. It logs request metadata and response details with configurable output formats, and exposes the configured log function on request context.
 
 ## Features
 
 - **Request/Response Logging** - Logs method, path, status, and response metadata
+- **Context Logger** - Exposes `context.logger` (or `context.get(Logger)`)
 - **Token-Based Formatting** - Customize log output with built-in placeholders
 - **Structured Timing Data** - Includes request duration and timestamps
 - **Colorized Output** - Highlights method, status, duration, and content length in TTY output
@@ -18,16 +19,23 @@ npm i remix
 ## Usage
 
 ```ts
-import { createRouter } from 'remix/fetch-router'
-import { logger } from 'remix/logger-middleware'
+import { createRouter } from 'remix/router'
+import { logger } from 'remix/middleware/logger'
 
 let router = createRouter({
   middleware: [logger()],
 })
 
+router.get('/users/:id', (context) => {
+  context.logger(`Loading user ${context.params.id}`)
+  return Response.json(loadUser(context.params.id))
+})
+
 // Logs: [19/Nov/2025:14:32:10 -0800] GET /users/123 200 1234
 ```
 
+Use `context.logger(message)` (or `context.get(Logger)(message)`) for app logs that should use the configured logger.
+
 ### Custom Format
 
 You can use the `format` option to customize the log format. The following tokens are available:

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { type LoggerOptions, logger } from './lib/logger.ts';
+export { Logger, type LoggerFunction, type LoggerOptions, logger } from './lib/logger.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1 +1 @@
-export { logger } from "./lib/logger.js";
+export { Logger, logger } from "./lib/logger.js";

package/dist/lib/logger.d.ts

@@ -1,4 +1,18 @@
-import type { Middleware } from '@remix-run/fetch-router';
+import { type Middleware } from '@remix-run/fetch-router';
+/**
+ * Function used to write log messages.
+ */
+export interface LoggerFunction {
+    /**
+     * Writes a log message.
+     */
+    (message: string): void;
+}
+/**
+ * Context key used to read the current request logger with `context.get(Logger)`.
+ * The `logger()` middleware also installs the logger as `context.logger`.
+ */
+export declare const Logger: import("../../../fetch-router/src/lib/request-context.ts").ContextKey<LoggerFunction>;
 /**
  * Options for the {@link logger} middleware.
  */
@@ -35,7 +49,7 @@ export interface LoggerOptions {
      *
      * @default console.log
      */
-    log?: (message: string) => void;
+    log?: LoggerFunction;
     /**
      * Enables ANSI colors for high-signal log tokens.
      *
@@ -60,5 +74,9 @@ export interface LoggerOptions {
  * @param options Options for the logger
  * @returns The logger middleware
  */
-export declare function logger(options?: LoggerOptions): Middleware;
+export declare function logger(options?: LoggerOptions): Middleware<{
+    key: typeof Logger;
+    value: LoggerFunction;
+    property: 'logger';
+}>;
 //# sourceMappingURL=logger.d.ts.map

package/dist/lib/logger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAIzD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,OAAO,GAAE,aAAkB,GAAG,UAAU,CA4C9D"}
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAI3E;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,uFAAqC,CAAA;AAExD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,GAAG,CAAC,EAAE,cAAc,CAAA;IACpB;;;;;;;;;;;;;;;OAeG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CACpB,OAAO,GAAE,aAAkB,GAC1B,UAAU,CAAC;IAAE,GAAG,EAAE,OAAO,MAAM,CAAC;IAAC,KAAK,EAAE,cAAc,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC,CA+C/E"}

package/dist/lib/logger.js

@@ -1,4 +1,10 @@
+import { createContextKey } from '@remix-run/fetch-router';
 import { createStyles } from '@remix-run/terminal';
+/**
+ * Context key used to read the current request logger with `context.get(Logger)`.
+ * The `logger()` middleware also installs the logger as `context.logger`.
+ */
+export const Logger = createContextKey();
 /**
  * Creates a middleware handler that logs various request/response info.
  *
@@ -8,7 +14,9 @@ import { createStyles } from '@remix-run/terminal';
 export function logger(options = {}) {
     let { colors, format = '[%date] %method %path %status %contentLength', log = console.log, } = options;
     let colorizer = getColorizer(colors);
-    return async ({ request, url }, next) => {
+    return async (context, next) => {
+        context.set(Logger, log, { property: 'logger' });
+        let { request, url } = context;
         let start = new Date();
         let response = await next();
         let end = new Date();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remix-run/logger-middleware",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Middleware for logging HTTP requests and responses",
   "author": "Michael Jackson <mjijackson@gmail.com>",
   "license": "MIT",
@@ -29,11 +29,11 @@
     "@types/node": "^24.6.0",
     "@typescript/native-preview": "7.0.0-dev.20251125.1",
     "@remix-run/assert": "0.2.0",
-    "@remix-run/fetch-router": "0.18.2",
-    "@remix-run/test": "0.3.0"
+    "@remix-run/fetch-router": "0.19.0",
+    "@remix-run/test": "0.4.0"
   },
   "dependencies": {
-    "@remix-run/fetch-router": "^0.18.2",
+    "@remix-run/fetch-router": "^0.19.0",
     "@remix-run/terminal": "^0.1.0"
   },
   "keywords": [

package/src/index.ts

@@ -1 +1 @@
-export { type LoggerOptions, logger } from './lib/logger.ts'
+export { Logger, type LoggerFunction, type LoggerOptions, logger } from './lib/logger.ts'

package/src/lib/logger.ts

@@ -1,7 +1,23 @@
-import type { Middleware } from '@remix-run/fetch-router'
+import { createContextKey, type Middleware } from '@remix-run/fetch-router'
 
 import { createStyles } from '@remix-run/terminal'
 
+/**
+ * Function used to write log messages.
+ */
+export interface LoggerFunction {
+  /**
+   * Writes a log message.
+   */
+  (message: string): void
+}
+
+/**
+ * Context key used to read the current request logger with `context.get(Logger)`.
+ * The `logger()` middleware also installs the logger as `context.logger`.
+ */
+export const Logger = createContextKey<LoggerFunction>()
+
 /**
  * Options for the {@link logger} middleware.
  */
@@ -38,7 +54,7 @@ export interface LoggerOptions {
    *
    * @default console.log
    */
-  log?: (message: string) => void
+  log?: LoggerFunction
   /**
    * Enables ANSI colors for high-signal log tokens.
    *
@@ -64,7 +80,9 @@ export interface LoggerOptions {
  * @param options Options for the logger
  * @returns The logger middleware
  */
-export function logger(options: LoggerOptions = {}): Middleware {
+export function logger(
+  options: LoggerOptions = {},
+): Middleware<{ key: typeof Logger; value: LoggerFunction; property: 'logger' }> {
   let {
     colors,
     format = '[%date] %method %path %status %contentLength',
@@ -72,7 +90,10 @@ export function logger(options: LoggerOptions = {}): Middleware {
   } = options
   let colorizer = getColorizer(colors)
 
-  return async ({ request, url }, next) => {
+  return async (context, next) => {
+    context.set(Logger, log, { property: 'logger' })
+
+    let { request, url } = context
     let start = new Date()
     let response = await next()
     let end = new Date()