From 9b27dd0802b281ca851f1c0bfaf6d494b7ee2cd5 Mon Sep 17 00:00:00 2001
From: driesdl <dries.delange@ocular.be>
Date: Mon, 13 Oct 2025 12:20:20 +0200
Subject: [PATCH 1/5] ember polaris - fetch data example

---
 .../2-fetch-data/emberPolaris/fetch-data.gjs  | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs

diff --git a/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs b/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
new file mode 100644
index 00000000..deb10892
--- /dev/null
+++ b/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
@@ -0,0 +1,52 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+class State {
+  @tracked isLoading = false;
+  @tracked error = null;
+  @tracked data = null;
+}
+
+function getUsers() {
+  let state = new State();
+  
+  async function fetchData() {
+    state.isLoading = true;
+    try {
+      let response = await fetch("https://randomuser.me/api/?results=3");
+      let { results: users } = await response.json();
+      state.data = users;
+      state.error = null;
+    } catch (err) {
+      state.data = null;
+      state.error = err;
+    }
+    state.isLoading = false;
+  }
+  
+  fetchData();
+  return state;
+}
+
+export default class App extends Component {
+  fetchUsers = () => getUsers();
+
+  <template>
+    {{#let (this.fetchUsers) as |request|}}
+      {{#if request.isLoading}}
+        <p>Fetching users...</p>
+      {{else if request.error}}
+        <p>An error occurred while fetching users</p>
+      {{else}}
+        <ul>
+          {{#each request.data as |user|}}
+            <li>
+              <img src={{user.picture.thumbnail}} alt="user" />
+              <p>{{user.name.first}} {{user.name.last}}</p>
+            </li>
+          {{/each}}
+        </ul>
+      {{/if}}
+    {{/let}}
+  </template>
+}
\ No newline at end of file

From 07db11b7d65f96da58aee37fc8bad328d0ee950d Mon Sep 17 00:00:00 2001
From: driesdl <dries.delange@ocular.be>
Date: Mon, 13 Oct 2025 14:22:08 +0200
Subject: [PATCH 2/5] PR feedback

---
 .../2-fetch-data/emberPolaris/fetch-data.gjs                 | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs b/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
index deb10892..da87ca28 100644
--- a/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
+++ b/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
@@ -7,11 +7,10 @@ class State {
   @tracked data = null;
 }
 
-function getUsers() {
+function fetchUsers() {
   let state = new State();
   
   async function fetchData() {
-    state.isLoading = true;
     try {
       let response = await fetch("https://randomuser.me/api/?results=3");
       let { results: users } = await response.json();
@@ -29,8 +28,6 @@ function getUsers() {
 }
 
 export default class App extends Component {
-  fetchUsers = () => getUsers();
-
   <template>
     {{#let (this.fetchUsers) as |request|}}
       {{#if request.isLoading}}

From b071f7e9e21dfc8d11cd7995c723a97c3141d5a6 Mon Sep 17 00:00:00 2001
From: driesdl <dries.delange@ocular.be>
Date: Mon, 13 Oct 2025 15:43:39 +0200
Subject: [PATCH 3/5] renamed gjs

---
 .../2-fetch-data/emberPolaris/{fetch-data.gjs => App.gjs}         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename content/7-webapp-features/2-fetch-data/emberPolaris/{fetch-data.gjs => App.gjs} (100%)

diff --git a/content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs b/content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs
similarity index 100%
rename from content/7-webapp-features/2-fetch-data/emberPolaris/fetch-data.gjs
rename to content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs

From a3a999a6a9498d82189226e8b2f4dc853603475c Mon Sep 17 00:00:00 2001
From: driesdl <dries.delange@ocular.be>
Date: Tue, 14 Oct 2025 09:49:18 +0200
Subject: [PATCH 4/5] ember polaris - render app

---
 content/7-webapp-features/1-render-app/emberPolaris/App.gjs | 3 +++
 .../7-webapp-features/1-render-app/emberPolaris/Index.js    | 6 ++++++
 .../7-webapp-features/1-render-app/emberPolaris/index.html  | 6 ++++++
 3 files changed, 15 insertions(+)
 create mode 100644 content/7-webapp-features/1-render-app/emberPolaris/App.gjs
 create mode 100644 content/7-webapp-features/1-render-app/emberPolaris/Index.js
 create mode 100644 content/7-webapp-features/1-render-app/emberPolaris/index.html

diff --git a/content/7-webapp-features/1-render-app/emberPolaris/App.gjs b/content/7-webapp-features/1-render-app/emberPolaris/App.gjs
new file mode 100644
index 00000000..e40fbc37
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/emberPolaris/App.gjs
@@ -0,0 +1,3 @@
+<template>
+  <h1>Hello world</h1>
+</template>
\ No newline at end of file
diff --git a/content/7-webapp-features/1-render-app/emberPolaris/Index.js b/content/7-webapp-features/1-render-app/emberPolaris/Index.js
new file mode 100644
index 00000000..1fd6a880
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/emberPolaris/Index.js
@@ -0,0 +1,6 @@
+import { renderComponent } from '@ember/renderer';
+import App from './App';
+
+renderComponent(App, {
+  element: document.body
+});
\ No newline at end of file
diff --git a/content/7-webapp-features/1-render-app/emberPolaris/index.html b/content/7-webapp-features/1-render-app/emberPolaris/index.html
new file mode 100644
index 00000000..97f7cfa3
--- /dev/null
+++ b/content/7-webapp-features/1-render-app/emberPolaris/index.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+  <body>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>

From f1bc3f1cdb4f44da9b4050e5fb8a706ac8ce92a5 Mon Sep 17 00:00:00 2001
From: driesdl <dries.delange@ocular.be>
Date: Tue, 14 Oct 2025 10:46:29 +0200
Subject: [PATCH 5/5] readme - updated order and framework progress

---
 README.md | 40 ++++++++++++++++++++--------------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index c89c6c40..76aa0a22 100644
--- a/README.md
+++ b/README.md
@@ -277,11 +277,11 @@ How do we solve this ? Developers love having framework overview by examples. It
   - [x] Fetch data
 
 </details>
-    
+
 <details>
   <summary>
-    <img width="18" height="18" src="public/framework/solid.svg" />
-    <b>Solid.js</b>
+    <img width="18" height="18" src="public/framework/ember.svg" />
+    <b>Ember Polaris</b>
     <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
 
@@ -318,8 +318,8 @@ How do we solve this ? Developers love having framework overview by examples. It
     
 <details>
   <summary>
-    <img width="18" height="18" src="public/framework/svelte.svg" />
-    <b>Svelte 4</b>
+    <img width="18" height="18" src="public/framework/solid.svg" />
+    <b>Solid.js</b>
     <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
 
@@ -356,8 +356,8 @@ How do we solve this ? Developers love having framework overview by examples. It
     
 <details>
   <summary>
-    <img width="18" height="18" src="public/framework/vue.svg" />
-    <b>Vue 2</b>
+    <img width="18" height="18" src="public/framework/svelte.svg" />
+    <b>Svelte 4</b>
     <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
 
@@ -394,9 +394,9 @@ How do we solve this ? Developers love having framework overview by examples. It
     
 <details>
   <summary>
-    <img width="18" height="18" src="public/framework/alpine.svg" />
-    <b>Alpine</b>
-    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
+    <img width="18" height="18" src="public/framework/vue.svg" />
+    <b>Vue 2</b>
+    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />
   </summary>
 
 - [x] Reactivity
@@ -413,12 +413,12 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [ ] Component composition
+- [x] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [ ] Context
+  - [x] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
@@ -432,9 +432,9 @@ How do we solve this ? Developers love having framework overview by examples. It
     
 <details>
   <summary>
-    <img width="18" height="18" src="public/framework/ember.svg" />
-    <b>Ember Polaris</b>
-    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/91" />
+    <img width="18" height="18" src="public/framework/alpine.svg" />
+    <b>Alpine</b>
+    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
   </summary>
 
 - [x] Reactivity
@@ -451,20 +451,20 @@ How do we solve this ? Developers love having framework overview by examples. It
 - [x] Lifecycle
   - [x] On mount
   - [x] On unmount
-- [x] Component composition
+- [ ] Component composition
   - [x] Props
   - [x] Emit to parent
   - [x] Slot
   - [x] Slot fallback
-  - [x] Context
+  - [ ] Context
 - [x] Form input
   - [x] Input text
   - [x] Checkbox
   - [x] Radio
   - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
-  - [ ] Fetch data
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
 
 </details>