fix(): correct all type errors in ionic core.

packages/core/package.json

@@ -2,7 +2,7 @@
   "name": "@ionic/core",
   "version": "0.0.1",
   "description": "Base components for Ionic",
-  "main": "dist/manifest.json",
+  "main": "dist/collection/collection-manifest.json",
   "scripts": {
     "build": "npm run copy.vendor && stencil build --prod",
     "dev": "npm run copy.vendor && stencil build --watch --debug",

packages/core/src/components/grid/col.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component } from '@stencil/core';
 
 /**
   * @name Col

packages/core/src/components/grid/grid.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component } from '@stencil/core';
 
 /**
   * @name Grid

packages/core/src/components/grid/row.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component } from '@stencil/core';
 
 /**
   * @name Row

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

@@ -1,4 +1,4 @@
-import { Menu, MenuController as IMenuController } from '../../util/interfaces';
+import { Menu, MenuController as IMenuController } from '../../utils/interfaces';
 import { MenuType, MenuRevealType, MenuPushType, MenuOverlayType } from './menu-types';
 
 

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

@@ -22,7 +22,7 @@ export class MenuType implements IMenuType {
       .duration(280);
   }
 
-  setOpen(shouldOpen: boolean, animated: boolean, done: Function) {
+  setOpen(shouldOpen: boolean, animated: boolean, done: (animation: Animation) => void) {
     const ani = this.ani
       .onFinish(done, {oneTimeCallback: true, clearExistingCallacks: true })
       .reverse(!shouldOpen);

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop, Ionic } from '@stencil/core';
+import { Component, h, Prop, Ionic, PropDidChange } from '@stencil/core';
 import { VNodeData, GlobalNamespace, Menu as IMenu } from '../../utils/interfaces';
 import { MenuController } from './menu-controller';
 import { MenuType } from './menu-types';

packages/core/src/components/router/route-link.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 
 /**
   * @name Route
@@ -14,12 +14,15 @@ export class RouteLink {
   // The instance of the router
   @Prop() router: any;
 
-  handleClick(e) {
+  handleClick(e: any) {
     console.log('Route link click', e);
+    /*
     router.navigateTo(this.url)
+    */
   }
 
   render() {
+    /*
     const router = document.querySelector(this.router);
     const match = router.match
     console.log(`  <ion-route-link> Rendering route ${this.url}`, router, match);
@@ -27,5 +30,6 @@ export class RouteLink {
     return (
       <a onClick={this.handleClick.bind(this)}><slot></slot></a>
     );
+    */
   }
 }

packages/core/src/components/router/route.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, Prop, State } from '@stencil/core';
 
 /**
   * @name Route
@@ -24,15 +24,18 @@ export class Route {
   @State() match: any = {};
 
   ionViewWillLoad() {
+/*
     this.routerInstance = document.querySelector(this.router)
 
     // HACK
     this.routerInstance.addEventListener('ionRouterNavigation', (e) => {
       this.match = e.detail;
     })
+*/
   }
 
   render() {
+/*
     this.match.url = this.routerInstance.$instance.routeMatch.url;
     const match = this.match
     const ChildComponent = this.component
@@ -47,5 +50,6 @@ export class Route {
     } else {
       return null;
     }
+*/
   }
 }

packages/core/src/components/router/router.tsx

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, Prop, State } from '@stencil/core';
 
 /**
   * @name Router
@@ -20,6 +20,7 @@ export class Router {
     return this.routeMatch
   }
 
+  /*
   @Prop()
   navigateTo(url, data={}) {
     window.history.pushState(null, null, url);
@@ -60,4 +61,5 @@ export class Router {
       <slot></slot>
     );
   }
+  */
 }

packages/core/src/components/scroll/scroll-interface.ts

@@ -1,4 +1,4 @@
-import { ScrollCallback } from '../../util/interfaces';
+import { ScrollCallback } from '../../utils/interfaces';
 
 
 export interface Scroll {

packages/core/src/components/searchbar/searchbar.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Ionic, Prop, PropDidChange, State } from '@stencil/core';
+import { Component, h, Ionic, Prop, State } from '@stencil/core';
 import { VNodeData } from '../../utils/interfaces';
 
 /**

packages/core/src/components/stencil-site/demos-page.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/core/src/components/stencil-site/docs-page.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/core/src/components/stencil-site/landing-page.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 
 @Component({

packages/core/src/components/stencil-site/site-header.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h, } from '@stencil/core';
 
 @Component({
   tag: 'site-header',

packages/core/src/components/stencil-site/stencil-site.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 
 @Component({
   tag: 'stencil-site'

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

@@ -1,5 +1,4 @@
-import { Component, h } from '@stencil/core';
-import { VNodeData } from '../../utils/interfaces';
+import { Component, Prop } from '@stencil/core';
 
 
 
@@ -10,7 +9,7 @@ import { VNodeData } from '../../utils/interfaces';
   }
 })
 export class TabBar {
-  @Prop() tabs: [Tab] = [];
+  @Prop() tabs: any;
 
   @Prop() onTabSelected: Function;
 
@@ -20,6 +19,7 @@ export class TabBar {
    * @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
    */
   @Prop() tabsLayout: string = 'icon-top'
