Updated dependencies

Author: grgur

package-lock.json

@@ -19,13 +19,13 @@
     "prepublish": "npm run build"
   },
   "dependencies": {
-    "@stencil/core": "^0.6.1"
+    "@stencil/core": "~0.8.0"
   },
   "devDependencies": {
-    "@stencil/dev-server": "latest",
-    "@stencil/utils": "latest",
-    "@types/jest": "^21.1.1",
-    "jest": "^21.2.1"
+    "@stencil/dev-server": "0.0.18",
+    "@stencil/utils": "0.0.4",
+    "@types/jest": "22.2.3",
+    "jest": "22.4.3"
   },
   "repository": {
     "type": "git",

package.json

@@ -4,75 +4,95 @@
  * and imports for stencil collections that might be configured in your stencil.config.js file
  */
 
+import '@stencil/core';
 
 declare global {
+  namespace JSX {
+    interface Element {}
+    export interface IntrinsicElements {}
+  }
+  namespace JSXElements {}
+
   interface HTMLStencilElement extends HTMLElement {
     componentOnReady(): Promise<this>;
     componentOnReady(done: (ele?: this) => void): void;
-  }
-}
 
+    forceUpdate(): void;
+  }
 
+  interface HTMLAttributes {}
+}
 
-import {
-  StopWatchBoxComponent as StopWatchBox
-} from './components/stop-watch-box/stop-watch-box';
 
 declare global {
-  interface HTMLStopWatchBoxElement extends StopWatchBox, HTMLStencilElement {
+
+  namespace StencilComponents {
+    interface StopWatchBox {
+      'applyHover': boolean;
+    }
   }
+
+  interface HTMLStopWatchBoxElement extends StencilComponents.StopWatchBox, HTMLStencilElement {}
+
   var HTMLStopWatchBoxElement: {
     prototype: HTMLStopWatchBoxElement;
     new (): HTMLStopWatchBoxElement;
   };
   interface HTMLElementTagNameMap {
-    "stop-watch-box": HTMLStopWatchBoxElement;
+    'stop-watch-box': HTMLStopWatchBoxElement;
   }
   interface ElementTagNameMap {
-    "stop-watch-box": HTMLStopWatchBoxElement;
+    'stop-watch-box': HTMLStopWatchBoxElement;
   }
   namespace JSX {
     interface IntrinsicElements {
-      "stop-watch-box": JSXElements.StopWatchBoxAttributes;
+      'stop-watch-box': JSXElements.StopWatchBoxAttributes;
     }
   }
   namespace JSXElements {
     export interface StopWatchBoxAttributes extends HTMLAttributes {
-      applyHover?: boolean;
+      'applyHover'?: boolean;
     }
   }
 }
 
 
-import {
-  StopWatchComponent as StopWatch
-} from './components/stop-watch/stop-watch';
-
 declare global {
-  interface HTMLStopWatchElement extends StopWatch, HTMLStencilElement {
+
+  namespace StencilComponents {
+    interface StopWatch {
+      'applyHover': boolean;
+      'hours': string;
+      'milliseconds': string;
+      'minutes': string;
+      'seconds': string;
+    }
   }
+
+  interface HTMLStopWatchElement extends StencilComponents.StopWatch, HTMLStencilElement {}
+
   var HTMLStopWatchElement: {
     prototype: HTMLStopWatchElement;
     new (): HTMLStopWatchElement;
   };
   interface HTMLElementTagNameMap {
-    "stop-watch": HTMLStopWatchElement;
+    'stop-watch': HTMLStopWatchElement;
   }
   interface ElementTagNameMap {
-    "stop-watch": HTMLStopWatchElement;
+    'stop-watch': HTMLStopWatchElement;
   }
   namespace JSX {
     interface IntrinsicElements {
-      "stop-watch": JSXElements.StopWatchAttributes;
+      'stop-watch': JSXElements.StopWatchAttributes;
     }
   }
   namespace JSXElements {
     export interface StopWatchAttributes extends HTMLAttributes {
-      applyHover?: boolean;
-      hours?: string;
-      milliseconds?: string;
-      minutes?: string;
-      seconds?: string;
+      'applyHover'?: boolean;
+      'hours'?: string;
+      'milliseconds'?: string;
+      'minutes'?: string;
+      'seconds'?: string;
     }
   }
 }

src/components.d.ts

@@ -1,2 +1,123 @@
 /*! Built with http://stenciljs.com */
-!function(t,e,n,o,i,s,r,c,a,u,p){!function(t,e,n,o,i,s,r,c,a,u,p,h,l){(t.stopwatchbox=t.stopwatchbox||{}).components=p,(l=p.filter(function(t){return t[2]}).map(function(t){return t[0]})).length&&((h=e.createElement("style")).innerHTML=l.join()+"{visibility:hidden}.hydrated{visibility:inherit}",h.setAttribute("data-styles",""),e.head.insertBefore(h,e.head.firstChild)),(h=n[n.length-1])&&h.src&&(s=(l=h.src.split("/").slice(0,-1)).join("/")+(l.length?"/":"")+"stopwatchbox/"),(h=e.createElement("script")).src=s+(!function(t){return t.location.search.indexOf("core=es5")>-1}(t)&&function(t){return t.customElements}(t)&&function(t){if(!("noModule"in h))return!1;try{return new Function('import("")'),!0}catch(t){return!1}}()&&function(t){return t.fetch}(t)&&function(t){return t.CSS&&t.CSS.supports&&t.CSS.supports("color","var(--c)")}(t)?"stopwatchbox.5ac9z1fx.js":"stopwatchbox.6jj17ql2.js"),h.setAttribute("data-path",s),h.setAttribute("data-namespace","stopwatchbox"),e.head.appendChild(h)}(t,e,e.scripts,0,0,"/build/stopwatchbox/",0,0,0,0,[["stop-watch","mbcice7o",1,[["applyHover",1,"apply-hover",3],["hours",1,1,2],["milliseconds",1,1,2],["minutes",1,1,2],["seconds",1,1,2]]],["stop-watch-box","mbcice7o",1,[["applyHover",1,"apply-hover",3],["hours",5],["isTimerRunning",5],["milliseconds",5],["minutes",5],["seconds",5]]]],void 0)}(window,document);
+(function(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components) {
+
+    function init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCorePolyfilled, hydratedCssClass, components, HTMLElementPrototype, App, x, y, scriptElm, orgComponentOnReady) {
+    // create global namespace if it doesn't already exist
+    App = win[namespace] = win[namespace] || {};
+    App.components = components;
+    y = components.filter(function (c) { return c[2]; }).map(function (c) { return c[0]; });
+    if (y.length) {
+        // auto hide components until they been fully hydrated
+        // reusing the "x" and "i" variables from the args for funzies
+        x = doc.createElement('style');
+        x.innerHTML = y.join() + '{visibility:hidden}.' + hydratedCssClass + '{visibility:inherit}';
+        x.setAttribute('data-styles', '');
+        doc.head.insertBefore(x, doc.head.firstChild);
+    }
+    // create a temporary array to store the resolves
+    // before the core file has fully loaded
+    App.$r = [];
+    // add componentOnReady to HTMLElement.prototype
+    orgComponentOnReady = HTMLElementPrototype.componentOnReady;
+    HTMLElementPrototype.componentOnReady = function componentOnReady(cb) {
+        const elm = this;
+        // there may be more than one app on the window so
+        // call original HTMLElement.prototype.componentOnReady
+        // if one exists already
+        orgComponentOnReady && orgComponentOnReady.call(elm);
+        function executor(resolve) {
+            if (App.$r) {
+                // core file hasn't loaded yet
+                // so let's throw it in this temporary queue
+                // and when the core does load it'll handle these
+                App.$r.push([elm, resolve]);
+            }
+            else {
+                // core has finished loading because there's no temporary queue
+                // call the core's logic to handle this
+                App.componentOnReady(elm, resolve);
+            }
+        }
+        if (cb) {
+            // just a callback
+            return executor(cb);
+        }
+        // callback wasn't provided, let's return a promise
+        if (win.Promise) {
+            // use native/polyfilled promise
+            return new Promise(executor);
+        }
+        // promise may not have been polyfilled yet
+        return { then: executor };
+    };
+    // figure out the script element for this current script
+    y = doc.querySelectorAll('script');
+    for (x = y.length - 1; x >= 0; x--) {
+        scriptElm = y[x];
+        if (scriptElm.src || scriptElm.hasAttribute('data-resources-url')) {
+            break;
+        }
+    }
+    // get the resource path attribute on this script element
+    y = scriptElm.getAttribute('data-resources-url');
+    if (y) {
+        // the script element has a data-resources-url attribute, always use that
+        resourcesUrl = y;
+    }
+    if (!resourcesUrl && scriptElm.src) {
+        // we don't have an exact resourcesUrl, so let's
+        // figure it out relative to this script's src and app's filesystem namespace
+        y = scriptElm.src.split('/').slice(0, -1);
+        resourcesUrl = (y.join('/')) + (y.length ? '/' : '') + fsNamespace + '/';
+    }
+    // request the core this browser needs
+    // test for native support of custom elements and fetch
+    // if either of those are not supported, then use the core w/ polyfills
+    // also check if the page was build with ssr or not
+    x = doc.createElement('script');
+    if (usePolyfills(win, win.location, x, 'import("")')) {
+        // requires the es5/polyfilled core
+        x.src = resourcesUrl + appCorePolyfilled;
+    }
+    else {
+        // let's do this!
+        x.src = resourcesUrl + appCore;
+        x.setAttribute('type', 'module');
+        x.setAttribute('crossorigin', true);
+    }
+    x.setAttribute('data-resources-url', resourcesUrl);
+    x.setAttribute('data-namespace', fsNamespace);
+    doc.head.appendChild(x);
+}
+function usePolyfills(win, location, scriptElm, dynamicImportTest) {
+    // fyi, dev mode has verbose if/return statements
+    // but it minifies to a nice 'lil one-liner ;)
+    if (location.search.indexOf('core=esm') > 0) {
+        // force esm build
+        return false;
+    }
+    if ((location.search.indexOf('core=es5') > 0) ||
+        (location.protocol === 'file:') ||
+        (!(win.customElements && win.customElements.define)) ||
+        (!win.fetch) ||
+        (!(win.CSS && win.CSS.supports && win.CSS.supports('color', 'var(--c)'))) ||
+        (!('noModule' in scriptElm))) {
+        // es5 build w/ polyfills
+        return true;
+    }
+    // final test to see if this browser support dynamic imports
+    return doesNotSupportsDynamicImports(dynamicImportTest);
+}
+function doesNotSupportsDynamicImports(dynamicImportTest) {
+    try {
+        new Function(dynamicImportTest);
+        return false;
+    }
+    catch (e) { }
+    return true;
+}
+
+
+    init(win, doc, namespace, fsNamespace, resourcesUrl, appCore, appCoreSsr, appCorePolyfilled, hydratedCssClass, components);
+
+    })(window, document, "stopwatchbox","stopwatchbox",0,"stopwatchbox.core.js","es5-build-disabled.js","hydrated",[["stop-watch","stop-watch",1,[["applyHover",1,0,"apply-hover",3],["hours",1,0,1,2],["milliseconds",1,0,1,2],["minutes",1,0,1,2],["seconds",1,0,1,2]]],["stop-watch-box","stop-watch",1,[["applyHover",1,0,"apply-hover",3],["hours",5],["isTimerRunning",5],["milliseconds",5],["minutes",5],["seconds",5]]]],HTMLElement.prototype);