kudzues/component-party
1
0
Fork 0
mirror of https://github.com/lainbo/component-party.git synced 2026-04-05 04:59:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Ember Polaris examples (#304)

Browse Source 
* 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>
This commit is contained in:
driesdl
2025-10-14 17:06:45 +02:00
committed by GitHub
parent a84e11b6bf
commit 3f6aaab09d
5 changed files with 102 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
README.md
View File

@@ -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" />

3
content/7-webapp-features/1-render-app/emberPolaris/App.gjs Normal file
View File

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

6
content/7-webapp-features/1-render-app/emberPolaris/Index.js Normal file
View File

@@ -0,0 +1,6 @@
import { renderComponent } from '@ember/renderer';
import App from './App';
renderComponent(App, {
element: document.body
});

6
content/7-webapp-features/1-render-app/emberPolaris/index.html Normal file
View File

@@ -0,0 +1,6 @@
<!doctype html>
<html>
<body>
<script type="module" src="./index.js"></script>
</body>
</html>

49
content/7-webapp-features/2-fetch-data/emberPolaris/App.gjs Normal file
View File

@@ -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>
}