One (#10)

* chore (deps) bump

* feat(one): update to stencil 1.1.2

Author: peterennis

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "stop-watch-box",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "description": "A simple Stop-Watch-Box Web Component created with Stencil",
   "module": "dist/esm/index.js",
   "main": "dist/index.js",
@@ -18,7 +18,12 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@stencil/core": "0.18.1"
+    "@stencil/core": "1.1.2",
+    "@types/jest": "24.0.15",
+    "@types/puppeteer": "1.12.4",
+    "jest": "24.8.0",
+    "jest-cli": "24.8.0",
+    "puppeteer": "1.17.0"
   },
   "license": "MIT",
   "author": "Modus Create <[email protected]>",

package.json

@@ -5,77 +5,67 @@
  */
 
 
-import '@stencil/core';
-
-
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
 export namespace Components {
-
-  interface StopWatchBox {
-    'applyHover': boolean;
-  }
-  interface StopWatchBoxAttributes extends StencilHTMLAttributes {
-    'applyHover'?: boolean;
-  }
-
   interface StopWatch {
     'applyHover': boolean;
     'hours': string;
     'milliseconds': string;
     'minutes': string;
     'seconds': string;
   }
-  interface StopWatchAttributes extends StencilHTMLAttributes {
-    'applyHover'?: boolean;
-    'hours'?: string;
-    'milliseconds'?: string;
-    'minutes'?: string;
-    'seconds'?: string;
+  interface StopWatchBox {
+    'applyHover': boolean;
   }
 }
 
 declare global {
-  interface StencilElementInterfaces {
-    'StopWatchBox': Components.StopWatchBox;
-    'StopWatch': Components.StopWatch;
-  }
-
-  interface StencilIntrinsicElements {
-    'stop-watch-box': Components.StopWatchBoxAttributes;
-    'stop-watch': Components.StopWatchAttributes;
-  }
 
 
-  interface HTMLStopWatchBoxElement extends Components.StopWatchBox, HTMLStencilElement {}
-  var HTMLStopWatchBoxElement: {
-    prototype: HTMLStopWatchBoxElement;
-    new (): HTMLStopWatchBoxElement;
-  };
-
   interface HTMLStopWatchElement extends Components.StopWatch, HTMLStencilElement {}
   var HTMLStopWatchElement: {
     prototype: HTMLStopWatchElement;
     new (): HTMLStopWatchElement;
   };
 
+  interface HTMLStopWatchBoxElement extends Components.StopWatchBox, HTMLStencilElement {}
+  var HTMLStopWatchBoxElement: {
+    prototype: HTMLStopWatchBoxElement;
+    new (): HTMLStopWatchBoxElement;
+  };
   interface HTMLElementTagNameMap {
-    'stop-watch-box': HTMLStopWatchBoxElement
-    'stop-watch': HTMLStopWatchElement
+    'stop-watch': HTMLStopWatchElement;
+    'stop-watch-box': HTMLStopWatchBoxElement;
   }
+}
 
-  interface ElementTagNameMap {
-    'stop-watch-box': HTMLStopWatchBoxElement;
-    'stop-watch': HTMLStopWatchElement;
+declare namespace LocalJSX {
+  interface StopWatch extends JSXBase.HTMLAttributes<HTMLStopWatchElement> {
+    'applyHover'?: boolean;
+    'hours'?: string;
+    'milliseconds'?: string;
+    'minutes'?: string;
+    'seconds'?: string;
+  }
+  interface StopWatchBox extends JSXBase.HTMLAttributes<HTMLStopWatchBoxElement> {
+    'applyHover'?: boolean;
+  }
+
+  interface IntrinsicElements {
+    'stop-watch': StopWatch;
+    'stop-watch-box': StopWatchBox;
   }
+}
+
+export { LocalJSX as JSX };
 
 
+declare module "@stencil/core" {
   export namespace JSX {
-    export interface Element {}
-    export interface IntrinsicElements extends StencilIntrinsicElements {
-      [tagName: string]: any;
-    }
+    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
   }
-  export interface HTMLAttributes extends StencilHTMLAttributes {}
-
 }
+
+

src/components.d.ts

@@ -1,4 +1,4 @@
-import { Component, State, Prop } from "@stencil/core";
+import { h, Component, State, Prop } from "@stencil/core";
 import { WatchService } from "../../services/watch-service";
 
 @Component({

src/components/stop-watch-box/stop-watch-box.tsx

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

src/components/stop-watch/stop-watch.tsx

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
+
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
   <title>Stencil Component Starter</title>
-  <script src="/build/stopwatchbox.js"></script>
+  <script type="module" src="/build/stopwatchbox.esm.js"></script>
+  <script nomodule src="/build/stopwatchbox.js"></script>
   <!-- <script src="https://unpkg.com/[email protected]/dist/stopwatchbox.js"></script> -->
 
   <style>
@@ -15,13 +17,15 @@
   </style>
 
 </head>
+
 <body>
 
   <h2>Without hover effect</h2>
-  <stop-watch-box ></stop-watch-box>
+  <stop-watch-box></stop-watch-box>
 
   <h2>With hover effect</h2>
   <stop-watch-box apply-hover="true"></stop-watch-box>
 
 </body>
+
 </html>

src/index.html

@@ -4,7 +4,7 @@ export const config: Config = {
   namespace: 'stopwatchbox',
   outputTargets: [
     { type: 'dist' },
-    { type: 'docs' },
+    { type: 'docs-readme' },
     {
       type: 'www',
       serviceWorker: null // disable service workers

stencil.config.ts

@@ -1,2 +1,15 @@
-<!DOCTYPE html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <script data-resources-url="/build/stopwatchbox/">!function(t,e,r,o,s,n,c,i,a,u,p,l,h,d){for(p=t.stopwatchbox=t.stopwatchbox||{},(l=e.createElement("style")).innerHTML=a+"{visibility:hidden}.hydrated{visibility:inherit}",l.setAttribute("data-styles",""),h=e.head.querySelector("meta[charset]"),e.head.insertBefore(l,h?h.nextSibling:e.head.firstChild),function(t,e,r){(t["s-apps"]=t["s-apps"]||[]).push("stopwatchbox"),r.componentOnReady||(r.componentOnReady=function(){var e=this;function r(r){if(e.nodeName.indexOf("-")>0){for(var o=t["s-apps"],s=0,n=0;n<o.length;n++)if(t[o[n]].componentOnReady){if(t[o[n]].componentOnReady(e,r))return;s++}if(s<o.length)return void(t["s-cr"]=t["s-cr"]||[]).push([e,r])}r(null)}return t.Promise?new t.Promise(r):{then:r}})}(t,0,u),s=s||p.resourcesUrl,l=(h=e.querySelectorAll("script")).length-1;l>=0&&!(d=h[l]).src&&!d.hasAttribute("data-resources-url");l--);h=d.getAttribute("data-resources-url"),!s&&h&&(s=h),!s&&d.src&&(s=(h=d.src.split("/").slice(0,-1)).join("/")+(h.length?"/":"")+"stopwatchbox/"),l=e.createElement("script"),function(t,e,r,o){return!(e.search.indexOf("core=esm")>0)&&(!(!(e.search.indexOf("core=es5")>0||"file:"===e.protocol)&&t.customElements&&t.customElements.define&&t.fetch&&t.CSS&&t.CSS.supports&&t.CSS.supports("color","var(--c)")&&"noModule"in r)||function(t){try{return new Function('import("")'),!1}catch(t){}return!0}())}(t,t.location,l)?l.src=s+"stopwatchbox.rxfoamy4.js":(l.src=s+"stopwatchbox.kz4ywcaa.js",l.setAttribute("type","module"),l.setAttribute("crossorigin",!0)),l.setAttribute("data-resources-url",s),l.setAttribute("data-namespace","stopwatchbox"),e.head.appendChild(l)}(window,document,0,0,0,0,0,0,"stop-watch,stop-watch-box",HTMLElement.prototype);</script> <!-- <script src="https://unpkg.com/[email protected]/dist/stopwatchbox.js"></script> --> <style>h2{text-align:center;margin:0}</style> </head>
-<body> <h2>Without hover effect</h2> <stop-watch-box></stop-watch-box> <h2>With hover effect</h2> <stop-watch-box apply-hover="true"></stop-watch-box> </body></html>
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <script type="module" src="/build/stopwatchbox.esm.js"></script> <script nomodule="" src="/build/stopwatchbox.js"></script> <!-- <script src="https://unpkg.com/[email protected]/dist/stopwatchbox.js"></script> --> <style>
+    h2 {
+      text-align: center;
+      margin: 0;
+    }
+  </style> </head> <body> <h2>Without hover effect</h2> <stop-watch-box></stop-watch-box> <h2>With hover effect</h2> <stop-watch-box apply-hover="true"></stop-watch-box> <script>
+if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+    if (registration) {
+      registration.unregister().then(function() { location.reload(true) });
+    }
+  });
+}
+</script></body></html>