refactor(dom): attachComponent()

core/src/components/modal/modal.tsx

@@ -1,8 +1,9 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index';
 
-import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { createThemedClasses, getClassList } from '../../utils/theme';
-import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, detachComponent, dismiss, eventMethod, present } from '../../utils/overlays';
+import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
+import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
 import iosEnterAnimation from './animations/ios.enter';
 import iosLeaveAnimation from './animations/ios.leave';
@@ -172,10 +173,10 @@ export class Modal implements OverlayInterface {
       ...this.data,
       modal: this.el
     };
-    const classes = {
+    const classes = [
-      ...getClassMap(this.cssClass),
+      ...getClassList(this.cssClass),
-      'ion-page': true
+      'ion-page'
-    };
+    ];
     return attachComponent(this.delegate, container, this.component, classes, data)
       .then(el => this.usersElement = el)
       .then(() => present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation));

core/src/components/nav/view-controller.ts

@@ -3,6 +3,7 @@ import { NavOptions, ViewState } from './nav-util';
 import { NavControllerBase } from './nav';
 import { assert } from '../../utils/helpers';
 import { FrameworkDelegate } from '../..';
+import { attachComponent } from '../../utils/framework-delegate';
 
 /**
  * @name ViewController
@@ -42,30 +43,11 @@ export class ViewController {
   /**
    * @hidden
    */
