From fbf1f0b24b635756d10e7cb337bd27becbbefd16 Mon Sep 17 00:00:00 2001 From: Brandon seydel Date: Wed, 19 Apr 2023 14:22:44 -0500 Subject: [PATCH] Add aurelia 2 (#164) * add aurelia 2 * remove template from au2 --- .../1-declare-state/aurelia2/name.html | 1 + .../1-declare-state/aurelia2/name.ts | 3 + .../2-update-state/aurelia2/name.html | 1 + .../2-update-state/aurelia2/name.ts | 7 ++ .../aurelia2/double-count.html | 1 + .../3-computed-state/aurelia2/double-count.ts | 4 + .../aurelia2/hello-world.html | 1 + .../2-styling/aurelia2/css-style.css | 3 + .../2-styling/aurelia2/css-style.html | 2 + .../2-templating/3-loop/aurelia2/colors.html | 3 + .../2-templating/3-loop/aurelia2/colors.ts | 3 + .../4-event-click/aurelia2/counter.html | 2 + .../4-event-click/aurelia2/counter.ts | 7 ++ .../5-dom-ref/aurelia2/input-focused.html | 1 + .../5-dom-ref/aurelia2/input-focused.ts | 7 ++ .../6-conditional/aurelia2/traffic-light.html | 8 ++ .../6-conditional/aurelia2/traffic-light.ts | 16 ++++ .../1-on-mount/aurelia2/page-title.html | 1 + .../1-on-mount/aurelia2/page-title.ts | 7 ++ .../2-on-unmount/aurelia2/time.html | 1 + .../3-lifecycle/2-on-unmount/aurelia2/time.ts | 14 +++ .../1-props/aurelia2/app.html | 6 ++ .../1-props/aurelia2/app.ts | 9 ++ .../1-props/aurelia2/user-profile.html | 4 + .../1-props/aurelia2/user-profile.ts | 8 ++ .../aurelia2/answer-button.html | 2 + .../aurelia2/answer-button.ts | 5 + .../2-emit-to-parent/aurelia2/app.html | 3 + .../2-emit-to-parent/aurelia2/app.ts | 7 ++ .../3-slot/aurelia2/app.html | 1 + .../3-slot/aurelia2/funny-button.html | 19 ++++ .../4-slot-fallback/aurelia2/app.html | 2 + .../aurelia2/funny-button.html | 19 ++++ .../5-context/aurelia2/app.html | 2 + .../5-context/aurelia2/app.ts | 5 + .../5-context/aurelia2/user-profile.html | 8 ++ .../5-context/aurelia2/user-profile.ts | 9 ++ .../1-input-text/aurelia2/input-hello.html | 2 + .../1-input-text/aurelia2/input-hello.ts | 3 + .../2-checkbox/aurelia2/is-available.html | 2 + .../2-checkbox/aurelia2/is-available.ts | 3 + .../3-radio/aurelia2/pick-pill.html | 7 ++ .../3-radio/aurelia2/pick-pill.ts | 3 + .../4-select/aurelia2/color-select.html | 10 ++ .../4-select/aurelia2/color-select.ts | 11 +++ .../1-render-app/aurelia2/app.html | 1 + .../1-render-app/aurelia2/app.ts | 1 + .../1-render-app/aurelia2/index.html | 10 ++ .../1-render-app/aurelia2/main.ts | 4 + .../2-fetch-data/aurelia2/UseFetchUsers.ts | 19 ++++ .../2-fetch-data/aurelia2/app.html | 10 ++ .../2-fetch-data/aurelia2/app.ts | 6 ++ .../3-router-link/aurelia2/router-link.md | 12 +++ .../4-routing/aurelia2/app.ts | 8 ++ frameworks.mjs | 25 +++++ package.json | 2 + pnpm-lock.yaml | 96 ++++++++++++++++++- 57 files changed, 433 insertions(+), 4 deletions(-) create mode 100644 content/1-reactivity/1-declare-state/aurelia2/name.html create mode 100644 content/1-reactivity/1-declare-state/aurelia2/name.ts create mode 100644 content/1-reactivity/2-update-state/aurelia2/name.html create mode 100644 content/1-reactivity/2-update-state/aurelia2/name.ts create mode 100644 content/1-reactivity/3-computed-state/aurelia2/double-count.html create mode 100644 content/1-reactivity/3-computed-state/aurelia2/double-count.ts create mode 100644 content/2-templating/1-minimal-template/aurelia2/hello-world.html create mode 100644 content/2-templating/2-styling/aurelia2/css-style.css create mode 100644 content/2-templating/2-styling/aurelia2/css-style.html create mode 100644 content/2-templating/3-loop/aurelia2/colors.html create mode 100644 content/2-templating/3-loop/aurelia2/colors.ts create mode 100644 content/2-templating/4-event-click/aurelia2/counter.html create mode 100644 content/2-templating/4-event-click/aurelia2/counter.ts create mode 100644 content/2-templating/5-dom-ref/aurelia2/input-focused.html create mode 100644 content/2-templating/5-dom-ref/aurelia2/input-focused.ts create mode 100644 content/2-templating/6-conditional/aurelia2/traffic-light.html create mode 100644 content/2-templating/6-conditional/aurelia2/traffic-light.ts create mode 100644 content/3-lifecycle/1-on-mount/aurelia2/page-title.html create mode 100644 content/3-lifecycle/1-on-mount/aurelia2/page-title.ts create mode 100644 content/3-lifecycle/2-on-unmount/aurelia2/time.html create mode 100644 content/3-lifecycle/2-on-unmount/aurelia2/time.ts create mode 100644 content/4-component-composition/1-props/aurelia2/app.html create mode 100644 content/4-component-composition/1-props/aurelia2/app.ts create mode 100644 content/4-component-composition/1-props/aurelia2/user-profile.html create mode 100644 content/4-component-composition/1-props/aurelia2/user-profile.ts create mode 100644 content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.html create mode 100644 content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.ts create mode 100644 content/4-component-composition/2-emit-to-parent/aurelia2/app.html create mode 100644 content/4-component-composition/2-emit-to-parent/aurelia2/app.ts create mode 100644 content/4-component-composition/3-slot/aurelia2/app.html create mode 100644 content/4-component-composition/3-slot/aurelia2/funny-button.html create mode 100644 content/4-component-composition/4-slot-fallback/aurelia2/app.html create mode 100644 content/4-component-composition/4-slot-fallback/aurelia2/funny-button.html create mode 100644 content/4-component-composition/5-context/aurelia2/app.html create mode 100644 content/4-component-composition/5-context/aurelia2/app.ts create mode 100644 content/4-component-composition/5-context/aurelia2/user-profile.html create mode 100644 content/4-component-composition/5-context/aurelia2/user-profile.ts create mode 100644 content/6-form-input/1-input-text/aurelia2/input-hello.html create mode 100644 content/6-form-input/1-input-text/aurelia2/input-hello.ts create mode 100644 content/6-form-input/2-checkbox/aurelia2/is-available.html create mode 100644 content/6-form-input/2-checkbox/aurelia2/is-available.ts create mode 100644 content/6-form-input/3-radio/aurelia2/pick-pill.html create mode 100644 content/6-form-input/3-radio/aurelia2/pick-pill.ts create mode 100644 content/6-form-input/4-select/aurelia2/color-select.html create mode 100644 content/6-form-input/4-select/aurelia2/color-select.ts create mode 100644 content/7-webapp-features/1-render-app/aurelia2/app.html create mode 100644 content/7-webapp-features/1-render-app/aurelia2/app.ts create mode 100644 content/7-webapp-features/1-render-app/aurelia2/index.html create mode 100644 content/7-webapp-features/1-render-app/aurelia2/main.ts create mode 100644 content/7-webapp-features/2-fetch-data/aurelia2/UseFetchUsers.ts create mode 100644 content/7-webapp-features/2-fetch-data/aurelia2/app.html create mode 100644 content/7-webapp-features/2-fetch-data/aurelia2/app.ts create mode 100644 content/7-webapp-features/3-router-link/aurelia2/router-link.md create mode 100644 content/7-webapp-features/4-routing/aurelia2/app.ts diff --git a/content/1-reactivity/1-declare-state/aurelia2/name.html b/content/1-reactivity/1-declare-state/aurelia2/name.html new file mode 100644 index 00000000..4c1f91c7 --- /dev/null +++ b/content/1-reactivity/1-declare-state/aurelia2/name.html @@ -0,0 +1 @@ +

Hello ${name}

diff --git a/content/1-reactivity/1-declare-state/aurelia2/name.ts b/content/1-reactivity/1-declare-state/aurelia2/name.ts new file mode 100644 index 00000000..d77edfb0 --- /dev/null +++ b/content/1-reactivity/1-declare-state/aurelia2/name.ts @@ -0,0 +1,3 @@ +export class Name { + name = "John"; +} diff --git a/content/1-reactivity/2-update-state/aurelia2/name.html b/content/1-reactivity/2-update-state/aurelia2/name.html new file mode 100644 index 00000000..4c1f91c7 --- /dev/null +++ b/content/1-reactivity/2-update-state/aurelia2/name.html @@ -0,0 +1 @@ +

Hello ${name}

diff --git a/content/1-reactivity/2-update-state/aurelia2/name.ts b/content/1-reactivity/2-update-state/aurelia2/name.ts new file mode 100644 index 00000000..c428a1d8 --- /dev/null +++ b/content/1-reactivity/2-update-state/aurelia2/name.ts @@ -0,0 +1,7 @@ +export class Name { + name = "John"; + + constructor() { + this.name = "Jane"; + } +} diff --git a/content/1-reactivity/3-computed-state/aurelia2/double-count.html b/content/1-reactivity/3-computed-state/aurelia2/double-count.html new file mode 100644 index 00000000..0869299b --- /dev/null +++ b/content/1-reactivity/3-computed-state/aurelia2/double-count.html @@ -0,0 +1 @@ +
${doubleCount}
diff --git a/content/1-reactivity/3-computed-state/aurelia2/double-count.ts b/content/1-reactivity/3-computed-state/aurelia2/double-count.ts new file mode 100644 index 00000000..f3ce4e6e --- /dev/null +++ b/content/1-reactivity/3-computed-state/aurelia2/double-count.ts @@ -0,0 +1,4 @@ +export class DoubleCount { + count: number = 10; + doubleCount = this.count * 2; +} diff --git a/content/2-templating/1-minimal-template/aurelia2/hello-world.html b/content/2-templating/1-minimal-template/aurelia2/hello-world.html new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/2-templating/1-minimal-template/aurelia2/hello-world.html @@ -0,0 +1 @@ +

Hello world

diff --git a/content/2-templating/2-styling/aurelia2/css-style.css b/content/2-templating/2-styling/aurelia2/css-style.css new file mode 100644 index 00000000..a85d2573 --- /dev/null +++ b/content/2-templating/2-styling/aurelia2/css-style.css @@ -0,0 +1,3 @@ +.title { + color: red; +} diff --git a/content/2-templating/2-styling/aurelia2/css-style.html b/content/2-templating/2-styling/aurelia2/css-style.html new file mode 100644 index 00000000..613ac86d --- /dev/null +++ b/content/2-templating/2-styling/aurelia2/css-style.html @@ -0,0 +1,2 @@ +

I am red

+ diff --git a/content/2-templating/3-loop/aurelia2/colors.html b/content/2-templating/3-loop/aurelia2/colors.html new file mode 100644 index 00000000..070cfc6f --- /dev/null +++ b/content/2-templating/3-loop/aurelia2/colors.html @@ -0,0 +1,3 @@ + diff --git a/content/2-templating/3-loop/aurelia2/colors.ts b/content/2-templating/3-loop/aurelia2/colors.ts new file mode 100644 index 00000000..116d1886 --- /dev/null +++ b/content/2-templating/3-loop/aurelia2/colors.ts @@ -0,0 +1,3 @@ +export class Colors { + colors = ["red", "green", "blue"]; +} diff --git a/content/2-templating/4-event-click/aurelia2/counter.html b/content/2-templating/4-event-click/aurelia2/counter.html new file mode 100644 index 00000000..857d1e5f --- /dev/null +++ b/content/2-templating/4-event-click/aurelia2/counter.html @@ -0,0 +1,2 @@ +

Counter: ${count}

+ diff --git a/content/2-templating/4-event-click/aurelia2/counter.ts b/content/2-templating/4-event-click/aurelia2/counter.ts new file mode 100644 index 00000000..ae4a07ef --- /dev/null +++ b/content/2-templating/4-event-click/aurelia2/counter.ts @@ -0,0 +1,7 @@ +export class Counter { + count: number = 0; + + incrementCount() { + this.count++; + } +} diff --git a/content/2-templating/5-dom-ref/aurelia2/input-focused.html b/content/2-templating/5-dom-ref/aurelia2/input-focused.html new file mode 100644 index 00000000..c6571c56 --- /dev/null +++ b/content/2-templating/5-dom-ref/aurelia2/input-focused.html @@ -0,0 +1 @@ + diff --git a/content/2-templating/5-dom-ref/aurelia2/input-focused.ts b/content/2-templating/5-dom-ref/aurelia2/input-focused.ts new file mode 100644 index 00000000..49589ac9 --- /dev/null +++ b/content/2-templating/5-dom-ref/aurelia2/input-focused.ts @@ -0,0 +1,7 @@ +export class InputFocused { + inputElement: HTMLInputElement; + + attached() { + this.inputElement.focus(); + } +} diff --git a/content/2-templating/6-conditional/aurelia2/traffic-light.html b/content/2-templating/6-conditional/aurelia2/traffic-light.html new file mode 100644 index 00000000..de416665 --- /dev/null +++ b/content/2-templating/6-conditional/aurelia2/traffic-light.html @@ -0,0 +1,8 @@ + +

Light is: ${light}

+

+ You must + STOP + SLOW DOWN + GO +

diff --git a/content/2-templating/6-conditional/aurelia2/traffic-light.ts b/content/2-templating/6-conditional/aurelia2/traffic-light.ts new file mode 100644 index 00000000..f0cf8257 --- /dev/null +++ b/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++; + } + } +} diff --git a/content/3-lifecycle/1-on-mount/aurelia2/page-title.html b/content/3-lifecycle/1-on-mount/aurelia2/page-title.html new file mode 100644 index 00000000..7cdd348e --- /dev/null +++ b/content/3-lifecycle/1-on-mount/aurelia2/page-title.html @@ -0,0 +1 @@ +

