Feature: Add Aurelia v1 samples (complete)

README.md

@@ -361,6 +361,41 @@ How do we solve this? Developers love having framework overview by examples. It'
   - [x] Router link
   - [x] Routing
 
+</details><details>
+        <summary>
+            <img width="18" height="18" src="public/framework/aurelia.svg" />
+            <b>Aurelia 1</b>
+            <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" /></summary>
+
+- [x] Reactivity
+  - [x] Declare state
+  - [x] Update state
+  - [x] Computed state
+- [x] Templating
+  - [x] Minimal template
+  - [x] Styling
+  - [x] Loop
+  - [x] Event click
+  - [x] Dom ref
+  - [x] Conditional
+- [x] Lifecycle
+  - [x] On mount
+  - [x] On unmount
+- [x] Component composition
+  - [x] Props
+  - [x] Emit to parent
+  - [x] Slot
+  - [x] Slot fallback
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Fetch data
+  - [x] Router link
+  - [x] Routing
+
 </details>
 
 ## 🤝 Contributing

content/1-reactivity/1-declare-state/aurelia1/name.html

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello ${name}</h1>
+</template>

content/1-reactivity/1-declare-state/aurelia1/name.ts

@@ -0,0 +1,3 @@
+export class Name {
+  name = "John";
+}

content/1-reactivity/2-update-state/aurelia1/name.html

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello ${name}</h1>
+</template>

content/1-reactivity/2-update-state/aurelia1/name.ts

@@ -0,0 +1,7 @@
+export class Name {
+  name = "John";
+
+  constructor() {
+    this.name = "Jane";
+  }
+}

content/1-reactivity/3-computed-state/aurelia1/double-count.html

@@ -0,0 +1,3 @@
+<template>
+  <div>${doubleCount}</div>
+</template>

content/1-reactivity/3-computed-state/aurelia1/double-count.ts

@@ -0,0 +1,4 @@
+export class DoubleCount {
+  count: number = 10;
+  doubleCount = this.count * 2;
+}

content/2-templating/1-minimal-template/aurelia1/hello-world.html

@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello world</h1>
+</template>

content/2-templating/2-styling/aurelia1/css-style.css

@@ -0,0 +1,3 @@
+.title {
+  color: red;
+}

content/2-templating/2-styling/aurelia1/css-style.html

@@ -0,0 +1,6 @@
+<template>
+  <require from="./styling.css"></require>
+
+  <h1 class="title">I am red</h1>
+  <button style="font-size: 10rem">I am a button</button>
+</template>

content/2-templating/3-loop/aurelia1/colors.html

@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <li repeat.for="color of colors">${color}</li>
+  </ul>
+</template>

content/2-templating/3-loop/aurelia1/colors.ts

@@ -0,0 +1,3 @@
+export class Colors {
+  colors = ["red", "green", "blue"];
+}

content/2-templating/4-event-click/aurelia1/counter.html

@@ -0,0 +1,4 @@
+<template>
+  <p>Counter: ${count}</p>
+  <button click.trigger="incrementCount()">+1</button>
+</template>

content/2-templating/4-event-click/aurelia1/counter.ts

@@ -0,0 +1,7 @@
+export class Counter {
+  count: number = 0;
+
+  incrementCount() {
+    this.count++;
+  }
+}

content/2-templating/5-dom-ref/aurelia1/input-focused.html

@@ -0,0 +1,3 @@
+<template>
+  <input ref="inputElement" />
+</template>

content/2-templating/5-dom-ref/aurelia1/input-focused.ts

@@ -0,0 +1,7 @@
+export class InputFocused {
+  inputElement: HTMLInputElement;
+
+  attached() {
+    this.inputElement.focus();
+  }
+}

content/2-templating/6-conditional/aurelia1/traffic-light.html

@@ -0,0 +1,10 @@
+<template>
+  <button click.trigger="nextLight()">Next light</button>
+  <p>Light is: ${light}</p>
+  <p>
+    You must
+    <span if.bind="light === 'red'">STOP</span>
+    <span if.bind="light === 'orange'">SLOW DOWN</span>
+    <span if.bind="light === 'green'">GO</span>
+  </p>
+</template>

content/2-templating/6-conditional/aurelia1/traffic-light.ts

@@ -0,0 +1,15 @@
+export class App {
+  TRAFFIC_LIGHTS = ["red", "orange", "green"];
+  lightIndex = 0;
+  light: string = this.TRAFFIC_LIGHTS[this.lightIndex];
+
+  nextLight() {
+    if (this.lightIndex + 1 > this.TRAFFIC_LIGHTS.length - 1) {
+      this.lightIndex = 0;
+    } else {
+      this.lightIndex++;
+    }
+
+    this.light = this.TRAFFIC_LIGHTS[this.lightIndex];
+  }
+}

