feat: 2.3.0

Author: Viktor

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 2.3.0
+
+- Style: simplified logger output
+- Feat: added `slotName` to `meta` of custom logger
+
 ## 2.2.0
 
 - Feat: add `attachLogger`.

README.md

@@ -214,7 +214,11 @@ Accepts object:
 
 ```typescript
 {
-  meta: { action: 'set' | 'remove' | 'hide' | 'show', slotId: SlotId };
+  meta: {
+    action: 'set' | 'remove' | 'hide' | 'show',
+    slotId: SlotId,
+    slotName: string;
+  };
   message: string;
 }
 ```

src/__tests__/attachLogger.spec.ts

@@ -2,6 +2,13 @@ import { SLOTS } from './stub';
 
 import { createSlotFactory, LOG_TITLE } from '../index';
 
+type SlotsKeys = keyof typeof SLOTS;
+
+const SLOTS_NAMES = Object.entries(SLOTS).reduce(
+  (acc, [key, value]) => ({ ...acc, [value]: key }),
+  {} as Record<typeof SLOTS[SlotsKeys], SlotsKeys>,
+);
+
 describe('AttachLogger', () => {
   test('Basic', () => {
     const logger = jest.fn();
@@ -16,32 +23,32 @@ describe('AttachLogger', () => {
 
     api.set({ id: SLOTS.AWESOME, component: () => null });
     expect(logger).toBeCalledWith({
-      message: `${LOG_TITLE} ${SLOTS.AWESOME} slot content was set`,
-      meta: { action: 'set', slotId: SLOTS.AWESOME },
+      message: `${LOG_TITLE} ${SLOTS_NAMES.awesome} -> set // ${SLOTS.AWESOME}`,
+      meta: { action: 'set', slotId: SLOTS.AWESOME, slotName: SLOTS_NAMES.awesome },
     });
 
     api.hide({ id: SLOTS.AWESOME });
     expect(logger).toBeCalledWith({
-      message: `${LOG_TITLE} ${SLOTS.AWESOME} slot content was hidden`,
-      meta: { action: 'hide', slotId: SLOTS.AWESOME },
+      message: `${LOG_TITLE} ${SLOTS_NAMES.awesome} -> hide // ${SLOTS.AWESOME}`,
+      meta: { action: 'hide', slotId: SLOTS.AWESOME, slotName: SLOTS_NAMES.awesome },
     });
 
     api.show({ id: SLOTS.AWESOME });
     expect(logger).toBeCalledWith({
-      message: `${LOG_TITLE} ${SLOTS.AWESOME} slot content was shown`,
-      meta: { action: 'show', slotId: SLOTS.AWESOME },
+      message: `${LOG_TITLE} ${SLOTS_NAMES.awesome} -> show // ${SLOTS.AWESOME}`,
+      meta: { action: 'show', slotId: SLOTS.AWESOME, slotName: SLOTS_NAMES.awesome },
     });
 
     api.remove({ id: SLOTS.AWESOME });
     expect(logger).toBeCalledWith({
-      message: `${LOG_TITLE} ${SLOTS.AWESOME} slot content was removed`,
-      meta: { action: 'remove', slotId: SLOTS.AWESOME },
+      message: `${LOG_TITLE} ${SLOTS_NAMES.awesome} -> remove // ${SLOTS.AWESOME}`,
+      meta: { action: 'remove', slotId: SLOTS.AWESOME, slotName: SLOTS_NAMES.awesome },
     });
 
     api.hide({ id: SLOTS.MAIN });
     expect(logger).toBeCalledWith({
-      message: `${LOG_TITLE} ${SLOTS.MAIN} slot content was hidden`,
-      meta: { action: 'hide', slotId: SLOTS.MAIN },
+      message: `${LOG_TITLE} ${SLOTS_NAMES.main} -> hide // ${SLOTS.MAIN}`,
+      meta: { action: 'hide', slotId: SLOTS.MAIN, slotName: SLOTS_NAMES.main },
     });
 
     expect(logger).toBeCalledTimes(5);

src/index.tsx

@@ -15,27 +15,32 @@ const ACTIONS = {
   ATTACH_LOGGER: 'attachLogger',
 } as const;
 
-type Logger<S, P> = (
+type SlotName = string;
+type Logger<S, P, T> = (
   _: Readonly<{
     message: string;
     meta: {
       action: P;
       slotId: S;
+      slotName: T;
     };
   }>,
 ) => unknown;
-type GetLogText<S, P> = (_: { action: S; slotId: P }) => string;
+type GetLogText<S, P, T> = (_: { action: S; slotId: P; slotName: T }) => string;
 type Component<S> = (props: S) => ReactElement | null;
 type SlotStore<S> = Readonly<{
   component: Component<S>;
   isVisible: boolean;
 }>;
 
-export const createSlotFactory = <Id extends string>(slots: Record<string, Id>) => {
+export const createSlotFactory = <Id extends string>(slots: Record<SlotName, Id>) => {
+  const slotNames = new Map(Object.entries(slots).map(([key, value]) => [value, key]));
+
   const attachLogger = createEvent<Readonly<{
-    fn?: Logger<Id, Exclude<typeof ACTIONS[keyof typeof ACTIONS], 'attachLogger'>>;
+    fn?: Logger<Id, Exclude<typeof ACTIONS[keyof typeof ACTIONS], 'attachLogger'>, SlotName>;
     watchList?: Id[];
   }> | void>();
+
   const $logger = createStore<
     Readonly<{
       shouldLog: boolean;
@@ -55,19 +60,12 @@ export const createSlotFactory = <Id extends string>(slots: Record<string, Id>)
     [ACTIONS.SHOW]: createEvent<Readonly<{ id: Id }>>(),
     [ACTIONS.ATTACH_LOGGER]: attachLogger,
   };
-  const getLogText: GetLogText<Exclude<keyof typeof api, 'attachLogger'>, Id> = ({ action, slotId }) => {
-    if (action === ACTIONS.HIDE) {
-      return `${LOG_TITLE} ${slotId} slot content was hidden`;
-    }
 
-    if (action === ACTIONS.REMOVE) {
-      return `${LOG_TITLE} ${slotId} slot content was removed`;
-    }
-
-    return action === ACTIONS.SET
-      ? `${LOG_TITLE} ${slotId} slot content was set`
-      : `${LOG_TITLE} ${slotId} slot content was shown`;
-  };
+  const getLogText: GetLogText<Exclude<keyof typeof api, 'attachLogger'>, Id, SlotName> = ({
+    action,
+    slotId,
+    slotName,
+  }) => `${LOG_TITLE} ${slotName} -> ${action} // ${slotId}`;
 
   type LogParameters = Parameters<typeof getLogText>[0];
 
@@ -87,20 +85,24 @@ export const createSlotFactory = <Id extends string>(slots: Record<string, Id>)
     clock: sample({
       clock: [
         api.hide.map(({ id }) => ({
-          slotId: id,
           action: ACTIONS.HIDE,
+          slotId: id,
+          slotName: slotNames.get(id) as SlotName,
         })),
         api.remove.map(({ id }) => ({
-          slotId: id,
           action: ACTIONS.REMOVE,
+          slotId: id,
+          slotName: slotNames.get(id) as SlotName,
         })),
         api.set.map(({ id }) => ({
-          slotId: id,
           action: ACTIONS.SET,
+          slotId: id,
+          slotName: slotNames.get(id) as SlotName,
         })),
         api.show.map(({ id }) => ({
-          slotId: id,
           action: ACTIONS.SHOW,
+          slotId: id,
+          slotName: slotNames.get(id) as SlotName,
         })),
       ],
       source: $logger,