Page title is: ${pageTitle}

diff --git a/content/3-lifecycle/1-on-mount/aurelia2/page-title.ts b/content/3-lifecycle/1-on-mount/aurelia2/page-title.ts new file mode 100644 index 00000000..85f2cb1e --- /dev/null +++ b/content/3-lifecycle/1-on-mount/aurelia2/page-title.ts @@ -0,0 +1,7 @@ +export class PageTitle { + pageTitle = ""; + + attached(): void { + this.pageTitle = document.title; + } +} diff --git a/content/3-lifecycle/2-on-unmount/aurelia2/time.html b/content/3-lifecycle/2-on-unmount/aurelia2/time.html new file mode 100644 index 00000000..ee1204ec --- /dev/null +++ b/content/3-lifecycle/2-on-unmount/aurelia2/time.html @@ -0,0 +1 @@ +

Current time: ${time}

diff --git a/content/3-lifecycle/2-on-unmount/aurelia2/time.ts b/content/3-lifecycle/2-on-unmount/aurelia2/time.ts new file mode 100644 index 00000000..aed478fe --- /dev/null +++ b/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); + } +} diff --git a/content/4-component-composition/1-props/aurelia2/app.html b/content/4-component-composition/1-props/aurelia2/app.html new file mode 100644 index 00000000..1851ce11 --- /dev/null +++ b/content/4-component-composition/1-props/aurelia2/app.html @@ -0,0 +1,6 @@ + diff --git a/content/4-component-composition/1-props/aurelia2/app.ts b/content/4-component-composition/1-props/aurelia2/app.ts new file mode 100644 index 00000000..3ed96c46 --- /dev/null +++ b/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; +} diff --git a/content/4-component-composition/1-props/aurelia2/user-profile.html b/content/4-component-composition/1-props/aurelia2/user-profile.html new file mode 100644 index 00000000..1b5dff07 --- /dev/null +++ b/content/4-component-composition/1-props/aurelia2/user-profile.html @@ -0,0 +1,4 @@ +

