feat: upgrade to stencil one

.travis.yml

@@ -5,9 +5,8 @@ cache:
 notifications:
   email: false
 node_js:
+  - '11'
   - '10'
-  - '9'
-  - '8'
 before_install:
   - npm install -g greenkeeper-lockfile
 install: npm install # npm ci won't work with greenkeeper pull

package.json

@@ -5,7 +5,10 @@
   "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "jsnext:main": "dist/esm/index.mjs",
   "files": [
     "dist/"
   ],
@@ -21,15 +24,15 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@stencil/core": "^0.11.3",
+    "@stencil/core": "^1.5.4",
     "@stencil/dev-server": "latest",
-    "@stencil/sass": "0.1.1",
-    "@stencil/utils": "latest",
-    "@types/jest": "^23.3.1",
-    "@types/node": "10.10.0",
-    "travis-deploy-once": "^5.0.2",
-    "semantic-release": "^15.9.6",
-    "jest": "^23.4.2"
+    "@stencil/sass": "^1.0.1",
+    "@stencil/utils": "0.0.5",
+    "@types/jest": "^24.0.18",
+    "@types/node": "^12.7.11",
+    "jest": "^24.9.0",
+    "semantic-release": "^15.13.24",
+    "travis-deploy-once": "^5.0.11"
   },
   "repository": {
     "type": "git",

src/components.d.ts

@@ -1,67 +1,53 @@
+/* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.
  * It contains typing information for all components that exist in this project.
  */
-/* tslint:disable */
 
-import '@stencil/core';
 
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
+export namespace Components {
+  interface ChuckNorrisJokes {
+    'firstname': string;
+    'lastname': string;
+  }
+}
 
 declare global {
-  interface HTMLElement {
-    componentOnReady?: () => Promise<this | null>;
-  }
 
-  interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this>;
 
-    forceUpdate(): void;
+  interface HTMLChuckNorrisJokesElement extends Components.ChuckNorrisJokes, HTMLStencilElement {}
+  var HTMLChuckNorrisJokesElement: {
+    prototype: HTMLChuckNorrisJokesElement;
+    new (): HTMLChuckNorrisJokesElement;
+  };
+  interface HTMLElementTagNameMap {
+    'chuck-norris-jokes': HTMLChuckNorrisJokesElement;
   }
+}
 
-  interface HTMLAttributes {}
-
-  namespace StencilComponents {
-
-    interface ChuckNorrisJokes {
-      'firstname': string;
-      'lastname': string;
-    }
+declare namespace LocalJSX {
+  interface ChuckNorrisJokes {
+    'firstname'?: string;
+    'lastname'?: string;
   }
 
-
-    interface HTMLChuckNorrisJokesElement extends StencilComponents.ChuckNorrisJokes, HTMLStencilElement {}
-
-    var HTMLChuckNorrisJokesElement: {
-      prototype: HTMLChuckNorrisJokesElement;
-      new (): HTMLChuckNorrisJokesElement;
-    };
-
-
-  namespace JSX {
-    interface Element {}
-    export interface IntrinsicElements {
-    'chuck-norris-jokes': JSXElements.ChuckNorrisJokesAttributes;
-    }
+  interface IntrinsicElements {
+    'chuck-norris-jokes': ChuckNorrisJokes;
   }
+}
 
-  namespace JSXElements {
-
-    export interface ChuckNorrisJokesAttributes extends HTMLAttributes {
-      'firstname'?: string;
-      'lastname'?: string;
-    }
-  }
+export { LocalJSX as JSX };
 
-  interface HTMLElementTagNameMap {
-    'chuck-norris-jokes': HTMLChuckNorrisJokesElement
-  }
 
-  interface ElementTagNameMap {
-    'chuck-norris-jokes': HTMLChuckNorrisJokesElement;
+declare module "@stencil/core" {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'chuck-norris-jokes': LocalJSX.ChuckNorrisJokes & JSXBase.HTMLAttributes<HTMLChuckNorrisJokesElement>;
+    }
   }
 }
-declare global { namespace JSX { interface StencilJSX {} } }
 
-export declare function defineCustomElements(window: any): void;
+

src/components/chuck-norris-jokes/chuck-norris-jokes.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, State } from '@stencil/core';
+import { Component, h, Prop, State } from '@stencil/core';
 
 interface Joke {
   id: string;

src/index.html

@@ -1,15 +1,13 @@
 <!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>Chuck Norris Jokes</title>
-  <script src="/build/chuck-norris-jokes.js"></script>
-
-</head>
-<body>
-
-  <chuck-norris-jokes firstname="" lastname=""></chuck-norris-jokes>
-
-</body>
+  <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>Chuck Norris Jokes</title>
+    <script type="module" src="/build/chuck-norris-jokes.esm.js"></script>
+    <script nomodule src="/build/chuck-norris-jokes.js"></script>
+  </head>
+  <body>
+    <chuck-norris-jokes firstname="" lastname=""></chuck-norris-jokes>
+  </body>
 </html>

src/index.ts

@@ -1 +1 @@
-export * from './components';
+export * from './components/chuck-norris-jokes/chuck-norris-jokes';