diff --git a/.travis.yml b/.travis.yml
index 12a66f4..a66ef3e 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,7 @@
---
language: node_js
node_js:
- - 6
+ - 10
sudo: false
dist: trusty
diff --git a/README.md b/README.md
index 3143cbe..12c5528 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,8 @@
-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
@@ -11,8 +10,7 @@ Stencil provides a great, opinionated process for defining Web Components (custo
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
+
+ Rendering into the slot
+
+```
+
+## 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
diff --git a/packages/demo-components/.gitignore b/packages/demo-components/.gitignore
index ebf6667..c3ea58a 100644
--- a/packages/demo-components/.gitignore
+++ b/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/
diff --git a/packages/demo-components/CHANGELOG.md b/packages/demo-components/CHANGELOG.md
deleted file mode 100644
index 9dc1316..0000000
--- a/packages/demo-components/CHANGELOG.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-
-# [0.3.0](https://github.com/ionic-team/stencil-component-starter/compare/v0.2.0...v0.3.0) (2018-05-11)
-
-
-
-
-**Note:** Version bump only for package demo-components
-
-
-# [0.2.0](https://github.com/ionic-team/stencil-component-starter/compare/v0.1.2...v0.2.0) (2018-04-27)
-
-
-
-
-**Note:** Version bump only for package demo-components
diff --git a/packages/demo-components/LICENSE b/packages/demo-components/LICENSE
index cdedba3..b442934 100644
--- a/packages/demo-components/LICENSE
+++ b/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
diff --git a/packages/demo-components/package.json b/packages/demo-components/package.json
index 4728ad7..62a8cc6 100644
--- a/packages/demo-components/package.json
+++ b/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"
}
diff --git a/packages/demo-components/src/components.d.ts b/packages/demo-components/src/components.d.ts
index 385df4d..7afff90 100644
--- a/packages/demo-components/src/components.d.ts
+++ b/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;
}
- interface DemoRichPropsAttributes extends StencilHTMLAttributes {
- 'list'?: Array;
- }
}
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 {
+ 'onDemoEvent'?: (event: CustomEvent) => void;
+ }
+ interface DemoPassingProps extends JSXBase.HTMLAttributes {
+ 'action'?: Function;
+ 'text'?: string;
+ }
+ interface DemoRichProps extends JSXBase.HTMLAttributes {
+ 'list'?: Array;
+ }
+
+ 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 {}
-
}
+
+
diff --git a/packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx b/packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx
index d8dcf35..ffd325a 100644
--- a/packages/demo-components/src/components/demo-event-emitter/demo-event-emitter.tsx
+++ b/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",
diff --git a/packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx b/packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx
index 3b5df69..9582235 100644
--- a/packages/demo-components/src/components/demo-passing-props/demo-passing-props.tsx
+++ b/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",
diff --git a/packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx b/packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx
index 35fa5cb..27d3357 100644
--- a/packages/demo-components/src/components/demo-rich-props/demo-rich-props.tsx
+++ b/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 = [];
render() {
- return {this.list.map(item => - {item}
)}
;
+ return (
+
+ {this.list.map(item => (
+ - {item}
+ ))}
+
+ );
}
}
diff --git a/packages/demo-components/src/index.html b/packages/demo-components/src/index.html
index aed4076..e6d6168 100644
--- a/packages/demo-components/src/index.html
+++ b/packages/demo-components/src/index.html
@@ -4,18 +4,14 @@
Stencil Component Starter
-
+
+
+
-
- Click me!
-
-
+
+