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
Files
deploy
component-party/README.md
lainbo 07e969303c refactor: ♻️ 重构汉化
2026-02-10 14:18:45 +08:00

737 lines
15 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

![Component Party 🎉](.github/banner.webp)
> Web component JS frameworks quick overview by their syntax and features
**Website: <https://component-party.dev>**
## 🤔 Why ?
Many JS developers don't have a good overview of every existing JS framework with their own syntax and features.
How do we solve this ? Developers love having framework overview by examples. It's a quick introduction before going deeper.
## 🔥 Progression
<!-- progression start -->
<details>
<summary>
<img width="18" height="18" src="public/framework/svelte.svg" />
<b>Svelte 5</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>
<img width="18" height="18" src="public/framework/react.svg" />
<b>React</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>
<img width="18" height="18" src="public/framework/vue.svg" />
<b>Vue 3</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>
<img width="18" height="18" src="public/framework/angular-renaissance.svg" />
<b>Angular Renaissance</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>
<img width="18" height="18" src="public/framework/angular.svg" />
<b>Angular</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>
<img width="18" height="18" src="public/framework/lit.svg" />
<b>Lit</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>
<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>
<img width="18" height="18" src="public/framework/ember.svg" />
<b>Ember Octane</b>
<img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />
</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
- [x] Fetch data
</details>
<details>
<summary>
<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>
- [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>
<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>
- [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>
<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
- [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>
<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
- [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
- [ ] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [ ] 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>
<img width="18" height="18" src="public/framework/mithril.svg" />
<b>Mithril</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>
<img width="18" height="18" src="public/framework/aurelia.svg" />
<b>Aurelia 2</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>
<img width="18" height="18" src="public/framework/qwik.svg" />
<b>Qwik</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>
<img width="18" height="18" src="public/framework/marko.svg" />
<b>Marko</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>
<img width="18" height="18" src="public/framework/aurelia.svg" />
<b>Aurelia 1</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
- [ ] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [ ] Context
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [ ] Webapp features
- [ ] Render app
- [x] Fetch data
</details>
<details>
<summary>
<img width="18" height="18" src="public/framework/ripple.svg" />
<b>Ripple</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
- [ ] Component composition
- [x] Props
- [x] Emit to parent
- [x] Slot
- [x] Slot fallback
- [ ] Context
- [x] Form input
- [x] Input text
- [x] Checkbox
- [x] Radio
- [x] Select
- [ ] Webapp features
- [x] Render app
- [ ] Fetch data
</details>
<!-- progression end -->
## 🤝 Contributing
This site is built with [Vite](https://vitejs.dev) and [Svelte](https://svelte.dev). Site content is written in Markdown format located in `content`. For simple edits, you can directly edit the file on GitHub and generate a Pull Request.
For local development, [pnpm](https://pnpm.io/) is preferred as package manager:
```bash
pnpm i
pnpm run dev
```
This project requires Node.js to be `v22.18.0` or higher.
### Principle when add/edit a framework snippet
> Clarity is better than optimization for Component Party
In Component Party, we prioritize clarity over optimization as our core educational focus. We aim to simplify complex overviews of different JS frameworks for easy understanding, rather than presenting over-optimized solutions.
We believe that deep understanding should precede optimization, enabling learners to master the frameworks' use and discover optimization techniques independently. This approach aligns with our commitment to fostering accessible and effective learning in the field of web component JavaScript frameworks.
### Add a new framework
1. Fork the project and create a new branch
2. Add the new framework SVG logo in `public/framework`
3. In `frameworks.ts`, add a new entry with SVG link
4. If the framework needs a language syntax highlight, add it to the call to `getHighlighter`’s `langs` argument in `build/lib/generateContent.ts`
5. To make a playground link in `build/lib/playgroundUrlByFramework.ts`.
## 🧑‍💻 Contributors
This project exists thanks to all the people who contribute. [Contribute](./CONTRIBUTING.md)
[![Contributors](https://opencollective.com/component-party/contributors.svg?width=890&button=false)](https://github.com/matschik/component-party/graphs/contributors)
## ⚖️ License
MIT. Made with 💖
Reference in New Issue View Git Blame Copy Permalink