chore(stencil): updates to stencil 0.0.8-1

packages/core/package-lock.json

@@ -14,9 +14,9 @@
       }
     },
     "@stencil/core": {
-      "version": "0.0.7",
+      "version": "0.0.8-1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.8-1.tgz",
-      "integrity": "sha512-mpS4l+aSm9i1dLFCGYXY8IDhfylh4+Aijxuzpi7G2VOmLmA/raZeS6hqtdg3pnTU72ckgdZ84D/+x4pgkluinQ==",
+      "integrity": "sha512-CWeVxwFpzepOc1dOVimuG+S1Ga684ZpdmGCToOpmsQwabwAMbCLZEirEUCDumZ0IXhqw+2B00/Gg9myN1VZntw==",
       "dev": true,
       "requires": {
         "chokidar": "1.7.0",
@@ -28,14 +28,6 @@
         "typescript": "2.6.1",
         "uglify-es": "3.1.6",
         "workbox-build": "2.1.1"
-      },
-      "dependencies": {
-        "typescript": {
-          "version": "2.6.1",
-          "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz",
-          "integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
-          "dev": true
-        }
       }
     },
     "@stencil/dev-server": {
@@ -7246,6 +7238,12 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "typescript": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz",
+      "integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
+      "dev": true
+    },
     "uglify-es": {
       "version": "3.1.6",
       "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.1.6.tgz",

packages/core/package.json

@@ -10,7 +10,7 @@
     "dist/"
   ],
   "devDependencies": {
-    "@stencil/core": "^0.0.7",
+    "@stencil/core": "0.0.8-1",
     "@stencil/dev-server": "0.0.18-0",
     "@stencil/utils": "latest",
     "@types/jest": "^21.1.0",

packages/core/src/components/content/content.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Method, Prop } from '@stencil/core';
-import { Config, HTMLIonScrollElement } from '../../index';
+import { Config } from '../../index';
 import { createThemedClasses, getElementClassObject } from '../../utils/theme';
 import { getPageElement } from '../../utils/helpers';
 

packages/core/src/components/datetime/datetime.tsx

@@ -1,6 +1,6 @@
 import { Component, CssClassMap, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core';
 
-import { convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, DatetimeData, dateValueRange, daysInMonth, getValueFromFormat, LocaleData, parseDate, parseTemplate, renderTextFormat, renderDatetime, updateDate } from './datetime-util';
+import { DatetimeData, LocaleData, convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, dateValueRange, daysInMonth, getValueFromFormat, parseDate, parseTemplate, renderDatetime, renderTextFormat, updateDate } from './datetime-util';
 
 import { clamp, isBlank, isObject } from '../../utils/helpers';
 
@@ -462,7 +462,7 @@ export class Datetime {
         text: this.cancelText,
         role: 'cancel',
         handler: () => this.ionCancel.emit(this)
-      },{
+      }, {
         text: this.doneText,
         handler: (data: any) => this.value = data,
       }];

packages/core/src/components/fab/fab-list.tsx

@@ -1,7 +1,5 @@
 import { Component, Element, Prop, PropDidChange } from '@stencil/core';
 
