@nanostores/logger 0.1.0 → 0.2.0

package/README.md

@@ -3,10 +3,24 @@
 <img align="right" width="92" height="92" title="Nano Stores logo"
      src="https://nanostores.github.io/nanostores/logo.svg">
 
-Logger of lifecycles, actions and changes for **[Nano Stores]**,
+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.
+
 [Nano Stores]: https://github.com/nanostores/nanostores/
 
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./img/dark.png">
+    <source media="(prefers-color-scheme: light)" srcset="./img/light.png">
+    <img alt="Nano Stores Logger" src="./img/light.png">
+  </picture>
+</p>
+
 ## Docs
 Read full docs **[here](https://github.com/nanostores/logger#readme)**.

package/build-logger/index.d.ts

@@ -0,0 +1,126 @@
+import type { AnyStore, Store, StoreValue } from 'nanostores'
+
+interface LoggerOptionsMessages {
+  /**
+   * Disable action logs.
+   */
+  action?: boolean
+
+  /**
+   * Disable change logs.
+   */
+  change?: boolean
+
+  /**
+   * Disable mount logs.
+   */
+  mount?: boolean
+
+  /**
+   * Disable unmount logs.
+   */
+  unmount?: boolean
+}
+
+export interface LoggerOptions {
+  /**
+   * Disable logs of actions with a specific name.
+   */
+  ignoreActions?: string[]
+
+  /**
+   * Disable specific types of logs.
+   */
+  messages?: LoggerOptionsMessages
+}
+
+interface EventPayloadBase {
+  storeName: string
+}
+
+interface EventChangePayload extends EventPayloadBase {
+  actionId?: number
+  actionName?: string
+  changed?: keyof StoreValue<Store>
+  newValue: any
+  oldValue?: any
+  valueMessage?: string
+}
+
+interface EventActionPayload extends EventPayloadBase {
+  actionId: number
+  actionName: string
+}
+
+interface EventActionStartPayload extends EventActionPayload {
+  args: any[]
+}
+
+interface EventActionErrorPayload extends EventActionPayload {
+  error: Error
+}
+
+interface BuildLoggerEvents {
+  action?: {
+    end?: (payload: EventActionPayload) => void
+    error?: (payload: EventActionErrorPayload) => void
+    start?: (payload: EventActionStartPayload) => void
+  }
+  change?: (payload: EventChangePayload) => void
+  mount?: (payload: EventPayloadBase) => void
+  unmount?: (payload: EventPayloadBase) => void
+}
+
+/**
+ * Builds logger for Nano Stores.
+ *
+ * ```js
+ * 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`)
+ *     }
+ *   }
+ * ```
+ *
+ * @param store Any Nano Store
+ * @param storeName Store name.
+ * @param events Events to log.
+ * @param opts Logger options.
+ */
+export function buildLogger(
+  store: AnyStore,
+  storeName: string,
+  events: BuildLoggerEvents,
+  opts?: LoggerOptions
+): () => void

package/build-logger/index.js

@@ -0,0 +1,94 @@
+import {
+  actionId,
+  lastAction,
+  onAction,
+  onMount,
+  onNotify,
+  onSet
+} from 'nanostores'
+
+const isAtom = store => store.setKey === undefined
+const isDeepMapKey = key => /.+(\..+|\[\d+\.*])/.test(key)
+
+function handleMount(store, storeName, messages, events) {
+  return onMount(store, () => {
+    if (messages.mount !== false) {
+      events.mount({ storeName })
+    }
+    return () => {
+      if (messages.unmount !== false) {
+        events.unmount({ storeName })
+      }
+    }
+  })
+}
+
+function handleAction(store, storeName, ignoreActions, events) {
+  return onAction(store, ({ actionName, args, id, onEnd, onError }) => {
+    if (ignoreActions && ignoreActions.includes(actionName)) return
+
+    events.action.start({ actionId: id, actionName, args, storeName })
+
+    onError(({ error }) => {
+      events.action.error({ actionId: id, actionName, error, storeName })
+    })
+
+    onEnd(() => {
+      events.action.end({ actionId: id, actionName, storeName })
+    })
+  })
+}
+
+function handleSet(store, storeName, messages, ignoreActions, events) {
+  return onSet(store, ({ changed }) => {
+    let currentActionId = store[actionId]
+    let currentActionName = store[lastAction]
+
+    if (messages.action === false && currentActionId) return
+    if (ignoreActions && ignoreActions.includes(currentActionName)) return
+
+    let oldValue = isAtom(store) ? store.value : { ...store.value }
+    oldValue = isDeepMapKey(changed) ? structuredClone(oldValue) : oldValue
+    let unbindNotify = onNotify(store, () => {
+      let newValue = store.value
+      let valueMessage
+      if (changed && !isDeepMapKey(changed)) {
+        valueMessage = `${oldValue[changed]} → ${newValue[changed]}`
+      }
+
+      events.change({
+        actionId: currentActionId,
+        actionName: currentActionName,
+        changed,
+        newValue,
+        oldValue,
+        storeName,
+        valueMessage
+      })
+
+      unbindNotify()
+    })
+  })
+}
+
+export function buildLogger(store, storeName, events, opts = {}) {
+  let ignoreActions = opts.ignoreActions
+  let messages = opts.messages || {}
+  let unbind = []
+
+  if (messages.mount !== false || messages.unmount !== false) {
+    unbind.push(handleMount(store, storeName, messages, events))
+  }
+
+  if (messages.action !== false) {
+    unbind.push(handleAction(store, storeName, ignoreActions, events))
+  }
+
+  if (messages.change !== false) {
+    unbind.push(handleSet(store, storeName, messages, ignoreActions, events))
+  }
+
+  return () => {
+    for (let i of unbind) i()
+  }
+}

package/creator-logger/index.d.ts

@@ -0,0 +1,25 @@
+import type { MapCreator, MapStore } from 'nanostores'
+
+import type { LoggerOptions } from '../build-logger/index.js'
+
+interface CreatorLoggerOptions extends LoggerOptions {
+  /**
+   * Custom name getter for stores built with creators.
+   *
+   * @param creatorName Name of the creator.
+   * @param store Store built by the creator.
+   * @returns Custom store name.
+   */
+  nameGetter: (creatorName: string, store: MapStore) => string
+}
+
+/**
+ * Displays Nano Stores events in browser console.
+ *
+ * @param creators Creators for logging.
+ * @param opts Logger options.
+ */
+export function creatorLogger(
+  creators: { [key: string]: MapCreator },
+  opts?: CreatorLoggerOptions
+): () => void

package/creator-logger/index.js

@@ -0,0 +1,60 @@
+import { logger } from '../logger/index.js'
+import { log } from '../printer/index.js'
+
+function onBuild(creator, listener) {
+  let originBuild = creator.build
+  creator.build = (...args) => {
+    let store = originBuild(...args)
+    listener(store)
+    return store
+  }
+  return () => {
+    creator.build = originBuild
+  }
+}
+
+function createCreatorLogger(creator, creatorName, opts) {
+  let nameGetter = opts.nameGetter
+  delete opts.nameGetter
+
+  let unbind = []
+  unbind.push(
+    onBuild(creator, store => {
+      let storeName = nameGetter(creatorName, store)
+
+      log({
+        logo: true,
+        message: [
+          ['bold', storeName],
+          ['regular', 'store was built by'],
+          ['bold', creatorName],
+          ['regular', 'creator']
+        ],
+        type: 'build'
+      })
+
+      unbind.push(logger({ [storeName]: store }, opts))
+    })
+  )
+
+  return () => {
+    for (let i of unbind) i()
+  }
+}
+
+const defaultNameGetter = (creatorName, store) => {
+  return `${creatorName}:${store.value.id}`
+}
+
+export function creatorLogger(creators, opts = {}) {
+  opts = {
+    nameGetter: defaultNameGetter,
+    ...opts
+  }
+  let unbind = Object.entries(creators).map(([creatorName, creator]) =>
+    createCreatorLogger(creator, creatorName, opts)
+  )
+  return () => {
+    for (let i of unbind) i()
+  }
+}

package/index.d.ts

@@ -1 +1,4 @@
+export { buildLogger } from './build-logger/index.js'
+export { creatorLogger } from './creator-logger/index.js'
 export { logger } from './logger/index.js'
+export { group, groupEnd, log } from './printer/index.js'

package/index.js

@@ -1 +1,4 @@
+export { buildLogger } from './build-logger/index.js'
+export { creatorLogger } from './creator-logger/index.js'
 export { logger } from './logger/index.js'
+export { group, groupEnd, log } from './printer/index.js'

package/logger/index.d.ts

@@ -1,49 +1,17 @@
 import type { AnyStore } from 'nanostores'
 
-interface LoggerOptionsMessages {
-  /**
-   * Disable action logs.
-   */
-  action?: boolean
-
-  /**
-   * Disable change logs.
-   */
-  change?: boolean
-
-  /**
-   * Disable mount logs.
-   */
-  mount?: boolean
-
-  /**
-   * Disable unmount logs.
-   */
-  unmount?: boolean
-}
-
-interface LoggerOptions {
-  /**
-   * Disable action logs with specific name.
-   */
-  ignoreActions?: string[]
-
-  /**
-   * Disable specific log types.
-   */
-  messages?: LoggerOptionsMessages
-}
+import type { LoggerOptions } from '../build-logger/index.js'
 
 /**
- * Display Nanostores events in browser console.
+ * Displays Nano Stores events in browser console.
  *
  * ```js
  * import { logger } from '@nanostores/logger'
  * import { $profile, $users } from './stores/index.js'
  *
  * let destroy = logger({
- *   'Profile Store': $profile,
- *   'Users Store': $users
+ *   'Profile': $profile,
+ *   'Users': $users
  * })
  * ```
  *

package/logger/index.js

@@ -1,253 +1,133 @@
-import {
-  actionId,
-  lastAction,
-  onAction,
-  onMount,
-  onNotify,
-  onSet
-} from 'nanostores'
+import { buildLogger } from '../build-logger/index.js'
+import { group, groupEnd, log } from '../printer/index.js'
 
-function badge(color) {
-  return `
-    padding: 0 5px 2px;
-    margin-right: 5px;
-    font-weight: 400;
-    color: white;
-    background-color: ${color};
-  `
-}
-
-function borders(full) {
-  return `border-radius: ${full ? '4px' : '0 4px 4px 0'};`
-}
-
-const STYLES = {
-  badges: {
-    action: badge('#5351A4'),
-    arguments: badge('#429BD7'),
-    change: badge('#0E8A00'),
-    error: badge('#c21f1f'),
-    mount: badge('#1F49E0'),
-    new: badge('#4FA574'),
-    old: badge('#a44f4f'),
-    unmount: badge('#5C5C5C'),
-    value: badge('#429BD7')
-  },
-  bold: 'font-weight: 700',
-  logo: `
-    padding: 0 5px 2px;
-    color: white;
-    background-color: black;
-    border-radius: 4px 0 0 4px;
-  `,
-  regular: 'font-weight: 400'
-}
-
-function createLog({ logo, message, type, value }) {
-  let template = ''
-  let args = []
-
-  if (logo) {
-    template = `%c𝖓`
-    args.push(STYLES.logo)
-  }
-
-  template += `%c${type}`
-  args.push(STYLES.badges[type] + borders(!logo))
-
-  if (message) {
-    if (Array.isArray(message)) {
-      message.forEach(([style, text]) => {
-        template += `%c ${text}`
-        args.push(STYLES[style])
-      })
-    } else {
-      template += `%c ${message}`
-      args.push(STYLES.text)
-    }
-  }
-
-  if (value) {
-    args.push(value)
-  }
+function createLogger(store, storeName, opts) {
+  let queue = {}
 
-  args.unshift(template)
+  return buildLogger(
+    store,
+    storeName,
+    {
+      action: {
+        end: ({ actionId }) => {
+          for (let i of queue[actionId]) i()
+          delete queue[actionId]
+          groupEnd()
+        },
+
+        error: ({ actionId, actionName, error }) => {
+          queue[actionId].push(() =>
+            log({
+              message: [
+                ['bold', storeName],
+                ['regular', 'store handled error in action'],
+                ['bold', actionName]
+              ],
+              type: 'error',
+              value: {
+                message: error.message
+              }
+            })
+          )
+        },
+
+        start: ({ actionId, actionName, args }) => {
+          queue[actionId] = []
+
+          let message = [
+            ['bold', storeName],
+            ['regular', 'store was changed by action'],
+            ['bold', actionName]
+          ]
+
+          queue[actionId].push(() =>
+            group({
+              logo: true,
+              message,
+              type: 'action'
+            })
+          )
+          if (args.length > 0) {
+            message.push(['regular', 'with arguments'])
+            queue[actionId].push(() =>
+              log({
+                type: 'arguments',
+                value: args
+              })
+            )
+          }
+        }
+      },
 
-  return args
-}
+      change: ({ actionId, changed, newValue, oldValue, valueMessage }) => {
+        let groupLog = {
+          logo: typeof actionId === 'undefined',
+          message: [
+            ['bold', storeName],
+            ['regular', 'store was changed']
+          ],
+          type: 'change'
+        }
+        if (changed) {
+          groupLog.message.push(
+            ['regular', 'in the'],
+            ['bold', changed],
+            ['regular', 'key']
+          )
+        }
 
-const log = args => console.log(...createLog(args))
-const group = args => console.groupCollapsed(...createLog(args))
-const groupEnd = () => console.groupEnd()
+        let run = () => {
+          group(groupLog)
+          if (valueMessage) {
+            log({
+              message: valueMessage,
+              type: 'value'
+            })
+          }
+          log({
+            type: 'new',
+            value: newValue
+          })
+          if (oldValue) {
+            log({
+              type: 'old',
+              value: oldValue
+            })
+          }
+          groupEnd()
+        }
 
-const isAtom = store => store.setKey === undefined
-const isDeepMapKey = key => /.+(\..+|\[\d+\.*])/.test(key)
+        if (actionId) {
+          queue[actionId].push(run)
+        } else {
+          run()
+        }
+      },
 
-function handleMount(store, storeName, messages) {
-  return onMount(store, () => {
-    if (messages.mount !== false) {
-      log({
-        logo: true,
-        message: [
-          ['bold', storeName],
-          ['regular', 'store was mounted']
-        ],
-        type: 'mount'
-      })
-    }
-    return () => {
-      if (messages.unmount !== false) {
+      mount: () => {
         log({
           logo: true,
           message: [
             ['bold', storeName],
-            ['regular', 'store was unmounted']
+            ['regular', 'store was mounted']
           ],
-          type: 'unmount'
+          type: 'mount'
         })
-      }
-    }
-  })
-}
+      },
 
-function handleAction(store, storeName, queue, ignoreActions) {
-  return onAction(store, ({ actionName, args, id, onEnd, onError }) => {
-    if (ignoreActions && ignoreActions.includes(actionName)) return
-
-    queue[id] = []
-
-    let message = [
-      ['bold', storeName],
-      ['regular', 'store was changed by action'],
-      ['bold', actionName]
-    ]
-
-    queue[id].push(() =>
-      group({
-        logo: true,
-        message,
-        type: 'action'
-      })
-    )
-    if (args.length > 0) {
-      message.push(['regular', 'with arguments'])
-      queue[id].push(() =>
-        log({
-          type: 'arguments',
-          value: args
-        })
-      )
-    }
-
-    onError(({ error }) => {
-      queue[id].push(() =>
+      unmount: () => {
         log({
+          logo: true,
           message: [
             ['bold', storeName],
-            ['regular', 'store handled error in action'],
-            ['bold', actionName]
+            ['regular', 'store was unmounted']
           ],
-          type: 'error',
-          value: {
-            message: error.message
-          }
+          type: 'unmount'
         })
-      )
-    })
-
-    onEnd(() => {
-      for (let i of queue[id]) i()
-      delete queue[id]
-      groupEnd()
-    })
-  })
-}
-
-function handleSet(store, storeName, queue, messages, ignoreActions) {
-  return onSet(store, ({ changed }) => {
-    let currentActionId = store[actionId]
-    let currentActionName = store[lastAction]
-
-    if (messages.action === false && currentActionId) return
-    if (ignoreActions && ignoreActions.includes(currentActionName)) return
-
-    let groupLog = {
-      logo: typeof currentActionId === 'undefined',
-      message: [
-        ['bold', storeName],
-        ['regular', 'store was changed']
-      ],
-      type: 'change'
-    }
-    if (changed) {
-      groupLog.message.push(
-        ['regular', 'in the'],
-        ['bold', changed],
-        ['regular', 'key']
-      )
-    }
-
-    let oldValue = isAtom(store) ? store.value : { ...store.value }
-    oldValue = isDeepMapKey(changed) ? structuredClone(oldValue) : oldValue
-    let unbindNotify = onNotify(store, () => {
-      let newValue = store.value
-      let valueMessage
-      if (changed && !isDeepMapKey(changed)) {
-        valueMessage = `${oldValue[changed]} → ${newValue[changed]}`
       }
-
-      let run = () => {
-        group(groupLog)
-        if (valueMessage) {
-          log({
-            message: valueMessage,
-            type: 'value'
-          })
-        }
-        log({
-          type: 'new',
-          value: newValue
-        })
-        if (oldValue) {
-          log({
-            type: 'old',
-            value: oldValue
-          })
-        }
-        groupEnd()
-      }
-
-      if (currentActionId) {
-        queue[currentActionId].push(run)
-      } else {
-        run()
-      }
-      unbindNotify()
-    })
-  })
-}
-
-function createLogger(store, storeName, opts) {
-  let ignoreActions = opts.ignoreActions
-  let messages = opts.messages || {}
-  let unbind = []
-  let queue = {}
-
-  if (messages.mount !== false || messages.unmount !== false) {
-    unbind.push(handleMount(store, storeName, messages))
-  }
-
-  if (messages.action !== false) {
-    unbind.push(handleAction(store, storeName, queue, ignoreActions))
-  }
-
-  if (messages.change !== false) {
-    unbind.push(handleSet(store, storeName, queue, messages, ignoreActions))
-  }
-
-  return () => {
-    for (let i of unbind) i()
-  }
+    },
+    opts
+  )
 }
 
 export function logger(stores, opts = {}) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nanostores/logger",
-  "version": "0.1.0",
-  "description": "Logger of lifecycles, actions and changes for Nano Stores",
+  "version": "0.2.0",
+  "description": "Pretty logger of lifecycles, changes and actions for Nano Stores",
   "keywords": [
     "nanostores",
     "devtools",

package/printer/index.d.ts

@@ -0,0 +1,55 @@
+type LogType =
+  | 'action'
+  | 'arguments'
+  | 'build'
+  | 'change'
+  | 'error'
+  | 'mount'
+  | 'new'
+  | 'old'
+  | 'unmount'
+  | 'value'
+  | {
+      color: string
+      name: string
+    }
+
+type LogMessageStyle = 'bold' | 'regular'
+
+interface CreateLogOptions {
+  /**
+   * Whether to display the Nano Stores logo.
+   */
+  logo?: boolean
+  /**
+   * Message in string or array format to be logged.
+   */
+  message?: [LogMessageStyle, string][] | string
+  /**
+   * The type of log.
+   */
+  type: LogType
+  /**
+   * Any value, object or array to be logged.
+   */
+  value?: any
+}
+
+/**
+ * Creates a log message.
+ *
+ * @param options Object with the options to create the log message.
+ */
+export function log(options: CreateLogOptions): void
+
+/**
+ * Creates a collapsed log message.
+ *
+ * @param options Object with the options to create the log message.
+ */
+export function group(options: CreateLogOptions): void
+
+/**
+ * Exits the current collapsed log message.
+ */
+export function groupEnd(): void

