chore: add component logger

packages/components/src/components/docs/bal-doc-app/bal-doc-app.tsx

@@ -1,34 +1,40 @@
-import { Component, Host, h, Event, EventEmitter } from '@stencil/core'
-import globalScript from '../../../global'
-import { isBrowser } from '../../../utils/browser'
+import { Component, Host, h, Prop } from '@stencil/core'
+import { isWindowDefined } from '../../../utils/browser'
+import { BalLogger } from '../../../utils/log'
 
 @Component({
   tag: 'bal-doc-app',
   styleUrl: '../../../styles/global.sass',
 })
 export class DocApp {
-  @Event({ bubbles: true, composed: true }) balAppLoad!: EventEmitter<boolean>
+  @Prop() logComponents = ''
+  @Prop() logLifecycle = false
+  @Prop() logEvents = false
+  @Prop() logRender = false
+  @Prop() logCustom = false
 
-  connectedCallback() {
-    globalScript()
-  }
-
-  componentDidLoad() {
-    this.balAppLoad.emit(true)
+  componentDidRender() {
+    const logConfig: BalLogger = {
+      components: this.logComponents
+        .split(',')
+        .map(c => c.trim())
+        .filter(c => c !== ''),
+      lifecycle: this.logLifecycle,
+      event: this.logEvents,
+      render: this.logRender,
+      custom: this.logCustom,
+    }
+    if (isWindowDefined()) {
+      ;(window as any).BaloiseDesignSystem.config.logger = logConfig
+    }
   }
 
   render() {
     return (
-      <Host role="application">
-        <main
-          class={{
-            'bal-app': true,
-            'bal-app--safari': isBrowser('Safari'),
-            'bal-app--touch': isBrowser('touch'),
-          }}
-        >
+      <Host>
+        <bal-app>
           <slot></slot>
-        </main>
+        </bal-app>
       </Host>
     )
   }

packages/components/src/utils/config/config.ts

@@ -1,4 +1,5 @@
 import { isWindowDefined } from '../browser'
+import { BalLogger, defaultLoggerConfig } from '../log'
 import { BALOISE_SESSION_KEY } from './config.const'
 import { BalConfig, BalConfigState, BalLanguage, BalRegion } from './config.types'
 import { BalConfigObserver } from './observable/observer'
@@ -11,6 +12,7 @@ export class Config {
     language: 'de',
     allowedLanguages: ['de', 'fr', 'it', 'en'],
     fallbackLanguage: 'de',
+    logger: defaultLoggerConfig,
   }
 
   get locale(): string {
@@ -55,6 +57,15 @@ export class Config {
     }
   }
 
+  get logger(): BalLogger {
+    return this._config.logger
+  }
+
+  set logger(logger: BalLogger) {
+    this._config.logger = { ...logger }
+    this._notify()
+  }
+
   attach(observer: BalConfigObserver): void {
     const isExist = this._observers.includes(observer)
     if (isExist) {

packages/components/src/utils/config/config.types.ts

@@ -1,3 +1,5 @@
+import { BalLogger } from '../log'
+
 export type BalRegion = 'CH' | 'DE' | 'BE' | 'LU'
 
 export type BalSwissLanguage = 'de' | 'fr' | 'it' | 'en'
@@ -24,4 +26,5 @@ export interface BalConfigState {
   language: BalLanguage
   allowedLanguages: BalLanguage[]
   fallbackLanguage: BalLanguage
+  logger: BalLogger
 }

packages/components/src/utils/config/initialize.ts

@@ -1,4 +1,5 @@
 import { isWindowDefined } from '../browser'
+import { defaultLoggerConfig } from '../log'
 import { config, configFromSession } from './config'
 import { BalConfig, BalConfigState } from './config.types'
 
@@ -7,6 +8,7 @@ export const defaultConfig: BalConfigState = {
   language: 'de',
   allowedLanguages: ['de', 'fr', 'it', 'en'],
   fallbackLanguage: 'de',
+  logger: defaultLoggerConfig,
 }
 
 export const defaultLocale = `${defaultConfig.language}-${defaultConfig.region}`

packages/components/src/utils/log.ts

@@ -0,0 +1,116 @@
+import { ComponentInterface } from '@stencil/core'
+import { isWindowDefined } from './browser'
+
+export interface BalLogger {
+  components: string[]
+  custom: boolean
+  lifecycle: boolean
+  render: boolean
+  event: boolean
+}
+
+export interface Loggable {
+  log: LogInstance
+  createLogger(log: LogInstance): void
+}
+
+export type LogInstance = (message?: any, ...optionalParams: any[]) => void
+
+export const defaultLoggerConfig: BalLogger = {
+  components: [],
+  event: false,
+  lifecycle: false,
+  render: false,
+  custom: false,
+}
+
+const getConfig = () => {
+  let loggerConfig = defaultLoggerConfig
+
+  if (
+    isWindowDefined() &&
+    (window as any).BaloiseDesignSystem &&
+    (window as any).BaloiseDesignSystem.config &&
+    (window as any).BaloiseDesignSystem.config.logger
+  ) {
+    loggerConfig = (window as any).BaloiseDesignSystem.config.logger
+  }
+
+  return loggerConfig
+}
+
+const buildLogger = (tag: string) => {
+  const l = (type: 'lifecycle' | 'event' | 'custom' | 'render', message?: any, ...optionalParams: any[]) => {
+    const config = getConfig()
+
+    if (config.components.includes(tag) && config[type]) {
+      console.log(message, ...optionalParams)
+    }
+  }
+
+  return {
+    custom: (message?: any, ...optionalParams: any[]) => l('custom', ` ➡️ [${tag}] - ${message}`, ...optionalParams),
+    lifecycle: (lifecycleName: string, ...optionalParams: any[]) =>
+      l(
+        'lifecycle',
+        `${
+          lifecycleName === 'connectedCallback'
+            ? '🟢'
+            : lifecycleName === 'disconnectedCallback'
+            ? '🔴'
+            : lifecycleName === 'componentDidLoad'
+            ? '🏁'
+            : ' ➡️'
+        } [${tag}] - (${lifecycleName})`,
+        ...optionalParams,
+      ),
+    event: (eventName: string, ...optionalParams: any[]) =>
+      l('event', `🔥 [${tag}] - (${eventName})`, ...optionalParams),
+    render: (...optionalParams: any[]) => l('render', `🖌️ [${tag}] - (render)`, ...optionalParams),
+  }
+}
+
+export function Logger(tag = 'unknown') {
+  return function (target: ComponentInterface, _propertyKey: string, _descriptor: PropertyDescriptor) {
+    const { connectedCallback, disconnectedCallback, render, componentDidLoad, createLogger } = target
+
+    const log = buildLogger(tag)
+
+    target.connectedCallback = function () {
+      log.lifecycle(`connectedCallback`, this)
+
+      const events = Object.keys(this)
+        .filter(n => n.startsWith('bal'))
+        .filter(n => typeof this[n] === 'object')
+
+      for (let index = 0; index < events.length; index++) {
+        const event = events[index]
+        const emitter = this[event]
+        this[event] = {
+          emit: (...args: any) => {
+            log.event(event, this, ...args)
+            return emitter.emit.call(this, ...args)
+          },
+        }
+      }
+
+      createLogger.call(this, log.custom)
+      return connectedCallback && connectedCallback.call(this)
+    }
+
+    target.disconnectedCallback = function () {
+      log.lifecycle(`disconnectedCallback`, this)
+      return disconnectedCallback && disconnectedCallback.call(this)
+    }
+
+    target.componentDidLoad = function () {
+      log.lifecycle(`componentDidLoad`, this)
+      return componentDidLoad && componentDidLoad.call(this)
+    }
+
+    target.render = function () {
+      log.render(this)
+      return (render as any).call(this)
+    }
+  }
+}