first commit

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",

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 (<div>{m.title} {m.createdOn}  {m.finished}</div>)
+        }) : null
+    }
+
+    render() {
+        return (
+            <div class="section">
+                <my-header></my-header>
+                <my-routes></my-routes>
+                <div class="level">
+                    <div class="level-item">
+                        <button class="button" onClick={() => store.add(this.title)}>ADD</button>
+                        <input class="input" placeholder="enter the title" onChange={(e:any) => {
+                            this.title = e.target.value
+                            console.log(e.target.value)
+                        }} />
+                    </div>
+                    <h4  class="level-item">Unfinished: {store.unfinishedTodoCount}</h4>
+                </div>
+                {this.renderTodos()}
+            </div >
+        )
+    }
+}

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 (
+      <p>
+        My Address is {this.street} {this.city}  {this.state}
+      </p>
+    );
+  }
+}

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;
+}

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 (
+            [<h3>Router & Props Test w/Stencil </h3>,
+            <stencil-route-link
+                url="/"
+                router="#router">
+                Show Name
+            </stencil-route-link>,
+            <stencil-route-link
+                url="/address"
+                router="#router">
+                Show Address
+            </stencil-route-link>
+            ])
+    }
+}

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 (
       <p>
         Hello, my name is {this.first} {this.last}
       </p>
     );
   }
-}
+}

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 (
+            <stencil-router id="router">
+                <stencil-route url="/" component="my-name"
+                    router="#router"
+                    componentProps={{ first: "Aaron", last: "Saunders" }}
+                    exact={true}
+                />
+                <stencil-route url="/address"
+                    component="my-address" router="#router"
+                    componentProps={{ 'city': "Washington", 'state': "DC" }}
+                    exact={true} />
+            </stencil-router>)
+    }
+}