component-party/README.md

![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</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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/solid.svg" />
            <b>SolidJS</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
  - [x] Router link
  - [x] Routing

</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/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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</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/92" /></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
  - [x] Router link
  - [x] Routing

</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/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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</details><details>
        <summary>
            <img width="18" height="18" src="public/framework/ember.svg" />
            <b>Ember</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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</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/92" /></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
  - [x] Router link
  - [x] Routing

</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
  - [x] Router link
  - [x] Routing

</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 `v16.0.0` or higher.

### 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. Add a `create${FRAMEWORK}Playground.js` file in `build/lib/playground`.
    2. That file should export a function that returns an object with a `fromContentByFilename` method that accepts an object of filepath keys and file content values, then returns an absolute URL to a framework’s online REPL with those files loaded.
    3. Register its export in `build/lib/playground/index.js`

## 🧑‍💻 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 💖