Merge pull request #13 from alexlafroscia/upgrade-deps

Upgrade deps

.travis.yml

@@ -1,7 +1,7 @@
 ---
 language: node_js
 node_js:
-  - 6
+  - 10
 
 sudo: false
 dist: trusty

README.md

@@ -1,18 +1,16 @@
-ember-cli-stencil
-================================================================================
+# ember-cli-stencil
 
 [![Build Status](https://travis-ci.org/alexlafroscia/ember-cli-stencil.svg?branch=master)](https://travis-ci.org/alexlafroscia/ember-cli-stencil)
 [![NPM Version](https://badgen.net/npm/v/ember-cli-stencil)](https://www.npmjs.com/package/ember-cli-stencil)
-[![Stencil Compatibility](https://badgen.net/badge/stencil/^0.12.4?label=%40stencil%2Fcore)](https://stenciljs.com)
+[![Stencil Compatibility](https://badgen.net/badge/stencil/^1.0.7?label=%40stencil%2Fcore)](https://stenciljs.com)
 
 > Automatic discovery of [Stencil.js][stencil] components for your Ember application
 
 Stencil provides a great, opinionated process for defining Web Components (custom elements) using TypeScript and JSX. The problem is that Ember has to be told about what these custom elements are and what events they can emit for you to integrate the two libraries together.
 
 Because of the conventions of Stencil and the Ember CLI respectively, we can wrap up all of that boilerplate so that your custom elements "just work".
 
-Installation
---------------------------------------------------------------------------------
+## Installation
 
 Start by installing your Stencil components as `npm` modules, as described in the [distribution instructions][distribution] instructions in the guide. Then, install this addon:
 
@@ -22,14 +20,17 @@ ember install ember-cli-stencil
 
 That's it! Your Stencil components will automatically be detected by the addon and pulled into your application.
 
-Features
---------------------------------------------------------------------------------
+## Usage
 
-- [Generating Ember component wrappers](https://github.com/alexlafroscia/ember-cli-stencil/wiki/Ember-component-wrappers)
-- [Custom Events support](https://github.com/alexlafroscia/ember-cli-stencil/wiki/Custom-Events)
+Since Stencil components are detected automatically, you can just start using any Stencil components discovered in your dependencies without any further configuration required. Props can be passed to them, just like other elements, and events listened to through the [`{{on}}` modifier][on-modifier].
 
-Debugging
---------------------------------------------------------------------------------
+```hbs
+<my-custom-component props={{value}} {{on 'someEvent' this.handleEvent}}>
+  Rendering into the slot
+</my-custom-component>
+```
+
+## Debugging
 
 If the build seems slow, or you think there are packages missing, you can log some debugging information like so:
 
@@ -39,12 +40,13 @@ DEBUG=ember-cli-stencil:* ember serve
 
 This will report:
 
-* Which packages were discovered to be Stencil collections
-* Which files were imported into your `vendor.js` file
-* Which files were added to the `public` folder of the build
+- Which packages were discovered to be Stencil collections
+- Which files were imported into your `vendor.js` file
+- Which files were added to the `public` folder of the build
 
 If there are any issues around judging a file to be a Stencil collection incorrectly or importing the wrong files, please [file an issue][issues].
 
 [stencil]: https://stenciljs.com/
 [distribution]: https://stenciljs.com/docs/distribution
 [issues]: https://github.com/alexlafroscia/ember-cli-stencil/issues
+[on-modifier]: https://github.com/buschtoens/ember-on-modifier#readme

packages/demo-components/.gitignore

@@ -1,5 +1,6 @@
 dist/
 www/
+loader/
 
 *~
 *.sw[mnpcod]
@@ -11,6 +12,7 @@ log.txt
 *.sublime-project
 *.sublime-workspace
 
+.stencil/
 .idea/
 .vscode/
 .sass-cache/

packages/demo-components/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Ionic
+Copyright (c) 2018
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

packages/demo-components/package.json

@@ -1,34 +1,24 @@
 {
   "name": "demo-components",
-  "version": "0.4.0",
+  "version": "0.0.1",
   "description": "Stencil Component Starter",
   "main": "dist/index.js",
-  "module": "dist/esm/index.js",
+  "module": "dist/index.mjs",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
-  "private": true,
+  "collection:main": "dist/collection/index.js",
+  "unpkg": "dist/demo-components/demo-components.js",
   "files": [
-    "dist/"
+    "dist/",
+    "loader/"
   ],
   "scripts": {
-    "build": "stencil build",
-    "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ",
-    "serve": "stencil-dev-server",
-    "start": "npm run dev"
+    "build": "stencil build"
   },
   "devDependencies": {
-    "@stencil/core": "^0.12.4",
-    "@stencil/dev-server": "latest",
-    "@stencil/utils": "latest"
+    "@stencil/core": "^1.0.7"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ionic-team/stencil-component-starter.git"
-  },
-  "author": "Ionic Team",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ionic-team/stencil"
-  },
-  "homepage": "https://github.com/ionic-team/stencil"
+  "license": "MIT"
 }

packages/demo-components/src/components.d.ts

@@ -1,50 +1,25 @@
-/**
-* 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';
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
 
 
+import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
 
 
 export namespace Components {
-
   interface DemoEventEmitter {}
-  interface DemoEventEmitterAttributes extends StencilHTMLAttributes {
-    'onDemoEvent'?: (event: CustomEvent) => void;
-  }
-
   interface DemoPassingProps {
     'action': Function;
     'text': string;
   }
-  interface DemoPassingPropsAttributes extends StencilHTMLAttributes {
-    'action'?: Function;
-    'text'?: string;
-  }
-
   interface DemoRichProps {
     'list': Array<string>;
   }
-  interface DemoRichPropsAttributes extends StencilHTMLAttributes {
-    'list'?: Array<string>;
-  }
 }
 
 declare global {
-  interface StencilElementInterfaces {
-    'DemoEventEmitter': Components.DemoEventEmitter;
-    'DemoPassingProps': Components.DemoPassingProps;
-    'DemoRichProps': Components.DemoRichProps;
-  }
-
-  interface StencilIntrinsicElements {
-    'demo-event-emitter': Components.DemoEventEmitterAttributes;
-    'demo-passing-props': Components.DemoPassingPropsAttributes;
-    'demo-rich-props': Components.DemoRichPropsAttributes;
-  }
 
 
   interface HTMLDemoEventEmitterElement extends Components.DemoEventEmitter, HTMLStencilElement {}
@@ -64,26 +39,39 @@ declare global {
     prototype: HTMLDemoRichPropsElement;
     new (): HTMLDemoRichPropsElement;
   };
-
   interface HTMLElementTagNameMap {
-    'demo-event-emitter': HTMLDemoEventEmitterElement
-    'demo-passing-props': HTMLDemoPassingPropsElement
-    'demo-rich-props': HTMLDemoRichPropsElement
-  }
-
-  interface ElementTagNameMap {
     'demo-event-emitter': HTMLDemoEventEmitterElement;
     'demo-passing-props': HTMLDemoPassingPropsElement;
     'demo-rich-props': HTMLDemoRichPropsElement;
   }
+}
+
+declare namespace LocalJSX {
+  interface DemoEventEmitter extends JSXBase.HTMLAttributes<HTMLDemoEventEmitterElement> {
+    'onDemoEvent'?: (event: CustomEvent<any>) => void;
+  }
+  interface DemoPassingProps extends JSXBase.HTMLAttributes<HTMLDemoPassingPropsElement> {
+    'action'?: Function;
+    'text'?: string;
+  }
+  interface DemoRichProps extends JSXBase.HTMLAttributes<HTMLDemoRichPropsElement> {
+    'list'?: Array<string>;
+  }
+
+  interface IntrinsicElements {
+    'demo-event-emitter': DemoEventEmitter;
+    'demo-passing-props': DemoPassingProps;
+    'demo-rich-props': DemoRichProps;
+  }
+}
 
+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 {}
-
 }
+
+

packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx

@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter } from "@stencil/core";
+import { Component, Event, EventEmitter, h } from "@stencil/core";
 
 @Component({
   tag: "demo-event-emitter",

packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx

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

packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop } from "@stencil/core";
+import { Component, Prop, h } from "@stencil/core";
 
 @Component({
   tag: "demo-rich-props",
@@ -8,6 +8,12 @@ export class DemoRichProps {
   @Prop() list: Array<string> = [];
 
   render() {
-    return <ul>{this.list.map(item => <li>{item}</li>)}</ul>;
+    return (
+      <ul>
+        {this.list.map(item => (
+          <li>{item}</li>
+        ))}
+      </ul>
+    );
   }
 }

packages/demo-components/src/index.html

@@ -4,18 +4,14 @@
   <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/demo.js"></script>
+
+  <script type="module" src="/build/demo-components.esm.js"></script>
+  <script nomodule src="/build/demo-components.js"></script>
 
 </head>
 <body>
-  <demo-event-emitter>
-    Click me!
-  </demo-event-emitter>
 
-  <script>
-    document.querySelector('demo-event-emitter').addEventListener('demoEvent', () => {
-      alert('Demo Event was received!');
-    });
-  </script>
+  <my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>
+
 </body>
 </html>

packages/demo-components/stencil.config.ts

@@ -0,0 +1,11 @@
+import { Config } from "@stencil/core";
+
+export const config: Config = {
+  namespace: "demo-components",
+  outputTargets: [
+    {
+      type: "dist",
+      esmLoaderPath: "../loader"
+    }
+  ]
+};

packages/demo-components/tsconfig.json

@@ -4,23 +4,15 @@
     "allowUnreachableCode": false,
     "declaration": false,
     "experimentalDecorators": true,
-    "lib": [
-      "dom",
-      "es2015"
-    ],
+    "lib": ["dom", "es2017"],
     "moduleResolution": "node",
-    "module": "es2015",
-    "target": "es2015",
+    "module": "esnext",
+    "target": "es2017",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "jsx": "react",
     "jsxFactory": "h"
   },
-  "include": [
-    "src",
-    "types/jsx.d.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src", "types/jsx.d.ts"],
+  "exclude": ["node_modules"]
 }