My name is ${name}

+

My age is ${age}

+

My favourite colors are ${favouriteColors.join(", ")}

+

I am ${isAvailable ? "available" : "not available"}

diff --git a/content/4-component-composition/1-props/aurelia2/user-profile.ts b/content/4-component-composition/1-props/aurelia2/user-profile.ts new file mode 100644 index 00000000..223d1728 --- /dev/null +++ b/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; +} diff --git a/content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.html b/content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.html new file mode 100644 index 00000000..cd2ad067 --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.html @@ -0,0 +1,2 @@ + + diff --git a/content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.ts b/content/4-component-composition/2-emit-to-parent/aurelia2/answer-button.ts new file mode 100644 index 00000000..da98a393 --- /dev/null +++ b/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; +} diff --git a/content/4-component-composition/2-emit-to-parent/aurelia2/app.html b/content/4-component-composition/2-emit-to-parent/aurelia2/app.html new file mode 100644 index 00000000..750745e2 --- /dev/null +++ b/content/4-component-composition/2-emit-to-parent/aurelia2/app.html @@ -0,0 +1,3 @@ +

Can I come ?

+ +

${canCome ? "😀" : "😥"}

diff --git a/content/4-component-composition/2-emit-to-parent/aurelia2/app.ts b/content/4-component-composition/2-emit-to-parent/aurelia2/app.ts new file mode 100644 index 00000000..2e1ed7d3 --- /dev/null +++ b/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; + }; +} diff --git a/content/4-component-composition/3-slot/aurelia2/app.html b/content/4-component-composition/3-slot/aurelia2/app.html new file mode 100644 index 00000000..4b67437e --- /dev/null +++ b/content/4-component-composition/3-slot/aurelia2/app.html @@ -0,0 +1 @@ +Click me ! diff --git a/content/4-component-composition/3-slot/aurelia2/funny-button.html b/content/4-component-composition/3-slot/aurelia2/funny-button.html new file mode 100644 index 00000000..d1e55f89 --- /dev/null +++ b/content/4-component-composition/3-slot/aurelia2/funny-button.html @@ -0,0 +1,19 @@ + + + + diff --git a/content/4-component-composition/4-slot-fallback/aurelia2/app.html b/content/4-component-composition/4-slot-fallback/aurelia2/app.html new file mode 100644 index 00000000..5eebe210 --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/aurelia2/app.html @@ -0,0 +1,2 @@ + +Click me ! diff --git a/content/4-component-composition/4-slot-fallback/aurelia2/funny-button.html b/content/4-component-composition/4-slot-fallback/aurelia2/funny-button.html new file mode 100644 index 00000000..f1ea49f3 --- /dev/null +++ b/content/4-component-composition/4-slot-fallback/aurelia2/funny-button.html @@ -0,0 +1,19 @@ + + + + diff --git a/content/4-component-composition/5-context/aurelia2/app.html b/content/4-component-composition/5-context/aurelia2/app.html new file mode 100644 index 00000000..b004f5f0 --- /dev/null +++ b/content/4-component-composition/5-context/aurelia2/app.html @@ -0,0 +1,2 @@ +