content/3-lifecycle/1-on-mount/aurelia1/page-title.html

@@ -0,0 +1,3 @@
+<template>
+  <p>Page title is: ${pageTitle}</p>
+</template>

content/3-lifecycle/1-on-mount/aurelia1/page-title.ts

@@ -0,0 +1,7 @@
+export class PageTitle {
+  pageTitle = "";
+
+  attached(): void {
+    this.pageTitle = document.title;
+  }
+}

content/3-lifecycle/2-on-unmount/aurelia1/time.html

@@ -0,0 +1,3 @@
+<template>
+  <p>Current time: ${time}</p>
+</template>

content/3-lifecycle/2-on-unmount/aurelia1/time.ts

@@ -0,0 +1,14 @@
+export class Time {
+  time: string = new Date().toLocaleTimeString();
+  timer: any;
+
+  constructor() {
+    this.timer = setInterval(() => {
+      this.time = new Date().toLocaleTimeString();
+    }, 1000);
+  }
+
+  detached() {
+    clearInterval(this.timer);
+  }
+}

content/4-component-composition/1-props/aurelia1/app.html

@@ -0,0 +1,9 @@
+<template>
+  <require from="./user-profile"></require>
+  <user-profile
+    name.bind="name"
+    age.bind="age"
+    favourite-colors.bind="colors"
+    is-available.bind="available"
+  ></user-profile>
+</template>

content/4-component-composition/1-props/aurelia1/app.ts

@@ -0,0 +1,6 @@
+export class App {
+  age = 20;
+  name = "John";
+  colors = ["green", "blue", "red"];
+  available = false;
+}

content/4-component-composition/1-props/aurelia1/user-profile.html

@@ -0,0 +1,6 @@
+<template>
+  <p>My name is ${name}</p>
+  <p>My age is ${age}</p>
+  <p>My favourite colors are ${favouriteColors.join(", ")}</p>
+  <p>I am ${isAvailable ? "available" : "not available"}</p>
+</template>

content/4-component-composition/1-props/aurelia1/user-profile.ts

@@ -0,0 +1,9 @@
+import { customElement, bindable } from "aurelia-templating";
+
+@customElement("user-profile")
+export class UserProfile {
+  @bindable name = "";
+  @bindable age = null;
+  @bindable favouriteColors = [];
+  @bindable isAvailable = true;
+}

content/4-component-composition/2-emit-to-parent/aurelia1/answer-button.html

@@ -0,0 +1,4 @@
+<template>
+  <button click.trigger="clickYes()">YES</button>
+  <button click.trigger="clickNo()">NO</button>
+</template>

content/4-component-composition/2-emit-to-parent/aurelia1/answer-button.ts

@@ -0,0 +1,14 @@
+import { customElement, bindable } from "aurelia-templating";
+
+@customElement("answer-button")
+export class AnswerButton {
+  @bindable actionHandler;
+
+  clickYes() {
+    this.actionHandler({ reply: "yes" });
+  }
+
+  clickNo() {
+    this.actionHandler({ reply: "no" });
+  }
+}

content/4-component-composition/2-emit-to-parent/aurelia1/app.html

@@ -0,0 +1,6 @@
+<template>
+  <require from="./answer-button"></require>
+  <p>Can I come ?</p>
+  <answer-button action-handler.call="handleAnswer(reply)"></answer-button>
+  <p style="font-size: 50px">${canCome ? "😀" : "😥"}</p>
+</template>

content/4-component-composition/2-emit-to-parent/aurelia1/app.ts

@@ -0,0 +1,7 @@
+export class App {
+  canCome = false;
+
+  handleAnswer(...reply) {
+    this.canCome = reply[0] === "yes" ? true : false;
+  }
+}

content/4-component-composition/3-slot/aurelia1/app.html

@@ -0,0 +1,5 @@
+<template>
+  <require from="./funny-button"></require>
+
+  <funny-button>Click me !</funny-button>
+</template>

content/4-component-composition/3-slot/aurelia1/funny-button.html

@@ -0,0 +1,18 @@
+<template>
+  <button
+    style="
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      padding: 10px 20px;
+      font-size: 30px;
+      border: 2px solid #fff;
+      margin: 8px;
+      transform: scale(0.9);
+      box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+      transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+      outline: 0;
+    "
+  >
+    <slot></slot>
+  </button>
+</template>

