🔧 chore: Add const like breakpoints & breakpointSubject to the config…

… + platformhelpers (#1146) * Create PR for #1134 * Create PR for #1133 * Create PR for #1126 * ✨ feature: Update Stencil (#1130) * Create PR for #1128 * chore: update stencil --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * 💥 breaking: remove Deprecated Mode Style (#1139) * Create PR for #1129 * breaking: remove deprecated mode style * chore: fix lint issues * chore: remove deprecated bal-body class * chore: format files --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * 🔧 chore: update Error Component (#1140) * Create PR for #1131 * chore: improve error component --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * 🔧 chore: update value accessor (#1141) * Create PR for #1132 * chore: improve value accessors * chore: update value accessors * chore: add missing icon --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * Create PR for #1126 * breaking: setInvalid is not by default enabled * chore: remove default import to reduce side effects * chore: update default config object * chore: add platform helpers * Create PR for #1126 * 💥 breaking: remove Deprecated Mode Style (#1139) * Create PR for #1129 * breaking: remove deprecated mode style * chore: fix lint issues * chore: remove deprecated bal-body class * chore: format files --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * 🔧 chore: update value accessor (#1141) * Create PR for #1132 * chore: improve value accessors * chore: update value accessors * chore: add missing icon --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch> * chore: format code * chore: fix lint issue --------- Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
baloise · Nov 16, 2023 · 9f3b5b8 · 9f3b5b8
1 parent 6d873e5
commit 9f3b5b8
Show file tree

Hide file tree

Showing 21 changed files with 160 additions and 191 deletions.
diff --git a/packages/components-angular/src/app-initialize.ts b/packages/components-angular/src/app-initialize.ts
@@ -1,5 +1,5 @@
 import { NgZone } from '@angular/core'
-import { BalConfig, initialize } from '@baloise/design-system-components'
+import { BalConfig, BalPlatformConfig, initialize } from '@baloise/design-system-components'
 import { applyPolyfills, defineCustomElements } from '@baloise/design-system-components/loader'
 import { raf } from './util/util'
 
@@ -13,31 +13,34 @@ export interface BaloiseDesignSystemAngularConfig {
 }
 
 export const appInitialize = (config: BaloiseDesignSystemAngularConfig, doc: Document, zone: NgZone) => {
-  return (): any => {
+  return async (): Promise<void> => {
     const win: Window | undefined = doc.defaultView as any
     if (win && typeof (window as any) !== 'undefined') {
-      initialize(config.defaults)
-
       const aelFn =
         '__zone_symbol__addEventListener' in (doc.body as any) ? '__zone_symbol__addEventListener' : 'addEventListener'
 
-      return applyPolyfills().then(() => {
-        return defineCustomElements(win, {
-          syncQueue: true,
-          raf,
-          jmp: (h: any) => zone.runOutsideAngular(h),
-          ael(elm, eventName, cb, opts) {
-            if (elm && (elm as any)[aelFn]) {
-              ;(elm as any)[aelFn](eventName, cb, opts)
-            }
-          },
-          rel(elm, eventName, cb, opts) {
-            if (elm) {
-              elm.removeEventListener(eventName, cb, opts)
-            }
-          },
-        })
-      })
+      const platformConfig: BalPlatformConfig = {
+        raf,
+        jmp: (h: any) => zone.runOutsideAngular(h),
+        ael(elm, eventName, cb, opts) {
+          if (elm && (elm as any)[aelFn]) {
+            ;(elm as any)[aelFn](eventName, cb, opts)
+          }
+        },
+        rel(elm, eventName, cb, opts) {
+          if (elm) {
+            elm.removeEventListener(eventName, cb, opts)
+          }
+        },
+      }
+
+      initialize(config.defaults, platformConfig, win)
+
+      if (config.applyPolyfills) {
+        await applyPolyfills()
+      }
+
+      return defineCustomElements(win, { syncQueue: true, ...platformConfig })
     }
   }
 }
diff --git a/packages/components/src/components/bal-nav/bal-nav.tsx b/packages/components/src/components/bal-nav/bal-nav.tsx
@@ -15,7 +15,7 @@ import {
 import { BEM } from '../../utils/bem'
 import { LogInstance, Loggable, Logger } from '../../utils/log'
 import { BalMutationObserver, ListenToMutation } from '../../utils/mutation'
-import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints'
+import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints'
 import { NavMetaLinkItem } from './models/bal-nav-meta-link-item'
 import { NavMetaButton } from './models/bal-nav-meta-button'
 import { BalScrollHandler } from '../../utils/scroll'
@@ -56,8 +56,8 @@ export class NavMetaBar
 
   log!: LogInstance
 
-  @State() isTouch = false
-  @State() isDesktop = true
+  @State() isTouch = balBreakpoints.isTouch
+  @State() isDesktop = balBreakpoints.isDesktop
   @State() language: BalLanguage = defaultConfig.language
   @State() region: BalRegion = defaultConfig.region
   @State() isFlyoutActive = false

diff --git a/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx b/packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx
@@ -1,12 +1,14 @@
 import { Component, h, Host, Element, Prop, State, ComponentInterface } from '@stencil/core'
 import { BEM } from '../../../utils/bem'
-import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../../utils/breakpoints'
+import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../../utils/breakpoints'
 import { balBrowser } from '../../../utils/browser'
 
 @Component({
   tag: 'bal-popover-content',
 })
 export class PopoverContent implements ComponentInterface, BalBreakpointObserver {
+  private isTouch = balBreakpoints.isTouch // need this part to improve a none side effect import
+
   @Element() el!: HTMLElement
 
   /**

diff --git a/packages/components/src/components/bal-progress-bar/bal-progress-bar.tsx b/packages/components/src/components/bal-progress-bar/bal-progress-bar.tsx
@@ -1,7 +1,7 @@
 import { Component, h, ComponentInterface, Host, Element, Prop, Method } from '@stencil/core'
 import { BEM } from '../../utils/bem'
-import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints } from '../../utils/breakpoints'
-import { BalConfigObserver, BalConfigState } from '../../utils/config'
+import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints'
+import type { BalConfigObserver, BalConfigState } from '../../utils/config'
 
 @Component({
   tag: 'bal-progress-bar',
@@ -12,6 +12,7 @@ export class ProgressBar implements ComponentInterface, BalConfigObserver, BalBr
 
   private animated = true
   private lineEl?: HTMLDivElement
+  private isTouch = balBreakpoints.isTouch // need this part to improve a none side effect import
 
   /**
    * PUBLIC PROPERTY API

diff --git a/packages/components/src/global.ts b/packages/components/src/global.ts
@@ -1,5 +1,5 @@
-import { initializeBaloiseDesignSystem } from './initialize'
+import { initialize } from './initialize'
 
 export default function () {
-  initializeBaloiseDesignSystem()
+  initialize()
 }
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -12,7 +12,7 @@ export {
   updateBalRegion,
   onBalConfigChange,
   useBalConfig,
-  initialize,
+  setupConfig,
   BalConfig,
   BalConfigState,
   BalConfigObserver,
@@ -23,6 +23,7 @@ export {
   BalLuxembourgInternationalLanguage,
   BalGermanLanguage,
   BalIcons,
+  BalPlatformConfig,
 } from './utils/config'
 
 /**
@@ -55,7 +56,7 @@ export * from './components/bal-label/bal-label.i18n'
 /**
  * Utils
  */
-export { initializeBaloiseDesignSystem } from './initialize'
+export { initialize } from './initialize'
 export { newBalStepOption } from './components/bal-steps/bal-step.util'
 export { newBalTabOption } from './components/bal-tabs/bal-tab.util'
 export { newBalCheckboxOption } from './components/bal-checkbox/utils/bal-checkbox.util'

diff --git a/packages/components/src/initialize.ts b/packages/components/src/initialize.ts
@@ -1,21 +1,22 @@
+import { setPlatformHelpers } from '@stencil/core'
 import { balToastController } from './components/bal-toast/bal-toast.controller'
 import { balSnackbarController } from './components/bal-snackbar/bal-snackbar.controller'
-import { BalConfig, initialize } from './utils/config'
+import { BalConfig, BalPlatformConfig, setupConfig } from './utils/config'
 import { VERSION } from './utils/constants/version.constant'
 import { balBrowser } from './utils/browser'
-import { balBreakpoints } from './utils/breakpoints'
 
-export const initializeBaloiseDesignSystem = (initConfig: BalConfig = {}) => {
-  if (balBrowser.hasWindow) {
-    const win = window as any
-    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {}
+export const initialize = (userConfig: BalConfig = {}, platformConfig: BalPlatformConfig = {}, win = {} as any) => {
+  if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
+    win = window as any
+  }
 
-    initialize(initConfig, win)
-    balBreakpoints.detect()
+  win.BaloiseDesignSystem = win.BaloiseDesignSystem || {}
 
-    win.BaloiseDesignSystem.toastController = balToastController
-    win.BaloiseDesignSystem.snackbarController = balSnackbarController
-    win.BaloiseDesignSystem.initialize = () => initialize(win.BaloiseDesignSystem.config, win)
-    win.BaloiseDesignSystem.version = VERSION
-  }
+  setPlatformHelpers(platformConfig)
+  setupConfig(userConfig, win)
+
+  win.BaloiseDesignSystem.toastController = balToastController
+  win.BaloiseDesignSystem.snackbarController = balSnackbarController
+  win.BaloiseDesignSystem.initialize = () => setupConfig(win.BaloiseDesignSystem.config, win)
+  win.BaloiseDesignSystem.version = VERSION
 }
diff --git a/packages/components/src/utils/breakpoints/breakpoints.ts b/packages/components/src/utils/breakpoints/breakpoints.ts
@@ -1,10 +1,10 @@
+import type { BalBreakpoints } from './breakpoints.interfaces'
 import { balBrowser } from '../browser'
-import { BalBreakpoints } from './breakpoints.interfaces'
 import { BREAKPOINTS_MAP } from './breakpoints.map'
 
 export type BalBreakpoint = keyof typeof BREAKPOINTS_MAP
 
-class BreakpointsClass {
+export class BreakpointsClass {
   private win?: any
   private breakpoints: BalBreakpoint[] = []
 
@@ -105,4 +105,4 @@ class BreakpointsClass {
   }
 }
 
-export const balBreakpoints = new BreakpointsClass()
+export const balBreakpoints = /*@__PURE__*/ new BreakpointsClass()
diff --git a/packages/components/src/utils/config/config.default.ts b/packages/components/src/utils/config/config.default.ts
@@ -0,0 +1,73 @@
+import type { BalConfigState } from './config.types'
+import { defaultLoggerConfig } from '../log'
+import {
+  balIconClose,
+  balIconInfoCircle,
+  balIconPlus,
+  balIconMinus,
+  balIconEdit,
+  balIconTrash,
+  balIconNavGoLeft,
+  balIconNavGoRight,
+  balIconNavGoDown,
+  balIconNavGoUp,
+  balIconCheck,
+  balIconDate,
+  balIconDocument,
+  balIconUpload,
+  balIconMenuBars,
+  balIconFacebook,
+  balIconInstagram,
+  balIconLinkedin,
+  balIconTwitter,
+  balIconX,
+  balIconXing,
+  balIconYoutube,
+  balIconWeb,
+  balIconCaretDown,
+  balIconCaretLeft,
+  balIconCaretRight,
+  balIconCaretUp,
+} from '../constants/icons.constant'
+
+export const defaultIcons = {
+  balIconClose,
+  balIconInfoCircle,
+  balIconPlus,
+  balIconMinus,
+  balIconEdit,
+  balIconTrash,
+  balIconNavGoLeft,
+  balIconNavGoRight,
+  balIconNavGoDown,
+  balIconNavGoUp,
+  balIconCheck,
+  balIconDate,
+  balIconDocument,
+  balIconUpload,
+  balIconMenuBars,
+  balIconFacebook,
+  balIconInstagram,
+  balIconLinkedin,
+  balIconTwitter,
+  balIconX,
+  balIconXing,
+  balIconYoutube,
+  balIconWeb,
+  balIconCaretDown,
+  balIconCaretLeft,
+  balIconCaretRight,
+  balIconCaretUp,
+}
+
+export const defaultConfig: BalConfigState = {
+  region: 'CH',
+  language: 'de',
+  allowedLanguages: ['de', 'fr', 'it', 'en'],
+  icons: defaultIcons,
+  fallbackLanguage: 'de',
+  logger: defaultLoggerConfig,
+  animated: true,
+}
+
+export const defaultLocale = `${defaultConfig.language}-${defaultConfig.region}`
diff --git a/packages/components/src/utils/config/config.ts b/packages/components/src/utils/config/config.ts
@@ -1,62 +1,14 @@
 import { balBrowser } from '../browser'
-import { BalLogger, defaultLoggerConfig } from '../log'
+import { BalLogger } from '../log'
 import { BALOISE_SESSION_KEY } from './config.const'
 import { BalConfig, BalConfigState, BalIcons, BalLanguage, BalRegion } from './config.types'
 import { BalConfigObserver } from './observable/observer'
-import {
-  balIconClose,
-  balIconInfoCircle,
-  balIconPlus,
-  balIconMinus,
-  balIconEdit,
-  balIconTrash,
-  balIconNavGoLeft,
-  balIconNavGoRight,
-  balIconNavGoDown,
-  balIconNavGoUp,
-  balIconCaretUp,
-  balIconCaretDown,
-  balIconCaretLeft,
-  balIconCaretRight,
-  balIconCheck,
-  balIconDate,
-  balIconDocument,
-  balIconUpload,
-  balIconMenuBars,
-} from '../constants/icons.constant'
+import { defaultConfig } from './config.default'
 
 export class Config {
   private _componentObservers: BalConfigObserver[] = []
   private _observers: BalConfigObserver[] = []
-  private _config: BalConfigState = {
-    region: 'CH',
-    language: 'de',
-    allowedLanguages: ['de', 'fr', 'it', 'en'],
-    icons: {
-      balIconClose,
-      balIconInfoCircle,
-      balIconPlus,
-      balIconMinus,
-      balIconEdit,
-      balIconTrash,
-      balIconNavGoLeft,
-      balIconNavGoRight,
-      balIconNavGoDown,
-      balIconNavGoUp,
-      balIconCaretLeft,
-      balIconCaretUp,
-      balIconCaretDown,
-      balIconCaretRight,
-      balIconCheck,
-      balIconDate,
-      balIconDocument,
-      balIconUpload,
-      balIconMenuBars,
-    },
-    fallbackLanguage: 'de',
-    logger: defaultLoggerConfig,
-    animated: true,
-  }
+  private _config: BalConfigState = defaultConfig
 
   get locale(): string {
     return `${this._config.language}-${this._config.region}`

diff --git a/packages/components/src/utils/config/config.types.ts b/packages/components/src/utils/config/config.types.ts
@@ -36,3 +36,11 @@ export interface BalConfigState {
   logger: BalLogger
   animated: boolean
 }
+
+export interface BalPlatformConfig {
+  jmp?: (c: any) => any
+  raf?: (c: any) => number
+  ael?: (el: any, eventName: string, listener: any, options: any) => void
+  rel?: (el: any, eventName: string, listener: any, options: any) => void
+  ce?: (eventName: string, opts?: any) => any
+}
diff --git a/packages/components/src/utils/config/index.ts b/packages/components/src/utils/config/index.ts
@@ -4,3 +4,4 @@ export * from './config'
 export * from './observable/observer'
 export * from './config.decorator'
 export * from './config.utils'
+export * from './config.default'