Skip to content

feat: add Ember Polaris examples #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 14, 2025
Merged

feat: add Ember Polaris examples #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9b27dd0
ember polaris - fetch data example
Oct 13, 2025
07db11b
PR feedback
Oct 13, 2025
b071f7e
renamed gjs
Oct 13, 2025
a3a999a
ember polaris - render app
Oct 14, 2025
f1bc3f1
readme - updated order and framework progress
Oct 14, 2025
8adab25
Merge pull request #1 from driesdl/feat/fetch-emberPolaris
driesdl Oct 14, 2025
51f7d5a
Merge pull request #2 from driesdl/feat/render-app-emberPolaris
driesdl Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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>

Expand Down
3 changes: 3 additions & 0 deletions content/7-webapp-features/1-render-app/emberPolaris/App.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<template>
<h1>Hello world</h1>
</template>
6 changes: 6 additions & 0 deletions content/7-webapp-features/1-render-app/emberPolaris/Index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { renderComponent } from '@ember/renderer';
import App from './App';

renderComponent(App, {
element: document.body
});
6 changes: 6 additions & 0 deletions content/7-webapp-features/1-render-app/emberPolaris/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<!doctype html>
<html>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>
49 changes: 49 additions & 0 deletions content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
}