@nanostores/logger 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright 2020 Eduard Aksamitov <e@euaaaio.ru>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,12 @@
+# Nano Stores Logger
+
+<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]**,
+a tiny state manager with many atomic tree-shakable stores.
+
+[Nano Stores]: https://github.com/nanostores/nanostores/
+
+## Docs
+Read full docs **[here](https://github.com/nanostores/logger#readme)**.

package/index.d.ts

@@ -0,0 +1 @@
+export { logger } from './logger/index.js'

package/index.js

@@ -0,0 +1 @@
+export { logger } from './logger/index.js'

package/logger/index.d.ts

@@ -0,0 +1,57 @@
+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
+}
+
+/**
+ * Display Nanostores 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
+ * })
+ * ```
+ *
+ * @param stores Stores for logging.
+ * @param opts Logger options.
+ * @returns A function to destroy logger.
+ */
+export function logger(
+  stores: { [key: string]: AnyStore },
+  opts?: LoggerOptions
+): () => void

package/logger/index.js

@@ -0,0 +1,260 @@
+import {
+  actionId,
+  lastAction,
+  onAction,
+  onMount,
+  onNotify,
+  onSet
+} from 'nanostores'
+
+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)
+  }
+
+  args.unshift(template)
+
+  return args
+}
+
+const log = args => console.log(...createLog(args))
+const group = args => console.groupCollapsed(...createLog(args))
+const groupEnd = () => console.groupEnd()
+
+const isAtom = store => store.setKey === undefined
+const isDeepMapKey = key => /.+(\..+|\[\d+\.*])/.test(key)
+
+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) {
+        log({
+          logo: true,
+          message: [
+            ['bold', storeName],
+            ['regular', 'store was unmounted']
+          ],
+          type: 'unmount'
+        })
+      }
+    }
+  })
+}
+
+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(() =>
+        log({
+          message: [
+            ['bold', storeName],
+            ['regular', 'store handled error in action'],
+            ['bold', actionName]
+          ],
+          type: 'error',
+          value: {
+            message: error.message
+          }
+        })
+      )
+    })
+
+    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()
+  }
+}
+
+export function logger(stores, opts = {}) {
+  let unbind = Object.entries(stores).map(([storeName, store]) =>
+    createLogger(store, storeName, opts)
+  )
+  return () => {
+    for (let i of unbind) i()
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@nanostores/logger",
+  "version": "0.1.0",
+  "description": "Logger of lifecycles, actions and changes for Nano Stores",
+  "keywords": [
+    "nanostores",
+    "devtools",
+    "logger",
+    "store",
+    "state",
+    "nano"
+  ],
+  "author": "Eduard Aksamitov <e@euaaaio.ru>",
+  "license": "MIT",
+  "repository": "nanostores/logger",
+  "sideEffects": false,
+  "type": "module",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": "^18.0.0 || >=20.0.0"
+  },
+  "peerDependencies": {
+    "nanostores": ">=0.9.2"
+  },
+  "nano-staged": {
+    "*.{js,ts}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  }
+}