-  init(container: HTMLElement) {
+  async init(container: HTMLElement) {
     this._state = ViewState.Attached;
 
     const component = this.component;
-    if (this.delegate) {
+    this.element = await attachComponent(this.delegate, container, component, ['ion-page', 'hide-page'], this.data);
-      return this.delegate.attachViewToDom(container, component, this.data, ['ion-page', 'hide-page']).then(el => {
-        this.element = el;
-      });
-    }
-    const element = (this.element)
-      ? this.element
-      : typeof component === 'string'
-      ? document.createElement(component)
-      : component;
-
-    element.classList.add('ion-page');
-    element.classList.add('hide-page');
-
-    if (this.data) {
-      Object.assign(element, this.data);
-    }
-    container.appendChild(element);
-    this.element = element;
-    return Promise.resolve();
   }
 
   _setNav(navCtrl: NavControllerBase) {

core/src/components/popover/popover.tsx

@@ -1,8 +1,9 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
 import { Animation, AnimationBuilder, Config, FrameworkDelegate } from '../../index';
 
-import { createThemedClasses, getClassMap } from '../../utils/theme';
+import { createThemedClasses, getClassList } from '../../utils/theme';
-import { BACKDROP, OverlayEventDetail, OverlayInterface, attachComponent, detachComponent, dismiss, eventMethod, present } from '../../utils/overlays';
+import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
+import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 
 import iosEnterAnimation from './animations/ios.enter';
 import iosLeaveAnimation from './animations/ios.leave';
@@ -182,10 +183,10 @@ export class Popover implements OverlayInterface {
       ...this.data,
       popover: this.el
     };
-    const classes = {
+    const classes = [
-      ...getClassMap(this.cssClass),
+      ...getClassList(this.cssClass),
-      'popover-viewport': true
+      'popover-viewport'
-    };
+    ];
     return attachComponent(this.delegate, container, this.component, classes, data)
       .then(el => this.usersElement = el)
       .then(() => present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.ev));

core/src/components/router-outlet/route-outlet.tsx

@@ -2,11 +2,11 @@ import { Component, Element, Method, Prop } from '@stencil/core';
 import { transition } from '../../utils';
 import { NavDirection } from '../nav/nav-util';
 import { AnimationBuilder, Config, FrameworkDelegate, NavOutlet } from '../..';
-import { attachComponent, detachComponent } from '../../utils/overlays';
+import { attachComponent, detachComponent } from '../../utils/framework-delegate';
+import { RouteID, RouteWrite } from '../router/utils/interfaces';
 
 import iosTransitionAnimation from '../nav/animations/ios.transition';
 import mdTransitionAnimation from '../nav/animations/md.transition';
-import { RouteID, RouteWrite } from '../router/utils/interfaces';
 
 @Component({
   tag: 'ion-router-outlet'
@@ -37,7 +37,7 @@ export class RouterOutlet implements NavOutlet {
       return false;
     }
     // attach entering view to DOM
-    const enteringEl = await attachComponent(this.delegate, this.el, component, NAV_CLASSES, params);
+    const enteringEl = await attachComponent(this.delegate, this.el, component, ['ion-page', 'hide-page'], params);
     const leavingEl = this.activeEl;
 
     // commit animation
@@ -121,5 +121,3 @@ export interface RouterOutletOptions {
   direction?: NavDirection;
   mode?: 'md' | 'ios';
 }
-
-const NAV_CLASSES = {'ion-page': true, 'hide-page': true};

core/src/index.d.ts

@@ -107,7 +107,7 @@ export { PlatformConfig } from './global/platform-configs';
 export * from './components';
 
 export { DomController, RafCallback } from './global/dom-controller';
-export { FrameworkDelegate } from './utils/dom-framework-delegate';
+export { FrameworkDelegate } from './utils/framework-delegate';
 export { OverlayEventDetail } from './utils/overlays';
 
 export interface Config {

core/src/utils/dom-framework-delegate.ts

@@ -1,5 +0,0 @@
-
-export interface FrameworkDelegate {
-  attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<HTMLElement>;
-  removeViewFromDom(container: any, component: any): Promise<void>;
-}

core/src/utils/framework-delegate.ts

@@ -0,0 +1,32 @@
+
+export interface FrameworkDelegate {
+  attachViewToDom(container: any, component: any, propsOrDataObj?: any, cssClasses?: string[]): Promise<HTMLElement>;
+  removeViewFromDom(container: any, component: any): Promise<void>;
+}
+
+export function attachComponent(delegate: FrameworkDelegate, container: Element, component: string|HTMLElement, cssClasses?: string[], params?: {[key: string]: any}): Promise<HTMLElement> {
+  if (delegate) {
+    return delegate.attachViewToDom(container, component, params, cssClasses);
+  }
+  const el = (typeof component === 'string') ? document.createElement(component) : component;
+
+  cssClasses && cssClasses.forEach(c => el.classList.add(c));
+  params && Object.assign(el, params);
+
+  container.appendChild(el);
+  if ((el as any).componentOnReady) {
+    return (el as any).componentOnReady();
+  }
+  return Promise.resolve(el);
+}
+
+export function detachComponent(delegate: FrameworkDelegate, element: HTMLElement) {
+  if (element) {
+    if (delegate) {
+      const container = element.parentElement;
+      return delegate.removeViewFromDom(container, element);
+    }
+    element.remove();
+  }
+  return Promise.resolve();
+}

core/src/utils/overlays.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '@stencil/core';
-import { Animation, AnimationBuilder, Config, CssClassMap, FrameworkDelegate } from '..';
+import { Animation, AnimationBuilder, Config } from '..';
 
 let lastId = 1;
 
@@ -138,31 +138,6 @@ export function autoFocus(containerEl: HTMLElement): HTMLElement|null {
   return null;
 }
 
-export function attachComponent(delegate: FrameworkDelegate, container: Element, component: string|HTMLElement, cssClasses: CssClassMap, data: any): Promise<HTMLElement> {
-  if (delegate) {
-    return delegate.attachViewToDom(container, component, data, Object.keys(cssClasses));
-  }
-  const el = (typeof component === 'string') ? document.createElement(component) : component;
-  Object.assign(el, data);
-  Object.keys(cssClasses).forEach(c => el.classList.add(c));
-  container.appendChild(el);
-  if ((el as any).componentOnReady) {
-    return (el as any).componentOnReady();
-  }
-  return Promise.resolve(el);
-}
-
-export function detachComponent(delegate: FrameworkDelegate, element: HTMLElement) {
-  if (element) {
-    if (delegate) {
-      const container = element.parentElement;
-      return delegate.removeViewFromDom(container, element);
-    }
-    element.remove();
-  }
-  return Promise.resolve();
-}
-
 export function eventMethod<T>(element: HTMLElement, eventName: string, callback?: (detail: T) => void): Promise<T> {
   let resolve: Function;
   const promise = new Promise<T>(r => resolve = r);

core/src/utils/theme.ts

@@ -50,15 +50,18 @@ export function getButtonClassMap(buttonType: string, mode: string): CssClassMap
   };
 }
 
+export function getClassList(classes: string | undefined): string[] {
+  if (classes) {
+    return classes
+      .split(' ')
+      .filter(c => c.trim() !== '');
+  }
+  return [];
+}
 
 export function getClassMap(classes: string | undefined): CssClassMap {
   const map: CssClassMap = {};
-  if (classes) {
+  getClassList(classes).forEach(c => map[c] = true);
-    classes
-      .split(' ')
-      .filter(c => c.trim() !== '')
-      .forEach(c => map[c] = true);
-  }
   return map;
 }