Welcome back, {{ user.username }}

+ diff --git a/content/4-component-composition/5-context/aurelia2/app.ts b/content/4-component-composition/5-context/aurelia2/app.ts new file mode 100644 index 00000000..7a646558 --- /dev/null +++ b/content/4-component-composition/5-context/aurelia2/app.ts @@ -0,0 +1,5 @@ +import { user } from "./user-profile"; + +export class App { + user = user; +} diff --git a/content/4-component-composition/5-context/aurelia2/user-profile.html b/content/4-component-composition/5-context/aurelia2/user-profile.html new file mode 100644 index 00000000..550a6f94 --- /dev/null +++ b/content/4-component-composition/5-context/aurelia2/user-profile.html @@ -0,0 +1,8 @@ +
+

My Profile

+

Username: ${ user.username }

+

Email: ${ user.email }

+ +
diff --git a/content/4-component-composition/5-context/aurelia2/user-profile.ts b/content/4-component-composition/5-context/aurelia2/user-profile.ts new file mode 100644 index 00000000..28a87dda --- /dev/null +++ b/content/4-component-composition/5-context/aurelia2/user-profile.ts @@ -0,0 +1,9 @@ +export const user = { + id: 1, + username: "unicorn42", + email: "unicorn42@example.com", +}; + +export class UserProfile { + user = user; +} diff --git a/content/6-form-input/1-input-text/aurelia2/input-hello.html b/content/6-form-input/1-input-text/aurelia2/input-hello.html new file mode 100644 index 00000000..a90a7c01 --- /dev/null +++ b/content/6-form-input/1-input-text/aurelia2/input-hello.html @@ -0,0 +1,2 @@ +

