diff --git a/README.md b/README.md index b9c0abb..61eef64 100644 --- a/README.md +++ b/README.md @@ -102,3 +102,65 @@ log({ ] }) ``` + +## Advanced usage + +### Logging map creators + +With `creatorLogger` you can log map creators such as +[Logux’s SyncMapTemplate](https://logux.io/web-api/#globals-syncmaptemplate). + +```js +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` method with complex logging logic inside. + +```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`) + } + } +}) +``` diff --git a/build-logger/index.d.ts b/build-logger/index.d.ts index 45e0f63..eadb114 100644 --- a/build-logger/index.d.ts +++ b/build-logger/index.d.ts @@ -99,7 +99,7 @@ interface BuildLoggerEvents { * action: { * start: ({ actionName, args }) => { * let message = `${actionName} was started` - * if (args.length) message += `with arguments` + * if (args.length) message += 'with arguments' * console.log(message, args) * }, * diff --git a/creator-logger/index.d.ts b/creator-logger/index.d.ts index c2e0802..da3ff8c 100644 --- a/creator-logger/index.d.ts +++ b/creator-logger/index.d.ts @@ -1,11 +1,24 @@ import type { MapCreator, MapStore } from 'nanostores' -import type { LoggerOptions } from '../logger/index.js' +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 diff --git a/logger/index.d.ts b/logger/index.d.ts index baab218..38ad8ec 100644 --- a/logger/index.d.ts +++ b/logger/index.d.ts @@ -3,7 +3,7 @@ import type { AnyStore } from 'nanostores' 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'