feat(config): strongly typed config

fixes #15097

Author: manucorporat

core/src/components/refresher-content/refresher-content.tsx

@@ -31,10 +31,10 @@ export class RefresherContent {
 
   protected componentDidLoad() {
     if (!this.pullingIcon) {
-      this.pullingIcon = this.config.get('ionPullIcon', 'arrow-down');
+      this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
     }
     if (!this.refreshingSpinner) {
-      this.refreshingSpinner = this.config.get('ionRefreshingSpinner', this.config.get('spinner', 'lines'));
+      this.refreshingSpinner = this.config.get('refreshingSpinner', this.config.get('spinner', 'lines'));
     }
   }
 

core/src/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 
-import { Color, Config, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
+import { Color, Config, IonicConfig, NavOutlet, RouteID, RouteWrite, TabbarLayout, TabbarPlacement } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -99,7 +99,7 @@ export class Tabs implements NavOutlet {
       this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
     }
 
-    this.loadConfig('tabbarLayout', 'bottom');
+    this.loadConfig('tabbarPlacement', 'bottom');
     this.loadConfig('tabbarLayout', 'icon-top');
     this.loadConfig('tabbarHighlight', false);
 
@@ -235,7 +235,7 @@ export class Tabs implements NavOutlet {
     }
   }
 
-  private loadConfig(attrKey: string, fallback: any) {
+  private loadConfig(attrKey: keyof IonicConfig, fallback: any) {
     const val = (this as any)[attrKey];
     if (typeof val === 'undefined') {
       (this as any)[attrKey] = this.config.get(attrKey, fallback);

core/src/global/config.ts

@@ -1,19 +1,62 @@
 
-export class Config {
+export interface IonicConfig {
+  isDevice?: boolean;
+  statusbarPadding?: boolean;
+  inputShims?: boolean;
+  backButtonIcon?: string;
+  backButtonText?: string;
+  spinner?: string;
+  loadingSpinner?: string;
+  menuIcon?: string;
+  animate?: boolean;
+  pickerSpinner?: string;
+  refreshingIcon?: string;
+  refreshingSpinner?: string;
+  mode?: string;
+  menuType?: string;
+  scrollPadding?: string;
+  inputBlurring?: string;
+  scrollAssist?: string;
+  hideCaretOnScroll?: string;
+  infiniteLoadingSpinner?: string;
+  keyboardHeight?: number;
+  swipeBackEnabled?: boolean;
+
+  tabbarPlacement?: string;
+  tabbarLayout?: string;
+  tabbarHighlight?: boolean;
+
+  actionSheetEnter?: string;
+  alertEnter?: string;
+  loadingEnter?: string;
+  modalEnter?: string;
+  popoverEnter?: string;
+  toastEnter?: string;
+  pickerEnter?: string;
 
-  private m: Map<string, any>;
+  actionSheetLeave?: string;
+  alertLeave?: string;
+  loadingLeave?: string;
+  modalLeave?: string;
+  popoverLeave?: string;
+  toastLeave?: string;
+  pickerLeave?: string;
+}
+
+export class Config {
 
-  constructor(configObj: {[key: string]: any}) {
-    this.m = new Map<string, any>(Object.entries(configObj));
+  private m: Map<keyof IonicConfig, any>;
 
+  constructor(configObj: IonicConfig) {
+    this.m = new Map<keyof IonicConfig, any>(Object.entries(configObj) as any);
   }
 
-  get(key: string, fallback?: any): any {
+  get(key: keyof IonicConfig, fallback?: any): any {
     const value = this.m.get(key);
     return (value !== undefined) ? value : fallback;
   }
 
-  getBoolean(key: string, fallback = false): boolean {
+  getBoolean(key: keyof IonicConfig, fallback = false): boolean {
     const val = this.m.get(key);
     if (val === undefined) {
       return fallback;
@@ -24,12 +67,12 @@ export class Config {
     return !!val;
   }
 
-  getNumber(key: string, fallback?: number): number {
+  getNumber(key: keyof IonicConfig, fallback?: number): number {
     const val = parseFloat(this.m.get(key));
     return isNaN(val) ? (fallback !== undefined ? fallback : NaN) : val;
   }
 
-  set(key: string, value: any) {
+  set(key: keyof IonicConfig, value: any) {
     this.m.set(key, value);
   }
 }

core/src/utils/config.ts

@@ -1,5 +1,6 @@
+import { IonicConfig } from '../interface';
 
-export function setupConfig(config: {[key: string]: any}) {
+export function setupConfig(config: IonicConfig) {
   const win = window as any;
   const Ionic = win.Ionic;
   if (Ionic && Ionic.config && Ionic.config.constructor.name !== 'Object') {

core/src/utils/overlays.ts

@@ -1,4 +1,4 @@
-import { AnimationBuilder, HTMLIonOverlayElement, OverlayInterface, OverlayMap } from '../interface';
+import { AnimationBuilder, HTMLIonOverlayElement, IonicConfig, OverlayInterface, OverlayMap } from '../interface';
 
 let lastId = 1;
 
@@ -47,7 +47,7 @@ export function removeLastOverlay(overlays: OverlayMap) {
 
 export async function present(
   overlay: OverlayInterface,
-  name: string,
+  name: keyof IonicConfig,
   iosEnterAnimation: AnimationBuilder,
   mdEnterAnimation: AnimationBuilder,
   opts?: any
@@ -72,7 +72,7 @@ export async function dismiss(
   overlay: OverlayInterface,
   data: any | undefined,
   role: string | undefined,
-  name: string,
+  name: keyof IonicConfig,
   iosLeaveAnimation: AnimationBuilder,
   mdLeaveAnimation: AnimationBuilder,
   opts?: any