${text}

+ diff --git a/content/6-form-input/1-input-text/aurelia2/input-hello.ts b/content/6-form-input/1-input-text/aurelia2/input-hello.ts new file mode 100644 index 00000000..6bf41cc7 --- /dev/null +++ b/content/6-form-input/1-input-text/aurelia2/input-hello.ts @@ -0,0 +1,3 @@ +export class InputHello { + value: string = "Hello World"; +} diff --git a/content/6-form-input/2-checkbox/aurelia2/is-available.html b/content/6-form-input/2-checkbox/aurelia2/is-available.html new file mode 100644 index 00000000..4aaea6db --- /dev/null +++ b/content/6-form-input/2-checkbox/aurelia2/is-available.html @@ -0,0 +1,2 @@ + +: ${isAvailable} diff --git a/content/6-form-input/2-checkbox/aurelia2/is-available.ts b/content/6-form-input/2-checkbox/aurelia2/is-available.ts new file mode 100644 index 00000000..cafe1057 --- /dev/null +++ b/content/6-form-input/2-checkbox/aurelia2/is-available.ts @@ -0,0 +1,3 @@ +export class IsAvailable { + isAvailable = false; +} diff --git a/content/6-form-input/3-radio/aurelia2/pick-pill.html b/content/6-form-input/3-radio/aurelia2/pick-pill.html new file mode 100644 index 00000000..80416a11 --- /dev/null +++ b/content/6-form-input/3-radio/aurelia2/pick-pill.html @@ -0,0 +1,7 @@ +
Picked: ${picked}
+ + + + + + diff --git a/content/6-form-input/3-radio/aurelia2/pick-pill.ts b/content/6-form-input/3-radio/aurelia2/pick-pill.ts new file mode 100644 index 00000000..26bd4b4b --- /dev/null +++ b/content/6-form-input/3-radio/aurelia2/pick-pill.ts @@ -0,0 +1,3 @@ +export class PickPill { + picked = "red"; +} diff --git a/content/6-form-input/4-select/aurelia2/color-select.html b/content/6-form-input/4-select/aurelia2/color-select.html new file mode 100644 index 00000000..a9125366 --- /dev/null +++ b/content/6-form-input/4-select/aurelia2/color-select.html @@ -0,0 +1,10 @@ + diff --git a/content/6-form-input/4-select/aurelia2/color-select.ts b/content/6-form-input/4-select/aurelia2/color-select.ts new file mode 100644 index 00000000..d27c62a6 --- /dev/null +++ b/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; +} diff --git a/content/7-webapp-features/1-render-app/aurelia2/app.html b/content/7-webapp-features/1-render-app/aurelia2/app.html new file mode 100644 index 00000000..159202e8 --- /dev/null +++ b/content/7-webapp-features/1-render-app/aurelia2/app.html @@ -0,0 +1 @@ +

