diff --git a/package-lock.json b/package-lock.json index 1abada5..36e919c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,27 +5,37 @@ "requires": true, "dependencies": { "@stencil/core": { - "version": "0.0.5-0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.5-0.tgz", - "integrity": "sha512-/5EBhg//ipquXadL0G2im5ff7ByS185jvTE5PQyoTHilwwD4PowRE7R+1Z06EeLbFmc5VWgMWNSmC5HZm9Ls7A==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.4.tgz", + "integrity": "sha512-jWmEM5RfIt7IaKvPoEVDq9ny1sbyfuLCzIxn+fFVnslsfXeM3bvbTv0cRQY/UxnungSRkh8s5sRf/nw3QnKcEQ==", "requires": { - "chalk": "2.1.0", + "chalk": "1.1.3", "chokidar": "1.7.0", "clean-css": "4.1.7", "jsdom": "11.1.0", "node-fetch": "1.7.2", "node-sass": "4.5.3", - "rollup": "0.47.2", + "rollup": "0.41.4", "rollup-plugin-commonjs": "8.1.0", "rollup-plugin-node-resolve": "3.0.0", "typescript": "2.5.0-dev.20170808", "uglify-es": "3.0.27" + }, + "dependencies": { + "rollup": { + "version": "0.41.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.41.4.tgz", + "integrity": "sha1-qXBYAXYyn56thoVNf9TEbedSrvg=", + "requires": { + "source-map-support": "0.4.16" + } + } } }, "@stencil/dev-server": { - "version": "0.0.15", - "resolved": "https://registry.npmjs.org/@stencil/dev-server/-/dev-server-0.0.15.tgz", - "integrity": "sha512-DhMGXclSsNDXuxwEXqzvIvPpHZQQuEZ0aY7bWrAGYbpk1nl+JCPH43wmeybArH7Nw90Hv3dp+YKuobtMMCTjYg==", + "version": "0.0.16", + "resolved": "https://registry.npmjs.org/@stencil/dev-server/-/dev-server-0.0.16.tgz", + "integrity": "sha512-Moeafche095DJKXD5ztLowvz0wOjj1udwoWNK4iYP8th8pSVj5q8gD6pP5hgXcshqKwF++Qdsh0Vy5DEm5MUyw==", "dev": true, "requires": { "chokidar": "1.7.0", @@ -34,6 +44,14 @@ "tiny-lr": "1.0.5" } }, + "@stencil/router": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@stencil/router/-/router-0.0.6.tgz", + "integrity": "sha1-Q/WtVc+gsC7hq6jF/Tx9TELfyYs=", + "requires": { + "@stencil/core": "0.0.4" + } + }, "@stencil/utils": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/@stencil/utils/-/utils-0.0.4.tgz", @@ -88,12 +106,9 @@ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz", - "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==", - "requires": { - "color-convert": "1.9.0" - } + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "anymatch": { "version": "1.3.2", @@ -293,13 +308,15 @@ "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, "chalk": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz", - "integrity": "sha512-LUHGS/dge4ujbXMJrnihYMcL4AoOweGnw9Tp3kQuqy1Kx5c1qKjqvMJZ6nVJPMWJtKCTN72ZogH3oeSO9g9rXQ==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", "requires": { - "ansi-styles": "3.2.0", + "ansi-styles": "2.2.1", "escape-string-regexp": "1.0.5", - "supports-color": "4.2.1" + "has-ansi": "2.0.0", + "strip-ansi": "3.0.1", + "supports-color": "2.0.0" } }, "chokidar": { @@ -346,19 +363,6 @@ "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, - "color-convert": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.0.tgz", - "integrity": "sha1-Gsz5fdc5uYO/mU1W/sj5WFNkG3o=", - "requires": { - "color-name": "1.1.3" - } - }, - "color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, "combined-stream": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz", @@ -1593,11 +1597,6 @@ "ansi-regex": "2.1.1" } }, - "has-flag": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz", - "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE=" - }, "has-unicode": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", @@ -2088,6 +2087,11 @@ } } }, + "mobx": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.2.2.tgz", + "integrity": "sha1-qmcUWb7e39mIDJSIiaP2K84JJ5w=" + }, "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", @@ -2634,11 +2638,6 @@ "glob": "7.1.2" } }, - "rollup": { - "version": "0.47.2", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.47.2.tgz", - "integrity": "sha512-UDu5SnCHDp3kT/dTuGoIHMqpH6Y0X5ZK9RIAYgWt2WIckC6KJZ0+rvOWsUMYM3JBANithJpqA4LzqVPejiPgqA==" - }, "rollup-plugin-commonjs": { "version": "8.1.0", "resolved": "https://registry.npmjs.org/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.1.0.tgz", @@ -2750,6 +2749,14 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=" }, + "source-map-support": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.16.tgz", + "integrity": "sha512-A6vlydY7H/ljr4L2UOhDSajQdZQ6dMD7cLH0pzwcmwLyc9u8PNI4WGtnfDDzX7uzGL6c/T+ORL97Zlh+S4iOrg==", + "requires": { + "source-map": "0.5.6" + } + }, "spdx-correct": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz", @@ -2857,12 +2864,9 @@ } }, "supports-color": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.2.1.tgz", - "integrity": "sha512-qxzYsob3yv6U+xMzPrv170y8AwGP7i74g+pbixCfD6rgso8BscLT2qXIuz6TpOaiJZ3mFgT5O9lyT9nMU4LfaA==", - "requires": { - "has-flag": "2.0.0" - } + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, "symbol-tree": { "version": "3.2.2", diff --git a/package.json b/package.json index 1967805..b5c038d 100644 --- a/package.json +++ b/package.json @@ -13,8 +13,9 @@ "start": "npm run dev" }, "dependencies": { - "@stencil/core": "next", - "@stencil/router": "0.0.4" + "@stencil/core": "latest", + "@stencil/router": "0.0.6", + "mobx": "^3.2.2" }, "devDependencies": { "@stencil/dev-server": "latest", diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx new file mode 100644 index 0000000..7a5f62a --- /dev/null +++ b/src/components/app/app.tsx @@ -0,0 +1,49 @@ +import { Component, State } from '@stencil/core'; +import store from '../store'; +import { autorun } from 'mobx'; + + +@Component({ + tag: 'my-app', + //styleUrl: 'my-name.scss' +}) +export class App { + + @State() todos: any + @State() title: string + + constructor() { + + autorun(() => { + // console.log(store) + console.log(store.unfinishedTodoCount) + this.todos = store.todos.slice() + }) + } + + renderTodos = () => { + return this.todos ? this.todos.map((m) => { + return (
{m.title} {m.createdOn} {m.finished}
) + }) : null + } + + render() { + return ( +
+ + +
+
+ + { + this.title = e.target.value + console.log(e.target.value) + }} /> +
+

Unfinished: {store.unfinishedTodoCount}

+
+ {this.renderTodos()} +
+ ) + } +} diff --git a/src/components/my-address/my-address.tsx b/src/components/my-address/my-address.tsx new file mode 100644 index 0000000..3313629 --- /dev/null +++ b/src/components/my-address/my-address.tsx @@ -0,0 +1,20 @@ +import { Component, Prop } from '@stencil/core'; + +@Component({ + tag: 'my-address', + //styleUrl: 'my-name.scss' +}) +export class MyAddress { + + @Prop() street: string; + @Prop() city: string; + @Prop() state: string; + + render() { + return ( +

+ My Address is {this.street} {this.city} {this.state} +

+ ); + } +} \ No newline at end of file diff --git a/src/components/my-header.scss b/src/components/my-header.scss new file mode 100644 index 0000000..6069251 --- /dev/null +++ b/src/components/my-header.scss @@ -0,0 +1,20 @@ + +my-name { + font-family: Courier New, Courier, monospace; + font-weight: bold; +} + +stencil-route-link a { + margin-left: 10px; + padding: 5px 10px; + text-decoration: none; + margin-top: 10px; + display: inline-block; + background-color: #eee; + border-radius: 4px; +} + + +stencil-route-link.link-active { + font-weight: bold; +} diff --git a/src/components/my-header.tsx b/src/components/my-header.tsx new file mode 100644 index 0000000..071db24 --- /dev/null +++ b/src/components/my-header.tsx @@ -0,0 +1,24 @@ +import { Component } from '@stencil/core'; + +@Component({ + tag: 'my-header', + styleUrl: 'my-header.scss' +}) +export class HeaderComponent { + + render() { + return ( + [

Router & Props Test w/Stencil

, + + Show Name + , + + Show Address + + ]) + } +} \ No newline at end of file diff --git a/src/components/my-name/my-name.tsx b/src/components/my-name/my-name.tsx index ef30a5c..1398ee0 100644 --- a/src/components/my-name/my-name.tsx +++ b/src/components/my-name/my-name.tsx @@ -8,14 +8,14 @@ import { Component, Prop } from '@stencil/core'; export class MyName { @Prop() first: string; - @Prop() last: string; render() { + console.log(this.first) return (

Hello, my name is {this.first} {this.last}

); } -} \ No newline at end of file +} diff --git a/src/components/my-routes.tsx b/src/components/my-routes.tsx new file mode 100644 index 0000000..17f429b --- /dev/null +++ b/src/components/my-routes.tsx @@ -0,0 +1,24 @@ + +import { Component } from '@stencil/core'; + +@Component({ + tag: 'my-routes', + //styleUrl: 'my-name.scss' +}) +export class MyRoutes { + + render() { + return ( + + + + ) + } +} \ No newline at end of file diff --git a/src/components/store.ts b/src/components/store.ts new file mode 100644 index 0000000..7d43124 --- /dev/null +++ b/src/components/store.ts @@ -0,0 +1,45 @@ +import {action} from 'mobx/lib/mobx'; +import { extendObservable } from 'mobx'; + +class TodoList { + + [x: string]: any; + + constructor() { + extendObservable(this, { + todos: [], + add: action(function add (_value) { + this.todos.push( new Todo(_value)) + }), + get unfinishedTodoCount () { + return this.todos.slice().filter(todo => !todo.finished).length + }, + removeTodo : action(function removeTodo(_todo:any) { + this.todos = this.todos.slice().filter(p => p.id !== _todo.id); + }) + }) + } +} + + +class Todo { + id: any + createdOn: any + completedOn : any + constructor(_title) { + extendObservable(this, { + title: _title, + finished: false, + toggleState: action(function toggleState() { + this.finished = !this.finished + this.completedOn = this.finished ? new Date().getTime() : undefined + }) + }) + + this.id = Math.random() + this.createdOn = new Date().getTime() + + } +} + +export default new TodoList() \ No newline at end of file diff --git a/src/index.html b/src/index.html index 4b2156e..01d4a8f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,19 @@ + Stencil Starter App - - - + + + - + + + + - + + \ No newline at end of file diff --git a/stencil.config.js b/stencil.config.js index c758241..16fbfd8 100644 --- a/stencil.config.js +++ b/stencil.config.js @@ -1,6 +1,7 @@ exports.config = { + publicPath: '/build', bundles: [ - { components: ['my-name'] } + { components: ['my-app', 'my-header','my-routes','my-name', 'my-address'] } ], collections: [ { name: '@stencil/router' }