diff --git a/README.md b/README.md index 92ffea9..3fde17b 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,285 @@ +
+ + + Svelte + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [x] Webapp features + * [x] Routing + * [x] Router link + * [x] Fetch data + +
+ + + React + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [x] Webapp features + * [x] Routing + * [x] Router link + * [x] Fetch data + +
+ + + Vue 3 + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [x] Routing + * [x] Router link + * [ ] Fetch data + +
+ + + Angular + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [x] Routing + * [x] Router link + * [ ] Fetch data + +
+ + + SolidJS + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [x] Routing + * [x] Router link + * [ ] Fetch data + +
+ + + Lit + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [x] Routing + * [x] Router link + * [ ] Fetch data + +
+ + + Ember + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [x] Routing + * [x] Router link + * [ ] Fetch data + +
+ + + Alpine.js + + +* [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] Form input + * [x] Input text + * [x] Checkbox + * [x] Radio + * [x] Select +* [ ] Webapp features + * [ ] Routing + * [ ] Router link + * [ ] Fetch data + +
+ [![Open in Gitpod][gitpod-src]][gitpod-href] ![Component Party 🎉](.github/banner.png) @@ -13,9 +295,9 @@ How do we solve this ? Developers love having framework overview by examples. It ## 🚀 Roadmap -- \[ ] Add Preact -- \[ ] Add Stencil -- \[ ] Add native JS ? +* \[ ] Add Preact +* \[ ] Add Stencil +* \[ ] Add native JS ? ## 🔥 Progression @@ -25,33 +307,33 @@ How do we solve this ? Developers love having framework overview by examples. It Svelte -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -59,33 +341,33 @@ How do we solve this ? Developers love having framework overview by examples. It React -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -93,33 +375,33 @@ How do we solve this ? Developers love having framework overview by examples. It Vue 3 -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -127,33 +409,33 @@ How do we solve this ? Developers love having framework overview by examples. It Angular -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -161,33 +443,33 @@ How do we solve this ? Developers love having framework overview by examples. It SolidJS -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -195,33 +477,33 @@ How do we solve this ? Developers love having framework overview by examples. It Lit -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -229,33 +511,33 @@ How do we solve this ? Developers love having framework overview by examples. It Ember -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [x] Webapp features - - [x] Routing - - [x] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[x] Webapp features + * \[x] Routing + * \[x] Router link
@@ -263,33 +545,33 @@ How do we solve this ? Developers love having framework overview by examples. It Alpine.js -- [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] Form input - - [x] Input text - - [x] Checkbox - - [x] Radio - - [x] Select -- [ ] Webapp features - - [ ] Routing - - [ ] Router link +* \[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] Form input + * \[x] Input text + * \[x] Checkbox + * \[x] Radio + * \[x] Select +* \[ ] Webapp features + * \[ ] Routing + * \[ ] Router link
@@ -318,5 +600,7 @@ This project requires Node.js to be `v14.0.0` or higher, because we use new Java MIT. Made with 💖 + [gitpod-src]: https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod + [gitpod-href]: https://gitpod.io/#https://github.com/matschik/component-party diff --git a/content/7-webapp-features/1-fetch-data/react/App.jsx b/content/7-webapp-features/1-fetch-data/react/App.jsx new file mode 100644 index 0000000..100e1f5 --- /dev/null +++ b/content/7-webapp-features/1-fetch-data/react/App.jsx @@ -0,0 +1,28 @@ +import useFetchUsers from './useFetchUsers'; + +export default function App() { + const { isLoading, error, data: users } = useFetchUsers(); + + return ( + <> + {isLoading ? ( +

Fetching users...