Hello world

diff --git a/content/7-webapp-features/1-render-app/aurelia2/app.ts b/content/7-webapp-features/1-render-app/aurelia2/app.ts new file mode 100644 index 00000000..6603de43 --- /dev/null +++ b/content/7-webapp-features/1-render-app/aurelia2/app.ts @@ -0,0 +1 @@ +export class App {} diff --git a/content/7-webapp-features/1-render-app/aurelia2/index.html b/content/7-webapp-features/1-render-app/aurelia2/index.html new file mode 100644 index 00000000..42da3ae3 --- /dev/null +++ b/content/7-webapp-features/1-render-app/aurelia2/index.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/content/7-webapp-features/1-render-app/aurelia2/main.ts b/content/7-webapp-features/1-render-app/aurelia2/main.ts new file mode 100644 index 00000000..3b40db3f --- /dev/null +++ b/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(); diff --git a/content/7-webapp-features/2-fetch-data/aurelia2/UseFetchUsers.ts b/content/7-webapp-features/2-fetch-data/aurelia2/UseFetchUsers.ts new file mode 100644 index 00000000..56f19b89 --- /dev/null +++ b/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; + } +} diff --git a/content/7-webapp-features/2-fetch-data/aurelia2/app.html b/content/7-webapp-features/2-fetch-data/aurelia2/app.html new file mode 100644 index 00000000..17db7ca9 --- /dev/null +++ b/content/7-webapp-features/2-fetch-data/aurelia2/app.html @@ -0,0 +1,10 @@ + diff --git a/content/7-webapp-features/2-fetch-data/aurelia2/app.ts b/content/7-webapp-features/2-fetch-data/aurelia2/app.ts new file mode 100644 index 00000000..580d9f19 --- /dev/null +++ b/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) {} +} diff --git a/content/7-webapp-features/3-router-link/aurelia2/router-link.md b/content/7-webapp-features/3-router-link/aurelia2/router-link.md new file mode 100644 index 00000000..3de69ed2 --- /dev/null +++ b/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 + +``` diff --git a/content/7-webapp-features/4-routing/aurelia2/app.ts b/content/7-webapp-features/4-routing/aurelia2/app.ts new file mode 100644 index 00000000..39bae3c4 --- /dev/null +++ b/content/7-webapp-features/4-routing/aurelia2/app.ts @@ -0,0 +1,8 @@ +export class App { + static routes = [ + { + path: ["", "home"], + }, + ]; + static template = ""; +} diff --git a/frameworks.mjs b/frameworks.mjs index 6a0d775b..1a54e183 100644 --- a/frameworks.mjs +++ b/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"]); + }, + }, ]; diff --git a/package.json b/package.json index b3e81057..7427bdce 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,8 @@ "@typescript-eslint/eslint-plugin": "^5.48.0", "@typescript-eslint/parser": "^5.48.0", "aurelia-framework": "^1.4.1", + "aurelia": "latest", + "@aurelia/router": "latest", "autoprefixer": "^10.4.13", "chokidar": "^3.5.3", "codesandbox": "^2.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f2a9ea4d..41d7eb4d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,7 @@ specifiers: '@angular-eslint/eslint-plugin': ^15.1.0 '@angular-eslint/eslint-plugin-template': ^15.1.0 '@angular-eslint/template-parser': ^15.1.0 + '@aurelia/router': latest '@babel/core': ^7.20.12 '@babel/eslint-parser': ^7.19.1 '@babel/plugin-proposal-decorators': ^7.20.7 @@ -14,6 +15,7 @@ specifiers: '@typescript-eslint/eslint-plugin': ^5.48.0 '@typescript-eslint/parser': ^5.48.0 '@veljs/svelte': ^0.1.11 + aurelia: latest aurelia-framework: ^1.4.1 autoprefixer: ^10.4.13 chokidar: ^3.5.3 @@ -65,6 +67,7 @@ devDependencies: '@angular-eslint/eslint-plugin': 15.1.0_iukboom6ndih5an6iafl45j2fe '@angular-eslint/eslint-plugin-template': 15.1.0_iukboom6ndih5an6iafl45j2fe '@angular-eslint/template-parser': 15.1.0_iukboom6ndih5an6iafl45j2fe + '@aurelia/router': 2.0.0-beta.4 '@babel/core': 7.20.12 '@babel/eslint-parser': 7.19.1_ucmnolur3r335ullwiyt3zl3pi '@babel/plugin-proposal-decorators': 7.20.7_@babel+core@7.20.12 @@ -74,6 +77,7 @@ devDependencies: '@tailwindcss/typography': 0.5.8_tailwindcss@3.2.4 '@typescript-eslint/eslint-plugin': 5.48.0_k73wpmdolxikpyqun3p36akaaq '@typescript-eslint/parser': 5.48.0_iukboom6ndih5an6iafl45j2fe + aurelia: 2.0.0-beta.4 aurelia-framework: 1.4.1 autoprefixer: 10.4.13_postcss@8.4.21 chokidar: 3.5.3 @@ -186,6 +190,77 @@ packages: - supports-color dev: true + /@aurelia/fetch-client/2.0.0-beta.4: + resolution: {integrity: sha512-0YyGVXNSUquCeJjb1PxGm4ZNnd5YtuHyHm0DwULSidwuVL+WBBLOJ1X2hGOeRY1rvkZBO6GI3pK6qrLo5YNbsg==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/kernel': 2.0.0-beta.4 + '@aurelia/metadata': 2.0.0-beta.4 + dev: true + + /@aurelia/kernel/2.0.0-beta.4: + resolution: {integrity: sha512-1iFP43+3UyW+jyibaT7tmdx25nyn9yw/AC0n0ERWxbORX1pT9QmdUrdTwm5SivBTtvNbBif7MiP/TVvpzTUBkQ==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/metadata': 2.0.0-beta.4 + '@aurelia/platform': 2.0.0-beta.4 + dev: true + + /@aurelia/metadata/2.0.0-beta.4: + resolution: {integrity: sha512-PQHpK64bYAvcugn5f5j8QAOUszWwOdb/TWrWm05ATVzlwIZz7CZYXZPVsRHn6soS4KlMlcBhjDrOstIqGtsBxw==} + engines: {node: '>=14.17.0'} + dev: true + + /@aurelia/platform-browser/2.0.0-beta.4: + resolution: {integrity: sha512-jnwIpMy44MI6d6XrfBB04k+Di5KDTcU5kKkTu2sGIxPlUnKWQFmq1XeQ+y+ZuSkTM0JV9W1b6NMnBqlOJCS62g==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/platform': 2.0.0-beta.4 + dev: true + + /@aurelia/platform/2.0.0-beta.4: + resolution: {integrity: sha512-Y6sMgAMxefv9vXgyMGto16kZyuYnevmvTO0Uz7ceWROaGOKZ3UH6tEQHc3ImxDtlKow7nUZwZ+uuJ64IIGzq9A==} + engines: {node: '>=14.17.0'} + dev: true + + /@aurelia/route-recognizer/2.0.0-beta.4: + resolution: {integrity: sha512-jWOC0gjQRCyW/3qXiMkZPPExp1/uth/x8oxYBRwSs6hmHEJRau+a97GQDs05YMwVvKmigA8vutcdcGX3teTI9A==} + engines: {node: '>=14.17.0'} + dev: true + + /@aurelia/router/2.0.0-beta.4: + resolution: {integrity: sha512-EHRCEKmIi6jjRG9LotZVIhwtIBp9ZqYetWRAHdpPD/u+NWY64GcFLkkL7/nVFOPvYZ5vCnzTBbGiueb/iLMBzg==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/kernel': 2.0.0-beta.4 + '@aurelia/metadata': 2.0.0-beta.4 + '@aurelia/platform': 2.0.0-beta.4 + '@aurelia/platform-browser': 2.0.0-beta.4 + '@aurelia/route-recognizer': 2.0.0-beta.4 + '@aurelia/runtime': 2.0.0-beta.4 + '@aurelia/runtime-html': 2.0.0-beta.4 + dev: true + + /@aurelia/runtime-html/2.0.0-beta.4: + resolution: {integrity: sha512-JP+5cm/q+iwvcSwN84aCLqkvXmuEFNCvWuGPFYw1yf9upRviufxPzebAqpGKhqtTHDXhA7FG8S4x0C1HKczn4A==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/kernel': 2.0.0-beta.4 + '@aurelia/metadata': 2.0.0-beta.4 + '@aurelia/platform': 2.0.0-beta.4 + '@aurelia/platform-browser': 2.0.0-beta.4 + '@aurelia/runtime': 2.0.0-beta.4 + dev: true + + /@aurelia/runtime/2.0.0-beta.4: + resolution: {integrity: sha512-+qt/j9mhi8a73q/ItAinr3dUXqM/YzLa8jZRaT91SKaOQjbgL8o2TzgvDjvPvKZk2XAZaOIVt8vBT7YNAqcY0Q==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/kernel': 2.0.0-beta.4 + '@aurelia/metadata': 2.0.0-beta.4 + '@aurelia/platform': 2.0.0-beta.4 + dev: true + /@babel/code-frame/7.18.6: resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} engines: {node: '>=6.9.0'} @@ -1573,6 +1648,19 @@ packages: aurelia-task-queue: 1.3.3 dev: true + /aurelia/2.0.0-beta.4: + resolution: {integrity: sha512-GmBs1bDFEXAyKbqdjV3M6rg5mJLFEMSQEL2fuuoAKbPRV9gtU7qVRPMB+vkmwR6sXYgp/rbjKVW2oTdd8umMFA==} + engines: {node: '>=14.17.0'} + dependencies: + '@aurelia/fetch-client': 2.0.0-beta.4 + '@aurelia/kernel': 2.0.0-beta.4 + '@aurelia/metadata': 2.0.0-beta.4 + '@aurelia/platform': 2.0.0-beta.4 + '@aurelia/platform-browser': 2.0.0-beta.4 + '@aurelia/runtime': 2.0.0-beta.4 + '@aurelia/runtime-html': 2.0.0-beta.4 + dev: true + /autoprefixer/10.4.13_postcss@8.4.21: resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==} engines: {node: ^10 || ^12 || >=14} @@ -3677,7 +3765,7 @@ packages: /heroiconsvelte/0.1.5: resolution: {integrity: sha512-OX3QfrT3Vbf8ERh89IxCGcpcK0hU4HhLtkG2WVQKrejuHhJrkvWm0p16LMqtCbvlw3lcaXDMQtwpeDHlr50p1w==} dependencies: - heroicons: github.com/tailwindlabs/heroicons/1511059c0584aa0d2690cb89c01b183c4ae011d7 + heroicons: github.com/tailwindlabs/heroicons/af8933a0a08d7b0c6c71bbd42e821273648b9f81 dev: false /homedir-polyfill/1.0.3: @@ -7040,8 +7128,8 @@ packages: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} dev: true - github.com/tailwindlabs/heroicons/1511059c0584aa0d2690cb89c01b183c4ae011d7: - resolution: {tarball: https://codeload.github.com/tailwindlabs/heroicons/tar.gz/1511059c0584aa0d2690cb89c01b183c4ae011d7} + github.com/tailwindlabs/heroicons/af8933a0a08d7b0c6c71bbd42e821273648b9f81: + resolution: {tarball: https://codeload.github.com/tailwindlabs/heroicons/tar.gz/af8933a0a08d7b0c6c71bbd42e821273648b9f81} name: heroicons - version: 2.0.13 + version: 2.0.17 dev: false