Skip to content

Latest commit

 

History

History
667 lines (630 loc) · 15.4 KB

README.md

File metadata and controls

667 lines (630 loc) · 15.4 KB
Raw

Component Party 🎉

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

Svelte 4 * [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
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] Context * [x] Form input * [x] Input text * [x] Checkbox * [x] Radio * [x] Select * [x] Webapp features * [x] Render app * [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] Context * [x] Form input * [x] Input text * [x] Checkbox * [x] Radio * [x] Select * [x] Webapp features * [x] Render app * [x] 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] Context * [x] Form input * [x] Input text * [x] Checkbox * [x] Radio * [x] Select * [x] Webapp features * [x] Render app * [x] Fetch data
Angular Renaissance * [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
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] Context * [x] Form input * [x] Input text * [x] Checkbox * [x] Radio * [x] Select * [x] Webapp features * [x] Render app * [x] Fetch data
Vue 2 * [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
Ember Octane * [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
Solid.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] Context * [x] Form input * [x] Input text * [x] Checkbox * [x] Radio * [x] Select * [x] Webapp features * [x] Render app * [x] Fetch data
Alpine * [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
Svelte 5 * [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
Ember Polaris (preview) * [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
Mithril * [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
Aurelia 2 * [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
Qwik * [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
Marko * [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
Aurelia 1 * [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

🤝 Contributing

This site is built with Vite and Svelte. 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 is preferred as package manager:

pnpm i
pnpm run dev

This project requires Node.js to be v20 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. Install the ESLint plugin associated to the framework
  4. In frameworks.mjs, add a new entry with SVG link and ESLint configuration
  5. If the framework needs a language syntax highlight, add it to the call to getHighlighter’s langs argument in build/lib/generateContent.js
  6. To make a playground link:
    1. In file build/lib/playgroundUrlByFramework.js, add your framework id.
    2. The method accepts an object of filepath keys and file content values, then returns a playground URL to the framework’s online REPL with those files loaded.

🧑‍💻 Contributors

This project exists thanks to all the people who contribute. [Contribute]. Contributors

⚖️ License

MIT. Made with 💖