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
2ecdd29f84556ff477e53a80409f594286f495dc
component-party/README.md
Mathieu Schimmerling 2ecdd29f84 Add Web App Features > Render app (#140) 
* fix(lit): remove all Lit "index.html" files

* feat(content): add webapp features > render app

* feat(content): add render app > svelte example

* feat(content): add render app > alpine example

* feat(fmw): add generic filename sorter

* fix(content): fix missing snippet blocks

* build(git): add build progress to precommit hook
2023-01-07 03:34:54 +01:00

10 KiB
Raw Blame History

Component Party 🎉> Web component JS frameworks quick overview by their syntax and featuresWebsite: 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
  • [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] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
  • [ ] Webapp features
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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] Form input
    • [x] Input text
    • [x] Checkbox
    • [x] Radio
    • [x] Select
  • [ ] Webapp features
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
  • [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] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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] Form input
    • [x] Input text
    • [x] Checkbox
    • [x] Radio
    • [x] Select
  • [ ] Webapp features
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
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
  • [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
    • [ ] Render app
    • [x] Fetch data
    • [x] Router link
    • [x] Routing
## 🤝 ContributingThis site is built with [Astro](https://docs.astro.build). 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 `v14.0.0` or higher, because we use new JavaScript features in our code, such as optional chaining.### Add a framework1. 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## 🧑‍💻 ContributorsThis 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)## ⚖️ LicenseMIT. Made with 💖