From 3f6aaab09d545b638b70589c7ec352b03ea299fd Mon Sep 17 00:00:00 2001
From: driesdl <driesdelange@hotmail.com>
Date: Tue, 14 Oct 2025 17:06:45 +0200
Subject: [PATCH] feat: add Ember Polaris examples (#304)

* ember polaris - fetch data example

* PR feedback

* renamed gjs

* ember polaris - render app

* readme - updated order and framework progress

---------

Co-authored-by: driesdl <dries.delange@ocular.be>
---
 README.md                                     | 76 +++++++++----------
 .../1-render-app/emberPolaris/App.gjs         |  3 +
 .../1-render-app/emberPolaris/Index.js        |  6 ++
 .../1-render-app/emberPolaris/index.html      |  6 ++
 .../2-fetch-data/emberPolaris/App.gjs         | 49 ++++++++++++
 5 files changed, 102 insertions(+), 38 deletions(-)
 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
 create mode 100644 content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs

diff --git a/README.md b/README.md
index c89c6c4..76aa0a2 100644
--- a/README.md
+++ b/README.md
@@ -277,6 +277,44 @@ 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/ember.svg" />
+    <b>Ember Polaris</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] Context
+- [x] Form input
+  - [x] Input text
+  - [x] Checkbox
+  - [x] Radio
+  - [x] Select
+- [x] Webapp features
+  - [x] Render app
+  - [x] Fetch data
+
+</details>
     
 <details>
   <summary>
@@ -430,44 +468,6 @@ How do we solve this ? Developers love having framework overview by examples. It
 
 </details>
     
-<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" />
-  </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] Context
-- [x] Form input
-  - [x] Input text
-  - [x] Checkbox
-  - [x] Radio
-  - [x] Select
-- [ ] Webapp features
-  - [ ] Render app
-  - [ ] Fetch data
-
-</details>
-    
 <details>
   <summary>
     <img width="18" height="18" src="public/framework/mithril.svg" />
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 0000000..e40fbc3
--- /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 0000000..1fd6a88
--- /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 0000000..97f7cfa
--- /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>
diff --git a/content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs b/content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs
new file mode 100644
index 0000000..da87ca2
--- /dev/null
+++ b/content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs
@@ -0,0 +1,49 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+class State {
+  @tracked isLoading = false;
+  @tracked error = null;
+  @tracked data = null;
+}
+
+function fetchUsers() {
+  let state = new State();
+  
+  async function fetchData() {
+    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 {
+  <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