Add aurelia 2 (#164)

* add aurelia 2

* remove template from au2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+<h1 class="title">I am red</h1>
+<button style="font-size: 10rem">I am a button</button>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { UserProfile } from "./user-profile";
+
+export class App {
+  static dependencies = [UserProfile]; // static dependecies way or registered globablly
+  age = 20;
+  name = "John";
+  colors = ["green", "blue", "red"];
+  available = false;
+}

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

@@ -0,0 +1,4 @@
+<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>

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

@@ -0,0 +1,8 @@
+import { bindable } from "aurelia";
+
+export class UserProfile {
+  @bindable name = "";
+  @bindable age = null;
+  @bindable favouriteColors = [];
+  @bindable isAvailable = true;
+}

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

@@ -0,0 +1,2 @@
+<button click.trigger="actionHandler(true)">YES</button>
+<button click.trigger="actionHandler()">NO</button>

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

@@ -0,0 +1,5 @@
+import { bindable } from "aurelia";
+
+export class AnswerButton {
+  @bindable actionHandler;
+}

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

@@ -0,0 +1,3 @@
+<p>Can I come ?</p>
+<answer-button action-handler.bind="handleAnswer"></answer-button>
+<p style="font-size: 50px">${canCome ? "😀" : "😥"}</p>

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

@@ -0,0 +1,7 @@
+export class App {
+  canCome = false;
+
+  handleAnswer = (answer = false) => {
+    this.canCome = answer;
+  };
+}

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

@@ -0,0 +1 @@
+<funny-button>Click me !</funny-button>

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

@@ -0,0 +1,19 @@
+<let
+  style="
+    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;
+    background: rgba(0, 0, 0, 0.4);
+  "
+>
+</let>
+
+<button style.bind="style">
+  <au-slot></au-slot>
+</button>

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

@@ -0,0 +1,2 @@
+<funny-button></funny-button>
+<funny-button>Click me !</funny-button>

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

@@ -0,0 +1,19 @@
+<let
+  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;
+  "
+>
+</let>
+
+<button style.bind="style">
+  <au-slot> No content </au-slot>
+</button>

content/4-component-composition/5-context/aurelia2/app.html

@@ -0,0 +1,2 @@
+<h1>Welcome back, {{ user.username }}</h1>
+<user-profile />

content/4-component-composition/5-context/aurelia2/app.ts

@@ -0,0 +1,5 @@
+import { user } from "./user-profile";
+
+export class App {
+  user = user;
+}

content/4-component-composition/5-context/aurelia2/user-profile.html

@@ -0,0 +1,8 @@
+<div>
+  <h2>My Profile</h2>
+  <p>Username: ${ user.username }</p>
+  <p>Email: ${ user.email }</p>
+  <button click.trigger="user.username = 'Jane'">
+    Update username to Jane
+  </button>
+</div>

content/4-component-composition/5-context/aurelia2/user-profile.ts

@@ -0,0 +1,9 @@
+export const user = {
+  id: 1,
+  username: "unicorn42",
+  email: "[email protected]",
+};
+
+export class UserProfile {
+  user = user;
+}

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

@@ -0,0 +1,2 @@
+<p>${text}</p>
+<input value.bind />

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+<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>

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

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

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

@@ -0,0 +1,10 @@
+<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>

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

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

content/7-webapp-features/1-render-app/aurelia2/app.html

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

content/7-webapp-features/1-render-app/aurelia2/app.ts

@@ -0,0 +1 @@
+export class App {}

content/7-webapp-features/1-render-app/aurelia2/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="module" src="./main.ts"></script>
+  </head>
+
+  <body>
+    <app></app>
+  </body>
+</html>

content/7-webapp-features/1-render-app/aurelia2/main.ts

@@ -0,0 +1,4 @@
+import { Aurelia } from "aurelia";
+import { App } from "./app";
+
+Aurelia.app(App).start();

content/7-webapp-features/2-fetch-data/aurelia2/UseFetchUsers.ts

@@ -0,0 +1,19 @@
+export class UseFetchUsers {
+  data = null;
+  error = null;
+  isLoading = false;
+
+  async fetchData() {
+    this.isLoading = true;
+    try {
+      const response = await fetch("https://randomuser.me/api/?results=3");
+      const { results: users } = await response.json();
+      this.data = users;
+      this.error = null;
+    } catch (err) {
+      this.data = null;
+      this.error = err;
+    }
+    this.isLoading = false;
+  }
+}

content/7-webapp-features/2-fetch-data/aurelia2/app.html

@@ -0,0 +1,10 @@
+<template promise.bind="useFetchUsers.fetchData()">
+  <p pending>Fetching users...</p>
+  <p catch>An error ocurred while fetching users</p>
+  <ul then.from-view="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/2-fetch-data/aurelia2/app.ts

@@ -0,0 +1,6 @@
+import { UseFetchUsers } from "./UseFetchUsers";
+
+export class App {
+  // eslint-disable-next-line no-unused-vars
+  constructor(private useFetchUsers: UseFetchUsers) {}
+}

content/7-webapp-features/3-router-link/aurelia2/router-link.md

@@ -0,0 +1,12 @@
+See [Add routes and a viewport](https://docs.aurelia.io/routing/router-tutorial#add-routes-and-a-viewport)
+
+```html
+<ul>
+  <li>
+    <a load="/home">Home</a>
+  </li>
+  <li>
+    <a load="/about">About</a>
+  </li>
+</ul>
+```

content/7-webapp-features/4-routing/aurelia2/app.ts

@@ -0,0 +1,8 @@
+export class App {
+  static routes = [
+    {
+      path: ["", "home"],
+    },
+  ];
+  static template = "<au-viewport></au-viewport>";
+}

frameworks.mjs

@@ -264,4 +264,29 @@ export default [
       return sortAllFilenames(files, ["app.html", "app.ts"]);
     },
   },
+  {
+    id: "aurelia2",
+    title: "Aurelia 2",
+    img: "framework/aurelia.svg",
+    eslint: {
+      env: {
+        browser: true,
+        es2021: true,
+        node: true,
+      },
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      files: ["**/aurelia2/**"],
+      extends: ["eslint:recommended"],
+    },
+    playgroundURL: "https://stackblitz.com/edit/au2-conventions?file=src%2Fmy-app.html",
+    documentationURL: "http://docs.aurelia.io",
+    filesSorter(files) {
+      return sortAllFilenames(files, ["app.html", "app.ts"]);
+    },
+  },
 ];