perf(all): dynamic import

ionic-team · May 8, 2018 · bb809b6 · bb809b6
1 parent cc7ab4e
commit bb809b6
Show file tree

Hide file tree

Showing 56 changed files with 179 additions and 218 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -2265,39 +2265,6 @@ declare global {
 }
 
 
-declare global {
-
-  namespace StencilComponents {
-    interface IonInputShims {
-
-    }
-  }
-
-  interface HTMLIonInputShimsElement extends StencilComponents.IonInputShims, HTMLStencilElement {}
-
-  var HTMLIonInputShimsElement: {
-    prototype: HTMLIonInputShimsElement;
-    new (): HTMLIonInputShimsElement;
-  };
-  interface HTMLElementTagNameMap {
-    'ion-input-shims': HTMLIonInputShimsElement;
-  }
-  interface ElementTagNameMap {
-    'ion-input-shims': HTMLIonInputShimsElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      'ion-input-shims': JSXElements.IonInputShimsAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface IonInputShimsAttributes extends HTMLAttributes {
-
-    }
-  }
-}
-
-
 declare global {
 
   namespace StencilComponents {

diff --git a/core/src/components/action-sheet/action-sheet.tsx b/core/src/components/action-sheet/action-sheet.tsx
@@ -2,10 +2,10 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@
 import { ActionSheetButton, Animation, AnimationBuilder, Config, CssClassMap, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 
 @Component({

diff --git a/core/src/components/action-sheet/animations/ios.enter.ts b/core/src/components/action-sheet/animations/ios.enter.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/action-sheet/animations/ios.leave.ts b/core/src/components/action-sheet/animations/ios.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Action Sheet Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/action-sheet/animations/md.enter.ts b/core/src/components/action-sheet/animations/md.enter.ts
@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/action-sheet/animations/md.leave.ts b/core/src/components/action-sheet/animations/md.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * MD Action Sheet Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
@@ -3,10 +3,10 @@ import { AlertButton, AlertInput, Animation, AnimationBuilder, Config, CssClassM
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, isCancel, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-alert',

diff --git a/core/src/components/alert/animations/ios.enter.ts b/core/src/components/alert/animations/ios.enter.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Alert Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/alert/animations/ios.leave.ts b/core/src/components/alert/animations/ios.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Alert Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/alert/animations/md.enter.ts b/core/src/components/alert/animations/md.enter.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Alert Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/alert/animations/md.leave.ts b/core/src/components/alert/animations/md.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Alert Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss
@@ -15,8 +15,8 @@
   // TODO this can be simplified
   &.statusbar-padding {
     .ion-page,
+    > ion-header,
     .ion-page > ion-header,
-    ion-tab ion-nav .ion-page > ion-header,
     ion-menu > .menu-inner,
     ion-menu > .menu-inner > ion-header {
       @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);

diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
@@ -21,6 +21,10 @@ export class App {
   @Prop({ context: 'window' }) win!: Window;
   @Prop({ context: 'config' }) config!: Config;
 
+  componentDidLoad() {
+    loadInputShims(this.win, this.config);
+  }
+
   hostData() {
     const hybrid = isHybrid(this.win);
     const statusBar = this.config.getBoolean('statusbarPadding', hybrid);
@@ -35,13 +39,17 @@ export class App {
 
   render() {
     const device = this.config.getBoolean('isDevice', isDevice(this.win));
-    const inputShims = this.config.getBoolean('inputShims', needInputShims(this.win));
-
     return [
-      inputShims && <ion-input-shims></ion-input-shims>,
       <ion-tap-click></ion-tap-click>,
       device && <ion-status-tap></ion-status-tap>,
       <slot></slot>
     ];
   }
 }
+
+async function loadInputShims(win: Window, config: Config) {
+  const inputShims = config.getBoolean('inputShims', needInputShims(win));
+  if (inputShims) {
+    (await import('../../utils/input-shims/input-shims')).startInputShims(win.document, config);
+  }
+}
diff --git a/core/src/components/input-shims/input-shims.tsx b/core/src/components/input-shims/input-shims.tsx
diff --git a/core/src/components/loading/animations/ios.enter.ts b/core/src/components/loading/animations/ios.enter.ts
@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Loading Enter Animation
  */
-export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/loading/animations/ios.leave.ts b/core/src/components/loading/animations/ios.leave.ts
@@ -4,7 +4,7 @@ import { Animation } from '../../../interface';
 /**
  * iOS Loading Leave Animation
  */
-export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/loading/animations/md.enter.ts b/core/src/components/loading/animations/md.enter.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Loading Enter Animation
  */
-export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/loading/animations/md.leave.ts b/core/src/components/loading/animations/md.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * Md Loading Leave Animation
  */
-export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
+export function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
   const baseAnimation = new Animation();
 
   const backdropAnimation = new Animation();

diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
@@ -3,11 +3,11 @@ import { Animation, AnimationBuilder, Config, Mode } from '../../interface';
 import { BACKDROP, OverlayEventDetail, OverlayInterface, dismiss, eventMethod, present } from '../../utils/overlays';
 import { createThemedClasses, getClassMap } from '../../utils/theme';
 
-import iosEnterAnimation from './animations/ios.enter';
-import iosLeaveAnimation from './animations/ios.leave';
+import { iosEnterAnimation } from './animations/ios.enter';
+import { iosLeaveAnimation } from './animations/ios.leave';
 
-import mdEnterAnimation from './animations/md.enter';
-import mdLeaveAnimation from './animations/md.leave';
+import { mdEnterAnimation } from './animations/md.enter';
+import { mdLeaveAnimation } from './animations/md.leave';
 
 @Component({
   tag: 'ion-loading',

diff --git a/core/src/components/menu-controller/animations/base.ts b/core/src/components/menu-controller/animations/base.ts
@@ -6,7 +6,7 @@ import { Animation } from '../../../interface';
  * type will provide their own animations for open and close
  * and registers itself with Menu.
  */
-export default function baseAnimation(Animation: Animation): Promise<Animation> {
+export function baseAnimation(Animation: Animation): Promise<Animation> {
   // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
   // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
 

diff --git a/core/src/components/menu-controller/animations/overlay.ts b/core/src/components/menu-controller/animations/overlay.ts
@@ -1,5 +1,5 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 const BOX_SHADOW_WIDTH = 8;
 /**
@@ -8,7 +8,7 @@ const BOX_SHADOW_WIDTH = 8;
  * The menu slides over the content. The content
  * itself, which is under the menu, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuOverlayAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   let closedX: string, openedX: string;
   const width = menu.width + BOX_SHADOW_WIDTH;
   if (menu.isEndSide) {

diff --git a/core/src/components/menu-controller/animations/push.ts b/core/src/components/menu-controller/animations/push.ts
@@ -1,13 +1,13 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 /**
  * @hidden
  * Menu Push Type
  * The content slides over to reveal the menu underneath.
  * The menu itself also slides over to reveal its bad self.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuPushAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
 
   let contentOpenedX: string, menuClosedX: string;
   const width = menu.width;

diff --git a/core/src/components/menu-controller/animations/reveal.ts b/core/src/components/menu-controller/animations/reveal.ts
@@ -1,13 +1,13 @@
 import { Animation, Menu } from '../../../interface';
-import baseAnimation from './base';
+import { baseAnimation } from './base';
 
 /**
  * @hidden
  * Menu Reveal Type
  * The content slides over to reveal the menu underneath.
  * The menu itself, which is under the content, does not move.
  */
-export default function(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
+export function menuRevealAnimation(Animation: Animation, _: HTMLElement, menu: Menu): Promise<Animation> {
   const openedX = (menu.width * (menu.isEndSide ? -1 : 1)) + 'px';
 
   const contentOpen = new Animation()