-import { HTMLIonFabElement } from '../../index';
-
 /**
   * @name FabList
   * @description

packages/core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, PropDidChange, State } from '@stencil/core';
-import { HTMLIonScrollElement, ScrollDetail, StencilElement } from '../../index';
+import { ScrollDetail, StencilElement } from '../../index';
 
 const enum Position {
   Top = 'top',

packages/core/src/components/item-sliding/item-sliding.tsx

@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Method, State } from '@stencil/core';
 
-import { GestureDetail, HTMLIonItemElement, HTMLIonListElement } from '../../index';
+import { GestureDetail } from '../../index';
 import { swipeShouldReset } from '../../utils/helpers';
 import { ItemOptions } from './item-options';
 

packages/core/src/components/menu/menu-controller.ts

@@ -1,6 +1,5 @@
 import { Animation, AnimationBuilder, AnimationController, Menu } from '../../index';
 import { Component, Method, Prop } from '@stencil/core';
-import { HTMLIonMenuElement } from '../../index';
 
 import MenuOverlayAnimation from './animations/overlay';
 import MenuRevealAnimation from './animations/reveal';

packages/core/src/components/menu/menu.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, PropDidChange, PropWillChange } from '@stencil/core';
-import { Animation, Config, GestureDetail, HTMLIonMenuControllerElement, HTMLIonMenuElement, SplitPaneAlert, StencilElement } from '../../index';
+import { Animation, Config, GestureDetail, SplitPaneAlert, StencilElement } from '../../index';
 import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers';
 
 @Component({

packages/core/src/components/menu/tests/basic.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html dir="ltr">
-
-<head>
-  <meta charset="UTF-8">
-  <title>Ionic Item Sliding</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <script src="/dist/ionic.js"></script>
-</head>
-
-<body>
-  <ion-app>
-    <ion-menu side="left">
-
-      <ion-header>
-        <ion-toolbar color="secondary">
-          <ion-title>Left Menu</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content>
-        <ion-list>
-          <ion-item>Open Right Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-          <ion-item detail-none>Close Menu</ion-item>
-        </ion-list>
-      </ion-content>
-
-      <ion-footer>
-        <ion-toolbar color="secondary">
-          <ion-title>Footer</ion-title>
-        </ion-toolbar>
-      </ion-footer>
-
-    </ion-menu>
-
-    <ion-menu side="right">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Hola</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content padding>
-        hola macho
-      </ion-content>
-    </ion-menu>
-
-    <ion-page main>
-
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Ionic CDN demo</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-footer>
-          <ion-toolbar>
-          </ion-toolbar>
-        </ion-footer>
-      <ion-content padding>
-        <p>
-          <ion-button onclick="openLeft()">Open left menu</ion-button>
-          <ion-button onclick="openRight()">Open right menu</ion-button>
-        </p>
-        <p>
-          <ion-button onclick="setPush()">Set Push</ion-button>
-          <ion-button onclick="setOverlay()">Set Overlay</ion-button>
-          <ion-button onclick="setReveal()">Set Reveal</ion-button>
-        </p>
-      </ion-content>
-
-    </ion-page>
-
-  </ion-app>
-  <ion-menu-controller></ion-menu-controller>
-
-  <script>
-    const menu = document.querySelector('ion-menu-controller');
-    function openLeft() {
-      console.log('Open left menu');
-      menu.open('left');
-    }
-    function openRight() {
-      console.log('Open right menu');
-      menu.open('right');
-    }
-    function setPush() {
-      menu.get('left').type = 'push';
-      menu.get('right').type = 'push';
-    }
-    function setOverlay() {
-      menu.get('left').type = 'overlay';
-      menu.get('right').type = 'overlay';
-    }
-    function setReveal() {
-      menu.get('left').type = 'reveal';
-      menu.get('right').type = 'reveal';
-    }
-  </script>
-</body>
-</html>

packages/core/src/components/slides/slides.tsx

@@ -118,7 +118,7 @@ export class Slides {
    * that should be controlled by this Slides instance.
    * Default: `null`.
    */