+  /*
 
   hostData(): VNodeData {
     return {
@@ -52,4 +52,5 @@ export class TabBar {
       </div>
     )
   }
+  */
 }

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

@@ -1,4 +1,4 @@
-import { Component, h } from '@stencil/core';
+import { Component, Prop, h } from '@stencil/core';
 import { VNodeData } from '../../utils/interfaces';
 
 @Component({
@@ -8,7 +8,7 @@ import { VNodeData } from '../../utils/interfaces';
   }
 })
 export class TabButton {
-  @Prop() tab: Tab;
+  @Prop() tab: any;
 
   @Prop() layout: string;
 
@@ -54,8 +54,10 @@ export class TabButton {
     const tab = this.tab
 
     // TODO: Apply these on host?
+    /*
     let { id, ariaControls, ariaSelected, hasTitle, hasIcon, hasTitleOnly,
     iconOnly, hasBadge, disableHover, tabDisabled, tabHidden } = {};
+    */
 
     const items = []
 

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

@@ -1,4 +1,4 @@
-import { Component, h, Ionic } from '@stencil/core';
+import { Component, h, Prop, State, Ionic } from '@stencil/core';
 import { VNodeData } from '../../utils/interfaces';
 
 

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

@@ -1,4 +1,4 @@
-import { Component, h, Listen } from '@stencil/core';
+import { Component, h, State, Prop, Listen, PropDidChange } from '@stencil/core';
 
 @Component({
   tag: 'ion-tabs',
@@ -13,12 +13,12 @@ import { Component, h, Listen } from '@stencil/core';
 })
 export class Tabs {
   // Current list of tabs
-  @State() tabs: [Tab] = []
+  @State() tabs: any
 
   /**
    * @state {number} The selected tab
    */
-  @State() selectedTab: Tab;
+  @State() selectedTab: any;
 
   /**
    * @state {number} The selected tab index
@@ -55,7 +55,7 @@ export class Tabs {
   }
 
   @Listen('ionTabDidLoad')
-  tabDidLoad(ev) {
+  tabDidLoad(ev: any) {
     const tab = ev.detail.tab;
 
     // First tab? Select it
@@ -67,13 +67,13 @@ export class Tabs {
   }
 
   @Listen('ionTabDidUnload')
-  tabDidUnload(ev) {
-    this.tabs = this.tabs.filter(t => t !== ev.detail.tab)
+  tabDidUnload(ev: any) {
+    this.tabs = this.tabs.filter((t: any) => t !== ev.detail.tab)
   }
 
-  handleOnTabSelected(tab, index) {
+  handleOnTabSelected(tab: any, index: number) {
     // Select just this tab
-    this.tabs.forEach(t => t.isSelected = false);
+    this.tabs.forEach((t: any) => t.isSelected = false);
     tab.isSelected = true;
 
     // Store the selected tab and index

packages/core/src/components/title/title.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
 
 /**

packages/core/src/components/toggle/toggle.tsx

@@ -1,4 +1,4 @@
-import { Component, h, Listen, Prop, VNodeData, Ionic } from '@stencil/core';
+import { Component, h, Listen, Prop, VNodeData, Ionic, PropDidChange } from '@stencil/core';
 import { BooleanInputComponent, GestureDetail } from '../../utils/interfaces';
 
 @Component({

packages/core/src/utils/interfaces.ts

@@ -555,7 +555,6 @@ export interface ModeMeta {
   [1]?: string;
 }
 
-
 export interface HostMeta {
   [key: string]: any;
 }
@@ -897,54 +896,3 @@ export interface IdleOptions {
 export interface BundleCallbacks {
   [bundleId: string]: Function[];
 }
-
-
-export interface StencilSystem {
-  fs?: {
-    readFile(filename: string, encoding: string, callback: (err: NodeJS.ErrnoException, data: string) => void): void;
-    readFileSync(filename: string, encoding: string): string;
-    readdirSync(path: string | Buffer, options?: string | {}): string[];
-    statSync(path: string | Buffer): {
-      isFile(): boolean;
-      isDirectory(): boolean;
-    };
-  };
-  path?: {
-    join(...paths: string[]): string;
-  };
-  vm?: {
-    createContext(sandbox?: any): any;
-    runInContext(code: string, contextifiedSandbox: any, options?: any): any;
-  };
-  createDom?(): {
-    parse(hydrateOptions: HydrateOptions): Window;
-    serialize(): string;
-  };
-}
-
-
-export interface RendererOptions {
-  registry?: ComponentRegistry;
-  staticDir?: string;
-  debug?: boolean;
-  sys?: StencilSystem;
-}
-
-
-export interface HydrateOptions {
-  req?: {
-    protocol: string;
-    get: (key: string) => string;
-    originalUrl: string;
-    url: string;
-  };
-  html?: string;
-  url?: string;
-  referrer?: string;
-  userAgent?: string;
-  cookie?: string;
-  dir?: string;
-  lang?: string;
-  config?: Object;
-  removeUnusedCss?: boolean;
-}

packages/core/tsconfig.json

@@ -22,9 +22,6 @@
     "pretty": true,
     "removeComments": false,
     "sourceMap": false,
-    "types": [
-      "node"
-    ],
     "jsx": "react",
     "jsxFactory": "h"
   },

packages/core/www/.dev-diagnostics.html

@@ -0,0 +1,470 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Dev Diagnostics</title>
+ <style>
+    a,
+    button {
+        -ms-touch-action: manipulation;
+        touch-action: manipulation
+    }
+    #dev-diagnostics * {
+        box-sizing: border-box
+    }
+    #dev-diagnostics {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 100000;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, "Roboto", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-size: 14px;
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+        font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        text-size-adjust: none;
+        word-wrap: break-word;
+        color: #333;
+        background-color: #fff;
+        box-sizing: border-box;
+        overflow: hidden;
+        user-select: auto
+    }
+    body#dev-diagnostics {
+      overflow: auto;
+    }
+    .dev-diagnostics-content {
+        position: relative;
+        padding: 0 0 30px 0;
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch
+    }
+    #dev-diagnostics .dev-diagnostic {
+        margin: 20px;
+        border: 1px solid #ddd;
+        border-radius: 3px
+    }
+    #dev-diagnostics .dev-diagnostic-masthead {
+        padding: 8px 12px 12px 12px
+    }
+    #dev-diagnostics .dev-diagnostic-title {
+        margin: 0;
+        font-size: 16px;
+        color: #222
+    }
+    #dev-diagnostics .dev-diagnostic-message {
+        margin-top: 4px;
+        color: #666
+    }
+    #dev-diagnostics .dev-diagnostic-file {
+        position: relative;
+        border-top: 1px solid #ddd
+    }
+    #dev-diagnostics .dev-diagnostic-file-header {
+        padding: 5px 10px;
+        border-bottom: 1px solid #ddd;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+        background-color: #f8f8f8
+    }
+    #dev-diagnostics {
+        -webkit-transition: opacity 150ms ease-out;
+        transition: opacity 150ms ease-out
+    }
+    #dev-diagnostics.dev-diagnostics-fade-out {
+        opacity: 0
+    }
+    #dev-diagnostics .dev-diagnostic-blob {
+        overflow-x: auto;
+        overflow-y: hidden;
+        border-bottom-right-radius: 3px;
+        border-bottom-left-radius: 3px
+    }
+    #dev-diagnostics .dev-diagnostic-table {
+        border-spacing: 0;
+        border-collapse: collapse;
+        -moz-tab-size: 2;
+        tab-size: 2
+    }
+    #dev-diagnostics .dev-diagnostic-table td,
+    #dev-diagnostics .dev-diagnostic-table th {
+        padding: 0
+    }
+    #dev-diagnostics td.dev-diagnostic-blob-num {
+        padding-right: 10px;
+        padding-left: 10px;
+        width: 1%;
+        min-width: 50px;
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font-size: 12px;
+        line-height: 20px;
+        color: rgba(0, 0, 0, 0.3);
+        text-align: right;
+        white-space: nowrap;
+        vertical-align: top;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: solid #eee;
+        border-width: 0 1px 0 0
+    }
+    #dev-diagnostics .dev-diagnostic-blob-num::before {
+        content: attr(data-line-number)
+    }
+    #dev-diagnostics .dev-diagnostic-error-line .dev-diagnostic-blob-num {
+        background-color: #fdd;
+        border-color: #ffc9c9
+    }
+    #dev-diagnostics .dev-diagnostic-error-line .dev-diagnostic-blob-code {
+        background: rgba(255, 221, 221, 0.25);
+        z-index: -1
+    }
+    #dev-diagnostics .dev-diagnostics-error-chr {
+        position: relative
+    }
+    #dev-diagnostics .dev-diagnostics-error-chr::before {
+        position: absolute;
+        z-index: -1;
+        top: -3px;
+        left: 0px;
+        width: 8px;
+        height: 20px;
+        background-color: #fdd;
+        content: ""
+    }
+    #dev-diagnostics td.dev-diagnostic-blob-code {
+        position: relative;
+        padding-right: 10px;
+        padding-left: 10px;
+        line-height: 20px;
+        vertical-align: top;
+        overflow: visible;
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font-size: 12px;
+        color: #333;
+        word-wrap: normal;
+        white-space: pre
+    }
+    #dev-diagnostics .dev-diagnostic-blob-code::before {
+        content: ""
+    }
+    #dev-diagnostics .dev-diagnostic-stack-header {
+        padding: 5px 10px;
+        border-top: 1px solid #ddd;
+        border-bottom: 1px solid #ddd;
+        background-color: #f8f8f8
+    }
+    #dev-diagnostics .dev-diagnostic-stack {
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font-size: 10px;
+        color: #333;
+        word-wrap: normal;
+        white-space: pre;
+        overflow: auto;
+        padding: 10px;
+        user-select: auto;
+        -webkit-user-select: text
+    }
+    #dev-diagnostics-toast {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        z-index: 100002;
+        margin: auto;
+        max-width: 700px;
+        border-radius: 3px;
+        font-family: -apple-system, "Roboto", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        background: rgba(0, 0, 0, 0.9);
+        -webkit-transform: translate3d(0px, -60px, 0px);
+        transform: translate3d(0px, -60px, 0px);
+        -webkit-transition: -webkit-transform 75ms ease-out;
+        transition: transform 75ms ease-out;
+        pointer-events: none
+    }
+    #dev-diagnostics-toast.dev-diagnostics-toast-active {
+        -webkit-transform: translate3d(0px, 0px, 0px);
+        transform: translate3d(0px, 0px, 0px)
+    }
+    #dev-diagnostics-toast .dev-diagnostics-toast-content {
+        display: flex;
+        -webkit-align-items: center;
+        -ms-flex-align: center;
+        align-items: center;
+        pointer-events: auto
+    }
+    #dev-diagnostics-toast .dev-diagnostics-toast-message {
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+        padding: 15px;
+        font-family: -apple-system, "Roboto", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+        font-size: 14px;
+        color: #fff
+    }
+    #dev-diagnostics-toast .dev-diagnostics-toast-spinner {
+        position: relative;
+        display: inline-block;
+        width: 56px;
+        height: 28px
+    }
+    #dev-diagnostics-toast svg:not(:root) {
+        overflow: hidden
+    }
+    #dev-diagnostics-toast svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        -webkit-transform: translateZ(0);
+        transform: translateZ(0);
+        -webkit-animation: dev-diagnostics-spinner-rotate 600ms linear infinite;
+        animation: dev-diagnostics-spinner-rotate 600ms linear infinite
+    }
+    @-webkit-keyframes dev-diagnostics-spinner-rotate {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg)
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg)
+        }
+    }
+    @keyframes dev-diagnostics-spinner-rotate {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg)
+        }
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg)
+        }
+    }
+    #dev-diagnostics-toast svg circle {
+        fill: transparent;
+        stroke: white;
+        stroke-width: 4px;
+        stroke-dasharray: 128px;
+        stroke-dashoffset: 82px
+    }
+    .dev-diagnostics-header {
+        background: #f8f8f8;
+        border-bottom: .55px solid #ddd;
+        color: #333
+    }
+    .dev-diagnostics-cordova-ios .dev-diagnostics-header {
+        padding-top: 20px
+    }
+    .dev-diagnostics-header-content {
+        display: -webkit-flex;
+        display: flex;
+        overflow: hidden;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+        width: 100%;
+        min-height: 44px
+    }
+    .dev-diagnostics-header-inner {
+        -webkit-flex: 1;
+        flex: 1;
+        display: -webkit-flex;
+        display: flex;
+        padding: 0 20px;
+        font-size: 20px
+    }
+    .dev-diagnostics-buttons {
+        display: -webkit-flex;
+        display: flex;
+        padding: 0 0 0 20px
+    }
+    #dev-diagnostic-close {
+        margin: 0;
+        padding: 10px 20px;
+        border: 0;
+        outline: none;
+        background: transparent;
+        font-size: 14px;
+        color: #478aff;
+        -moz-appearance: none;
+        -ms-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+        cursor: pointer
+    }
+    #dev-diagnostic-close:hover {
+        opacity: 0.7
+    }
+    #dev-diagnostics-options {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 100001;
+        width: 100%;
+        height: 100%;
+        font-family: -apple-system, "Roboto", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
+    }
+    .dev-diagnostics-sheet-wrapper {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        display: block;
+        margin: auto;
+        width: 100%;
+        max-width: 500px;
+        transition: transform 300ms cubic-bezier(0.36, 0.66, 0.04, 1);
+        transform: translate3d(0, 100%, 0)
+    }
+    #dev-diagnostics-backdrop {
+        width: 100%;
+        height: 100%;
+        opacity: 0.01;
+        background: black;
+        transition: opacity 300ms cubic-bezier(0.36, 0.66, 0.04, 1)
+    }
+    .dev-diagnostics-options-show .dev-diagnostics-sheet-wrapper {
+        transform: translate3d(0, 0, 0)
+    }
+    .dev-diagnostics-options-show #dev-diagnostics-backdrop {
+        opacity: 0.4
+    }
+    .dev-diagnostics-sheet-container {
+        padding: 0 10px
+    }
+    .dev-diagnostics-sheet-group {
+        overflow: hidden;
+        margin-bottom: 8px;
+        border-radius: 13px;
+        background: #f9f9f9
+    }
+    .dev-diagnostics-sheet-group:last-child {
+        margin-bottom: 10px
+    }
+    .dev-diagnostics-sheet-title {
+        padding: 15px;
+        border-bottom: .55px solid #d6d6da;
+        font-size: 13px;
+        font-weight: 400;
+        text-align: center;
+        color: #8f8f8f
+    }
+    .dev-diagnostics-sheet-button {
+        margin: 0;
+        padding: 18px;
+        width: 100%;
+        min-height: 56px;
+        border-bottom: .55px solid #d6d6da;
+        font-size: 20px;
+        color: #478aff;
+        background: transparent
+    }
+    .dev-diagnostics-sheet-button:last-child {
+        border-bottom: 0
+    }
+    #dev-diagnostics-system-info {
+        margin: 0 20px 20px 20px;
+        padding: 0px 0 20px 0;
+        font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font-size: 10px;
+        color: #999;
+        overflow: auto;
+        white-space: pre
+    }
+
+    /**
+     * GitHub Gist Theme
+     * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+     * https://highlightjs.org/
+     */
+
+    .hljs-comment,
+    .hljs-meta {
+        color: #969896
+    }
+    .hljs-string,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-strong,
+    .hljs-emphasis,
+    .hljs-quote {
+        color: #df5000
+    }
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-type {
+        color: #a71d5d
+    }
+    .hljs-literal,
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-attribute {
+        color: #0086b3
+    }
+    .hljs-section,
+    .hljs-name {
+        color: #63a35c
+    }
+    .hljs-tag {
+        color: #333333
+    }
+    .hljs-title,
+    .hljs-attr,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo {
+        color: #795da3
+    }
+    .hljs-addition {
+        color: #55a532;
+        background-color: #eaffea
+    }
+    .hljs-deletion {
+        color: #bd2c00;
+        background-color: #ffecec
+    }
+    .hljs-link {
+        text-decoration: underline
+    }
+  </style>
+</head>
+<body id="dev-diagnostics">
+
+<div class="dev-diagnostic">
+ <div class="dev-diagnostic-masthead" title="build error: undefined">
+  <div class="dev-diagnostic-title">Build Warn</div>
+  <div class="dev-diagnostic-message" data-error-code="build-undefined">ion-item, ion-item-divider, ion-label, ion-list, ion-list-header, ion-skeleton-text: dist/collection/components/item/item.js (1:16) The &#039;this&#039; keyword is equivalent to &#039;undefined&#039; at the top level of an ES module, and has been rewritten</div>
+ </div>
+
+</div>
+
+<div class="dev-diagnostic">
+ <div class="dev-diagnostic-masthead" title="build error: undefined">
+  <div class="dev-diagnostic-title">Build Warn</div>
+  <div class="dev-diagnostic-message" data-error-code="build-undefined">ion-menu: dist/collection/components/menu/menu-types.js (1:17) The &#039;this&#039; keyword is equivalent to &#039;undefined&#039; at the top level of an ES module, and has been rewritten</div>
+ </div>
+
+</div>
+
+<script>
+  console.log('dev diagnostics');
+  </script>
+
+</body>
+</html>