package/printer/index.js

@@ -0,0 +1,78 @@
+function badge(color) {
+  return `
+    padding: 0 5px 2px;
+    margin-right: 5px;
+    font-weight: 400;
+    color: white;
+    background-color: ${color};
+  `
+}
+
+function borders(full) {
+  return `border-radius: ${full ? '4px' : '0 4px 4px 0'};`
+}
+
+const STYLES = {
+  badges: {
+    action: badge('#00899A'),
+    arguments: badge('#007281'),
+    build: badge('#BB5100'),
+    change: badge('#0E8A00'),
+    error: badge('#C30000'),
+    mount: badge('#0059D1'),
+    new: badge('#0C7800'),
+    old: badge('#943636'),
+    unmount: badge('#5E5E5E'),
+    value: badge('#8A6F00')
+  },
+  bold: 'font-weight: 700;',
+  logo: `
+    padding: 0 5px 2px;
+    color: white;
+    background-color: black;
+    border-radius: 4px 0 0 4px;
+  `,
+  regular: 'font-weight: 400;'
+}
+
+function createLog({ logo, message, type, value }) {
+  let template = ''
+  let args = []
+
+  if (logo) {
+    template = `%c𝖓`
+    args.push(STYLES.logo)
+  }
+
+  if (typeof type === 'string') {
+    template += `%c${type}`
+    args.push(STYLES.badges[type] + borders(!logo))
+  } else if (typeof type === 'object') {
+    template += `%c${type.name.toLowerCase()}`
+    args.push(badge(type.color) + borders(!logo))
+  }
+
+  if (message) {
+    if (Array.isArray(message)) {
+      message.forEach(([style, text]) => {
+        template += `%c ${text}`
+        args.push(STYLES[style])
+      })
+    } else {
+      template += `%c ${message}`
+      args.push(STYLES.text)
+    }
+  }
+
+  if (value) {
+    args.push(value)
+  }
+
+  args.unshift(template)
+
+  return args
+}
+
+export const log = args => console.log(...createLog(args))
+export const group = args => console.groupCollapsed(...createLog(args))
+export const groupEnd = () => console.groupEnd()