Nano Stores Logger

Logger of lifecycles, changes and actions for Nano Stores, a tiny state manager with many atomic tree-shakable stores.

• Clean. All messages are stacked in compact, collapsible nested groups.
• Descriptive. Detailed descriptions with a clear comparison of the old and new values.
• Pretty designed. Compact logo and color badges for quick reading.
• Flexible. Ability to disable and filter certain types of messages.
• Supports all types of stores: Atom, Map and Deep Map.

Install

npm install @nanostores/logger

Usage

import { logger } from '@nanostores/logger'

import { $profile, $users } from './stores/index.js'

let destroy = logger({
  'Profile': $profile,
  'Users': $users
})

Filter messages

Disable specific types of logs

Using messages option you can disable mount, unmount, change or action log messages.

import { logger } from '@nanostores/logger'

import { $users } from './stores/index.js'

let destroy = logger({ $users }, {
  messages: {
    mount: false,
    unmount: false
  }
})

Disable logs of actions with a specific name

Using the ignoreActions option, you can specify the names of actions that will not be logged.

import { logger } from '@nanostores/logger'

import { $users } from './stores/index.js'

let destroy = logger({ $users }, {
  ignoreActions: [
    'Change Username',
    'Fetch User Profile'
  ]
})

Custom messages

You can create custom log messages and collapsible nested groups of messages with your own name and badge color or with any predefined types.

Available types: action, arguments, build, change, error, mount, new, old, unmount, value.

import { group, groupEnd, log } from '@nanostores/logger'

log({
  logo: true,
  type: {
    color: '#510080',
    name: 'Fetch'
  },
  message: [
    ['bold', 'Profile'],
    ['regular', 'store is trying to get new values']
  ]
})

Advanced usage

Logging map creators

With creatorLogger you can log map creators such as Logux’s SyncMapTemplate.

import { creatorLogger } from '@nanostores/logger'

let destroy = creatorLogger({ $users }, {
  nameGetter: (creatorName, store) => {
    return `${creatorName}:${store.value.id}`
  }
})

Building devtools

If you need to create you own devtools or an extension for you devtools we have buildLogger and buildCreatorLogger methods with complex logging logic inside.

import { buildLogger } from '@nanostores/logger'
import { $profile } from './stores/index.js'

let destroy = buildLogger($profile, 'Profile', {
  mount: ({ storeName }) => {
    console.log(`${storeName} was mounted`)
  },

  unmount: ({ storeName }) => {
    console.log(`${storeName} was unmounted`)
  },

  change: ({ actionName, changed, newValue, oldValue, valueMessage }) => {
    let message = `${storeName} was changed`
    if (changed) message += `in the ${changed} key`
    if (oldValue) message += `from ${oldValue}`
    message += `to ${newValue}`
    if (actionName) message += `by action ${actionName}`
    console.log(message, valueMessage)
  },

  action: {
    start: ({ actionName, args }) => {
      let message = `${actionName} was started`
      if (args.length) message += 'with arguments'
      console.log(message, args)
    },

    error: ({ actionName, error }) => {
      console.log(`${actionName} was failed`, error)
    },

    end: ({ actionName }) => {
      console.log(`${actionName} was ended`)
    }
  }
})