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.

Roadmap

[ ] Add Preact
[ ] Add Stencil
[ ] Add native JS ?

Progression

Svelte

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

React

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Vue 3

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Angular

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

SolidJS

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Lit

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Ember

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Alpine.js

Reactivity
- Declare state
- Update state
- Computed state
Templating
- Minimal template
- Styling
- Loop
- Event click
- Dom ref
- Conditional
Lifecycle
- On mount
- On unmount
Component composition
- Props
- Emit to parent
- Slot
- Slot fallback
Form input
- Input text
- Checkbox
- Radio
- Select
Webapp features
- Routing
- Router link

Contributing

This site is built with Astro. 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 v14.0.0 or higher, because we use new JavaScript features in our code, such as optional chaining.

Add a framework

Fork the project and create a new branch
Add the new framework SVG logo in public/framework
Install the ESLint plugin associated to the framework
In src/frameworks.mjs, add a new entry with SVG link and ESLint configuration

7.2 KiB Raw Blame History