Add Enhanced Typescript-friendly Logging Middleware

[jiji-hoon96]

Motivation

This PR proposes an enhanced, TypeScript-friendly logging middleware for Zustand. While the existing logging example in the documentation is concise and effective, this extended version offers additional features and type safety that can be beneficial for larger, more complex projects.

Key Enhancements

1. TypeScript Support: Fully typed implementation for better integration with TypeScript projects.
2. Customization Options: Introduces LogOptions to allow users to easily enable/disable logging or use a custom logger.
3. Detailed Logging: Provides more comprehensive logging, including previous state, next state, and the specific change applied.
4. Reusability: Implemented as a middleware factory, making it easy to apply to multiple stores with different configurations.
5. Consistency with Zustand Types: Aligns with Zustand's internal type definitions for better compatibility.

Implementation

The proposed middleware extends the basic logging functionality while maintaining the spirit of Zustand's simplicity:

import { StateCreator, StoreMutatorIdentifier, State, StateSelector, EqualityChecker } from 'zustand';

type Write<T extends object, U extends object> = Omit<T, keyof U> & U;

type LoggingMiddleware = <
  T extends State,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
  U = T
>(
  f: StateCreator<T, Mps, Mcs, U>,
  name?: string
) => StateCreator<T, Mps, Mcs, U>;

type LogOptions = {
  /**
   * Enable/disable logging
   * @default true
   */
  enabled?: boolean;
  /**
   * Custom logger function
   * @default console.log
   */
  logger?: (message: string, ...args: any[]) => void;
};

export const createLoggingMiddleware = (options: LogOptions = {}): LoggingMiddleware => {
  const {
    enabled = true,
    logger = console.log
  } = options;

  return (f, name) => (set, get, store) => {
    type T = ReturnType<typeof f>;
    const loggedSet: typeof set = (...args) => {
      if (enabled) {
        const previousState = get();
        set(...args);
        const nextState = get();
        logger(
          `[Zustand] ${name || 'unnamed store'} updated:`,
          {
            previous: previousState,
            next: nextState,
            change: args[0]
          }
        );
      } else {
        set(...args);
      }
    };

    store.setState = loggedSet;

    return f(loggedSet, get, store);
  };
};

Usage Example

import create from 'zustand';
import { createLoggingMiddleware } from './loggingMiddleware';

const loggingMiddleware = createLoggingMiddleware({ enabled: true });

const useStore = create(
  loggingMiddleware(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
    }),
    'counterStore'
  )
);

[dai-shi]

Thanks for suggestion.

The log middleware is very easy to implement in JS and we let people develop their own.
That said, it's not easy in TS, and it might be considerable to add the (semi-)official log middleware.

Several concerns:

• We don't know all the detailed specs/requirements, so we should start with a third-party library, which might be the case forever.
• We generally don't do the const loggingMiddleware = createLoggingMiddleware({ enabled: true }); style. It's valid and useful, but not consistent with other middleware.
• Even you have enabled: false, the unused code remains. Dead code elimination doesn't work.

[jiji-hoon96]

Understood.
I thought it was simple, but I recognised that it wasn't all-encompassing.

Thank you for your answer. Best regards, Zustand Team 😀