@nanostores/logger 0.4.0 → 1.1.0

package/README.md

@@ -3,7 +3,7 @@
 <img align="right" width="92" height="92" title="Nano Stores logo"
      src="https://nanostores.github.io/nanostores/logo.svg">
 
-Logger of lifecycles 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.
@@ -22,5 +22,6 @@ a tiny state manager with many atomic tree-shakable stores.
   </picture>
 </p>
 
+
 ## Docs
 Read full docs **[here](https://github.com/nanostores/logger#readme)**.

package/action/index.d.ts

@@ -0,0 +1,35 @@
+import type { WritableStore } from 'nanostores'
+
+type OmitFirstArg<F> = F extends (x: any, ...args: infer P) => infer R
+  ? (...args: P) => R
+  : never
+
+export const lastActionName: unique symbol
+export const lastActionId: unique symbol
+
+/**
+ * Action is a function which changes the store.
+ *
+ * This wrap allows DevTools to see the name of action, which changes the store.
+ *
+ * ```js
+ * export const increase = action($counter, 'increase', ($store, value = 1) => {
+ *   if (validateMax($store.get() + value)) {
+ *     $store.set($store.get() + value)
+ *   }
+ *   return $store.get()
+ * })
+ *
+ * increase()  //=> 1
+ * increase(5) //=> 6
+ * ```
+ *
+ * @param store Store instance.
+ * @param actionName Action name for logs.
+ * @param cb Function changing the store.
+ * @returns Wrapped function with the same arguments.
+ */
+export function action<
+  SomeStore extends WritableStore,
+  Callback extends ($store: SomeStore, ...args: any[]) => any
+>(store: SomeStore, actionName: string, cb: Callback): OmitFirstArg<Callback>

package/action/index.js

@@ -0,0 +1,85 @@
+import { startTask } from 'nanostores'
+
+export let lastActionId = Symbol('last-action-id')
+export let lastActionName = Symbol('last-action-name')
+
+let uid = 0
+let actionHook = Symbol('action-hook')
+
+export function onAction($store, listener) {
+  $store[actionHook] = (id, actionName, args) => {
+    let errorListeners = {}
+    let endListeners = {}
+    listener({
+      actionName,
+      args,
+      id,
+      onEnd: l => {
+        ;(endListeners[id] || (endListeners[id] = [])).push(l)
+      },
+      onError: l => {
+        ;(errorListeners[id] || (errorListeners[id] = [])).push(l)
+      }
+    })
+    return [
+      error => {
+        if (errorListeners[id]) {
+          for (let l of errorListeners[id]) l({ error })
+        }
+      },
+      () => {
+        if (endListeners[id]) {
+          for (let l of endListeners[id]) l()
+          delete errorListeners[id]
+          delete endListeners[id]
+        }
+      }
+    ]
+  }
+
+  return () => {
+    delete $store[actionHook]
+  }
+}
+
+export function action($store, actionName, cb) {
+  return (...args) => {
+    let id = ++uid
+    let tracker = { ...$store }
+    tracker.set = (...setArgs) => {
+      $store[lastActionName] = actionName
+      $store[lastActionId] = id
+      $store.set(...setArgs)
+      delete $store[lastActionName]
+      delete $store[lastActionId]
+    }
+    if ($store.setKey) {
+      tracker.setKey = (...setArgs) => {
+        $store[lastActionName] = actionName
+        $store[lastActionId] = id
+        $store.setKey(...setArgs)
+        delete $store[lastActionName]
+        delete $store[lastActionId]
+      }
+    }
+    let onEnd, onError
+    if ($store[actionHook]) {
+      ;[onError, onEnd] = $store[actionHook](id, actionName, args)
+    }
+    let result = cb(tracker, ...args)
+    if (result instanceof Promise) {
+      let endTask = startTask()
+      return result
+        .catch(error => {
+          if (onError) onError(error)
+          throw error
+        })
+        .finally(() => {
+          endTask()
+          if (onEnd) onEnd()
+        })
+    }
+    if (onEnd) onEnd()
+    return result
+  }
+}

package/build-logger/index.d.ts

@@ -1,6 +1,11 @@
 import type { AnyStore, Store, StoreValue } from 'nanostores'
 
 interface LoggerOptionsMessages {
+  /**
+   * Disable action logs.
+   */
+  action?: boolean
+
   /**
    * Disable change logs.
    */
@@ -18,6 +23,11 @@ interface LoggerOptionsMessages {
 }
 
 export interface LoggerOptions {
+  /**
+   * Disable logs of actions with a specific name.
+   */
+  ignoreActions?: string[]
+
   /**
    * Disable specific types of logs.
    */
@@ -29,13 +39,33 @@ interface EventPayloadBase {
 }
 
 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
@@ -57,13 +87,30 @@ interface BuildLoggerEvents {
  *     console.log(`${storeName} was unmounted`)
  *   },
  *
- *   change: ({ changed, newValue, oldValue, valueMessage }) => {
+ *   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

package/build-logger/index.js

@@ -1,7 +1,17 @@
-import { onMount, onNotify, onSet } from 'nanostores'
+import { getPath, onMount, onNotify, onSet } from 'nanostores'
+
+import { lastActionId, lastActionName, onAction } from '../action/index.js'
 
 const isAtom = store => store.setKey === undefined
-const isDeepMapKey = key => /.+(\..+|\[\d+\.*])/.test(key)
+const isPrimitive = value => value !== Object(value) || value === null
+/* v8 ignore next 7 */
+const clone = value => {
+  try {
+    return structuredClone(value)
+  } catch {
+    return { ...value }
+  }
+}
 
 function handleMount(store, storeName, messages, events) {
   return onMount(store, () => {
@@ -16,18 +26,37 @@ function handleMount(store, storeName, messages, events) {
   })
 }
 
-function handleSet(store, storeName, events) {
-  return onSet(store, ({ changed }) => {
-    let oldValue = isAtom(store) ? store.value : { ...store.value }
-    oldValue = isDeepMapKey(changed) ? structuredClone(oldValue) : oldValue
-    let unbindNotify = onNotify(store, () => {
-      let newValue = store.value
+function handleSet(store, storeName, messages, ignoreActions, events) {
+  return onSet(store, () => {
+    let currentActionId = store[lastActionId]
+    let currentActionName = store[lastActionName]
+
+    if (messages.action === false && currentActionId) return
+    if (ignoreActions.includes(currentActionName)) return
+
+    let oldValue = clone(store.value)
+
+    let unbindNotify = onNotify(store, ({ changed }) => {
+      let newValue = clone(store.value)
+
       let valueMessage
-      if (changed && !isDeepMapKey(changed)) {
-        valueMessage = `${oldValue[changed]} → ${newValue[changed]}`
+      if (isAtom(store)) {
+        if (isPrimitive(newValue) && isPrimitive(oldValue)) {
+          valueMessage = `${oldValue} → ${newValue}`
+          oldValue = undefined
+          newValue = undefined
+        }
+      } else if (changed) {
+        let oldPrimitiveValue = getPath(oldValue, changed)
+        let newPrimitiveValue = getPath(newValue, changed)
+        if (isPrimitive(oldPrimitiveValue) && isPrimitive(newPrimitiveValue)) {
+          valueMessage = `${oldPrimitiveValue} → ${newPrimitiveValue}`
+        }
       }
 
       events.change({
+        actionId: currentActionId,
+        actionName: currentActionName,
         changed,
         newValue,
         oldValue,
@@ -40,7 +69,24 @@ function handleSet(store, storeName, events) {
   })
 }
 
+function handleAction(store, storeName, ignoreActions, events) {
+  return onAction(store, ({ actionName, args, id, onEnd, onError }) => {
+    if (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 })
+    })
+  })
+}
+
 export function buildLogger(store, storeName, events, opts = {}) {
+  let ignoreActions = opts.ignoreActions || []
   let messages = opts.messages || {}
   let unbind = []
 
@@ -49,7 +95,11 @@ export function buildLogger(store, storeName, events, opts = {}) {
   }
 
   if (messages.change !== false) {
-    unbind.push(handleSet(store, storeName, events))
+    unbind.push(handleSet(store, storeName, messages, ignoreActions, events))
+  }
+
+  if (messages.action !== false) {
+    unbind.push(handleAction(store, storeName, ignoreActions, events))
   }
 
   return () => {

package/index.d.ts

@@ -1,3 +1,4 @@
+export { action } from './action/index.js'
 export {
   buildCreatorLogger,
   CreatorLoggerOptions

package/index.js

@@ -1,3 +1,4 @@
+export { action } from './action/index.js'
 export { buildCreatorLogger } from './build-creator-logger/index.js'
 export { buildLogger } from './build-logger/index.js'
 export { creatorLogger } from './creator-logger/index.js'

package/logger/index.js

@@ -2,13 +2,66 @@ import { buildLogger } from '../build-logger/index.js'
 import { group, groupEnd, log } from '../printer/index.js'
 
 function createLogger(store, storeName, opts) {
+  let queue = {}
+
   return buildLogger(
     store,
     storeName,
     {
-      change: ({ changed, newValue, oldValue, valueMessage }) => {
+      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
+              })
+            )
+          }
+        }
+      },
+
+      change: ({ actionId, changed, newValue, oldValue, valueMessage }) => {
         let groupLog = {
-          logo: true,
+          logo: typeof actionId === 'undefined',
           message: [
             ['bold', storeName],
             ['regular', 'store was changed']
@@ -22,24 +75,35 @@ function createLogger(store, storeName, opts) {
             ['regular', 'key']
           )
         }
-        group(groupLog)
-        if (valueMessage) {
-          log({
-            message: valueMessage,
-            type: 'value'
-          })
+
+        let run = () => {
+          group(groupLog)
+          if (valueMessage) {
+            log({
+              message: valueMessage,
+              type: 'value'
+            })
+          }
+          if (newValue) {
+            log({
+              type: 'new',
+              value: newValue
+            })
+          }
+          if (oldValue) {
+            log({
+              type: 'old',
+              value: oldValue
+            })
+          }
+          groupEnd()
         }
-        log({
-          type: 'new',
-          value: newValue
-        })
-        if (oldValue) {
-          log({
-            type: 'old',
-            value: oldValue
-          })
+
+        if (actionId) {
+          queue[actionId].push(run)
+        } else {
+          run()
         }
-        groupEnd()
       },
 
       mount: () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nanostores/logger",
-  "version": "0.4.0",
-  "description": "Pretty logger of lifecycles and changes for Nano Stores",
+  "version": "1.1.0",
+  "description": "Pretty logger of lifecycles, changes and actions for Nano Stores",
   "keywords": [
     "nanostores",
     "devtools",
@@ -20,10 +20,17 @@
     ".": "./index.js",
     "./package.json": "./package.json"
   },
+  "packageManager": "pnpm@10.30.3+sha512.c961d1e0a2d8e354ecaa5166b822516668b7f44cb5bd95122d590dd81922f606f5473b6d23ec4a5be05e7fcd18e8488d47d978bbe981872f1145d06e9a740017",
   "engines": {
-    "node": "^18.0.0 || >=20.0.0"
+    "node": "^20.0.0 || >=22.0.0"
   },
+  "funding": [
+    {
+      "type": "buymeacoffee",
+      "url": "https://buymeacoffee.com/euaaaio"
+    }
+  ],
   "peerDependencies": {
-    "nanostores": ">=0.10.2"
+    "nanostores": "^0.10.0 || ^0.11.0 || ^1.0.0"
   }
 }

package/printer/index.d.ts

@@ -1,4 +1,5 @@
 type LogType =
+  | 'action'
   | 'arguments'
   | 'build'
   | 'change'

package/printer/index.js

@@ -14,6 +14,7 @@ function borders(full) {
 
 const STYLES = {
   badges: {
+    action: badge('#00899A'),
     arguments: badge('#007281'),
     build: badge('#BB5100'),
     change: badge('#0E8A00'),