-  @Prop() control: Slides | Slides[] = null;
+  @Prop() control: any = null;
 
   /**
    * @input {string}  Swipe direction: 'horizontal' or 'vertical'.

packages/core/src/components/tabs/page-tab.tsx

@@ -1,5 +1,4 @@
 import { Component, Element } from '@stencil/core';
-import { HTMLIonTabsElement } from '../../index';
 
 @Component({
   tag: 'page-tab'

packages/core/src/components/tabs/tab-bar.tsx

@@ -1,5 +1,4 @@
 import { Component, Listen, Prop, State } from '@stencil/core';
-import { HTMLIonTabElement } from '../../index';
 
 @Component({
   tag: 'ion-tabbar',

packages/core/src/components/tabs/tab-button.tsx

@@ -1,5 +1,4 @@
 import { Component, Event, EventEmitter, Listen, Prop } from '@stencil/core';
-import { HTMLIonTabElement } from '../../index';
 
 @Component({
   tag: 'ion-tab-button'

packages/core/src/components/tabs/tab-highlight.tsx

@@ -1,6 +1,5 @@
 import { Component, Element, Listen, Prop, PropDidChange, State } from '@stencil/core';
 import { getParentElement } from '../../utils/helpers';
-import { HTMLIonTabButtonElement, HTMLIonTabElement } from '../../index';
 
 @Component({
   tag: 'ion-tab-highlight'

packages/core/src/components/tabs/tab.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange, State } from '@stencil/core';
-import { HTMLIonNavElement, StencilElement } from '../../index';
+import { StencilElement } from '../../index';
 import { ViewController } from '../../navigation/nav-interfaces';
 
 /**

packages/core/src/components/tabs/tabs.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
-import { Config, HTMLIonTabElement } from '../../index';
+import { Config } from '../../index';
 
 export interface NavOptions { }
 // import { isPresent } from '../../utils/helpers';

packages/core/src/global/dom-controller.ts

@@ -0,0 +1,78 @@
+export interface Now {
+  (): number;
+}
+
+export interface DomController {
+  read: DomControllerCallback;
+  write: DomControllerCallback;
+  raf: DomControllerCallback;
+}
+
+export interface RafCallback {
+  (timeStamp?: number): void;
+}
+
+export interface DomControllerCallback {
+  (cb: RafCallback): void;
+}
+
+export function createDomControllerClient(win: Window, now: Now, rafPending?: boolean): DomController {
+  const readCBs: RafCallback[] = [];
+  const writeCBs: RafCallback[] = [];
+  const raf = (cb: FrameRequestCallback): number => win.requestAnimationFrame(cb);
+
+
+  function rafFlush(timeStamp: number, startTime?: number, cb?: RafCallback, err?: any) {
+    try {
+      startTime = now();
+
+      // ******** DOM READS ****************
+      while (cb = readCBs.shift()) {
+        cb(timeStamp);
+      }
+
+      // ******** DOM WRITES ****************
+      while (cb = writeCBs.shift()) {
+        cb(timeStamp);
+
+        if ((now() - startTime) > 8) {
+          break;
+        }
+      }
+
+    } catch (e) {
+      err = e;
+    }
+
+    if (rafPending = (readCBs.length > 0 || writeCBs.length > 0)) {
+      raf(rafFlush);
+    }
+
+    if (err) {
+      console.error(err);
+    }
+  }
+
+  return {
+
+    read: (cb: RafCallback) => {
+      readCBs.push(cb);
+
+      if (!rafPending) {
+        rafPending = true;
+        raf(rafFlush);
+      }
+    },
+
+    write: (cb: RafCallback) => {
+      writeCBs.push(cb);
+
+      if (!rafPending) {
+        rafPending = true;
+        raf(rafFlush);
+      }
+    },
+
+    raf: raf
+  };
+}

packages/core/src/global/ionic-global.ts

@@ -1,9 +1,16 @@
 import { createConfigController } from './config-controller';
 import { PLATFORM_CONFIGS, detectPlatforms } from './platform-configs';
+import { createDomControllerClient } from './dom-controller';
 
 
 const Ionic = (window as any).Ionic = (window as any).Ionic || {};
 
+// add dom controller, used to coordinate DOM reads and write in order to avoid
+// layout thrashing
+if (!Context.dom) {
+  const now = () => window.performance.now();
+  Context.dom = createDomControllerClient(window, now);
+}
 
 // create the Ionic.config from raw config object (if it exists)
 // and convert Ionic.config into a ConfigApi that has a get() fn

packages/core/src/global/test/dom-controller.spec.ts

@@ -0,0 +1,42 @@
+import { DomController, createDomControllerClient } from '../dom-controller';
+
+describe('DomController', () => {
+  it('should schedule reads then writes', () => {
+    const stack: string[] = [];
+    dom.read(() => stack.push('r1'));
+    dom.read(() => {
+      stack.push('r2');
+      dom.read(() => stack.push('r1-2'));
+      dom.write(() => stack.push('w1-2'));
+    });
+    dom.read(() => stack.push('r3'));
+
+    dom.write(() => {
+      stack.push('w1');
+      dom.read(() => stack.push('r2-2'));
+      dom.write(() => stack.push('w2-2'));
+    });
+    dom.write(() => stack.push('w2'));
+    dom.write(() => stack.push('w3'));
+
+    expect(stack).toHaveLength(0);
+
+    win.doRAF(0);
+    expect(stack).toEqual(['r1', 'r2', 'r3', 'w1', 'w2', 'w3']);
+  });
+
+  let win: any;
+  let dom: DomController;
+  beforeEach(() => {
+    win = {
+      requestAnimationFrame: (cb: any) => {
+        this.cb = cb;
+      },
+      doRAF: (time: number) => {
+        this.cb(time);
+      }
+    } as any as Window;
+    const now = () => 1;
+    dom = createDomControllerClient(win, now, false);
+  });
+});