content/4-component-composition/4-slot-fallback/aurelia1/app.html

@@ -0,0 +1,6 @@
+<template>
+  <require from="./funny-button"></require>
+
+  <funny-button></funny-button>
+  <funny-button>Click me !</funny-button>
+</template>

content/4-component-composition/4-slot-fallback/aurelia1/funny-button.html

@@ -0,0 +1,18 @@
+<template>
+  <button
+    style="
+      background: rgba(0, 0, 0, 0.4);
+      color: #fff;
+      padding: 10px 20px;
+      font-size: 30px;
+      border: 2px solid #fff;
+      margin: 8px;
+      transform: scale(0.9);
+      box-shadow: 4px 4px rgba(0, 0, 0, 0.4);
+      transition: transform 0.2s cubic-bezier(0.34, 1.65, 0.88, 0.925) 0s;
+      outline: 0;
+    "
+  >
+    <slot><span> No content </span></slot>
+  </button>
+</template>

content/6-form-input/1-input-text/aurelia1/input-hello.html

@@ -0,0 +1,4 @@
+<template>
+  <p>${text}</p>
+  <input value.bind="text" />
+</template>

content/6-form-input/1-input-text/aurelia1/input-hello.ts

@@ -0,0 +1,3 @@
+export class InputHello {
+  texts: string = "Hello World";
+}

content/6-form-input/2-checkbox/aurelia1/is-available.html

@@ -0,0 +1,4 @@
+<template>
+  <input id="is-available" type="checkbox" checked.bind="isAvailable" />
+  <label for="is-available">Is available</label>: ${isAvailable}
+</template>

content/6-form-input/2-checkbox/aurelia1/is-available.ts

@@ -0,0 +1,3 @@
+export class IsAvailable {
+  isAvailable = false;
+}

content/6-form-input/3-radio/aurelia1/pick-pill.html

@@ -0,0 +1,9 @@
+<template>
+  <div>Picked: ${picked}</div>
+
+  <input id="blue-pill" checked.bind="picked" type="radio" value="blue" />
+  <label for="blue-pill">Blue pill</label>
+
+  <input id="red-pill" checked.bind="picked" type="radio" value="red" />
+  <label for="red-pill">Red pill</label>
+</template>

content/6-form-input/3-radio/aurelia1/pick-pill.ts

@@ -0,0 +1,3 @@
+export class PickPill {
+  picked = "red";
+}

content/6-form-input/4-select/aurelia1/color-select.html

@@ -0,0 +1,12 @@
+<template>
+  <select value.bind="selectedColorId">
+    <option value="">Select A Color</option>
+    <option
+      repeat.for="color of colors"
+      value.bind="color.id"
+      disabled.bind="color.isDisabled"
+    >
+      ${color.text}
+    </option>
+  </select>
+</template>

content/6-form-input/4-select/aurelia1/color-select.ts

@@ -0,0 +1,10 @@
+export class Select {
+  selectedColorId = 2;
+
+  colors = [
+    { id: 1, text: "red" },
+    { id: 2, text: "blue" },
+    { id: 3, text: "green" },
+    { id: 4, text: "gray", isDisabled: true },
+  ];
+}

content/7-webapp-features/1-fetch-data/aurelia1/app.html

@@ -0,0 +1,10 @@
+<template>
+  <p if.bind="isLoading">Fetching users...</p>
+  <p if.bind="error">An error ocurred while fetching users</p>
+  <ul if.bind="users">
+    <li repeat.for="user of users">
+      <img src.bind="user.picture.thumbnail" alt="user" />
+      <p>${ user.name.first } ${ user.name.last }</p>
+    </li>
+  </ul>
+</template>

content/7-webapp-features/1-fetch-data/aurelia1/app.ts

@@ -0,0 +1,26 @@
+import { autoinject, computedFrom } from "aurelia-framework";
+import { UseFetchUsers } from "./use-fetch-users";
+
+@autoinject()
+export class App {
+  constructor(private useFetchUsers: UseFetchUsers) {}
+
+  attached() {
+    this.useFetchUsers.fetchData();
+  }
+
+  @computedFrom("useFetchUsers.data")
+  get data() {
+    return this.useFetchUsers.data;
+  }
+
+  @computedFrom("useFetchUsers.error")
+  get error() {
+    return this.useFetchUsers.error;
+  }
+
+  @computedFrom("useFetchUsers.isLoading")
+  get isLoading() {
+    return this.useFetchUsers.isLoading;
+  }
+}