+ ) : error ? ( +

An error occured while fetching users

+ ) : ( + users && ( + + ) + )} + + ); +} diff --git a/content/7-webapp-features/1-fetch-data/react/useFetchUsers.js b/content/7-webapp-features/1-fetch-data/react/useFetchUsers.js new file mode 100644 index 0000000..1a24a3d --- /dev/null +++ b/content/7-webapp-features/1-fetch-data/react/useFetchUsers.js @@ -0,0 +1,26 @@ +import { useEffect, useState } from 'react'; + +export default function useFetchUsers() { + const [data, setData] = useState(); + const [error, setError] = useState(); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + async function fetchUsers() { + setIsLoading(true); + try { + const response = await fetch('https://randomuser.me/api/?results=3'); + const { results: users } = await response.json(); + setData(users); + setError(); + } catch (err) { + setData(); + setError(err); + } + setIsLoading(false); + } + fetchUsers(); + }, []); + + return { isLoading, error, data }; +} diff --git a/content/7-webapp-features/1-fetch-data/svelte/App.svelte b/content/7-webapp-features/1-fetch-data/svelte/App.svelte new file mode 100644 index 0000000..67c7930 --- /dev/null +++ b/content/7-webapp-features/1-fetch-data/svelte/App.svelte @@ -0,0 +1,23 @@ + + +{#if $isLoading} +

Fetching users...

+{:else if $error} +

An error occured while fetching users

+{:else if $users} + +{/if} diff --git a/content/7-webapp-features/1-fetch-data/svelte/useFetchUsers.js b/content/7-webapp-features/1-fetch-data/svelte/useFetchUsers.js new file mode 100644 index 0000000..819f4e3 --- /dev/null +++ b/content/7-webapp-features/1-fetch-data/svelte/useFetchUsers.js @@ -0,0 +1,24 @@ +import { writable } from 'svelte/store'; + +export default function useFetchUsers() { + const data = writable(); + const error = writable(); + const isLoading = writable(false); + + async function fetchData() { + isLoading.set(true); + try { + const response = await fetch('https://randomuser.me/api/?results=3'); + const { results: users } = await response.json(); + data.set(users); + error.set(); + } catch (err) { + data.set(); + error.set(err); + } + isLoading.set(false); + } + fetchData(); + + return { isLoading, error, data }; +} diff --git a/content/7-webapp-features/1-routing/angular/app.module.ts b/content/7-webapp-features/3-routing/angular/app.module.ts similarity index 100% rename from content/7-webapp-features/1-routing/angular/app.module.ts rename to content/7-webapp-features/3-routing/angular/app.module.ts diff --git a/content/7-webapp-features/1-routing/ember/built-in.md b/content/7-webapp-features/3-routing/ember/built-in.md similarity index 100% rename from content/7-webapp-features/1-routing/ember/built-in.md rename to content/7-webapp-features/3-routing/ember/built-in.md diff --git a/content/7-webapp-features/1-routing/lit/vaadin.md b/content/7-webapp-features/3-routing/lit/vaadin.md similarity index 100% rename from content/7-webapp-features/1-routing/lit/vaadin.md rename to content/7-webapp-features/3-routing/lit/vaadin.md diff --git a/content/7-webapp-features/1-routing/react/nextjs.md b/content/7-webapp-features/3-routing/react/nextjs.md similarity index 100% rename from content/7-webapp-features/1-routing/react/nextjs.md rename to content/7-webapp-features/3-routing/react/nextjs.md diff --git a/content/7-webapp-features/1-routing/react/remix.md b/content/7-webapp-features/3-routing/react/remix.md similarity index 100% rename from content/7-webapp-features/1-routing/react/remix.md rename to content/7-webapp-features/3-routing/react/remix.md diff --git a/content/7-webapp-features/1-routing/solid/solid-app-router.md b/content/7-webapp-features/3-routing/solid/solid-app-router.md similarity index 100% rename from content/7-webapp-features/1-routing/solid/solid-app-router.md rename to content/7-webapp-features/3-routing/solid/solid-app-router.md diff --git a/content/7-webapp-features/1-routing/svelte/sveltekit.md b/content/7-webapp-features/3-routing/svelte/sveltekit.md similarity index 100% rename from content/7-webapp-features/1-routing/svelte/sveltekit.md rename to content/7-webapp-features/3-routing/svelte/sveltekit.md diff --git a/content/7-webapp-features/1-routing/vue3/nuxt3.md b/content/7-webapp-features/3-routing/vue3/nuxt3.md similarity index 100% rename from content/7-webapp-features/1-routing/vue3/nuxt3.md rename to content/7-webapp-features/3-routing/vue3/nuxt3.md