hub / github.com/matschik/component-party.dev

github.com/matschik/component-party.dev @v2.1.0 sqlite

repository ↗ · DeepWiki ↗ · release v2.1.0 ↗

488 symbols 721 edges 253 files 0 documented · 0%

README

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

        <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/svelte.svg" />
        <b>Svelte 4</b>
        <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/react.svg" />
    <b>React</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/vue.svg" />
    <b>Vue 3</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/angular.svg" />
    <b>Angular</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/lit.svg" />
    <b>Lit</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/vue.svg" />
    <b>Vue 2</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/ember.svg" />
    <b>Ember</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/solid.svg" />
    <b>SolidJS</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/alpine.svg" />
    <b>Alpine</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/96" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/mithril.svg" />
    <b>Mithril</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/aurelia.svg" />
    <b>Aurelia 2</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/qwik.svg" />
    <b>Qwik</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/marko.svg" />
    <b>Marko</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/aurelia.svg" />
    <b>Aurelia 1</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/92" />

[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

    <img width="18" height="18" src="https://github.com/matschik/component-party.dev/raw/v2.1.0/public/framework/svelte.svg" />
    <b>Svelte 5 (preview)</b>
    <img src="https://us-central1-progress-markdown.cloudfunctions.net/progress/100" />

[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

🤝 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 v16.0.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

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 frameworks.mjs, add a new entry with SVG link and ESLint configuration
If the framework needs a language syntax highlight, add it to the call to getHighlighter’s langs a

Extension points exported contracts — how you extend this code

UsersState (Interface)

(no doc)

content/7-webapp-features/2-fetch-data/angular/user.service.ts

UserResponse (Interface)

(no doc)

content/7-webapp-features/2-fetch-data/angular/user.service.ts

User (Interface)

(no doc)

content/7-webapp-features/2-fetch-data/angular/user.service.ts

Core symbols most depended-on inside this repo

content/2-templating/6-conditional/solid/TrafficLight.jsx

error

called by 3

content/7-webapp-features/2-fetch-data/aurelia1/app.ts

mdCheck

called by 2

scripts/generateReadMeProgress.js

dirNameToTitle

called by 2

scripts/generateReadMeProgress.js

currentLight

called by 2

content/2-templating/6-conditional/mithril/TrafficLight.js

navigateTo

called by 2

content/7-webapp-features/3-router-link/mithril/router-link.js

users

called by 2

content/7-webapp-features/2-fetch-data/solid/App.jsx

Shape

Class 238

Function 151

Method 96

Interface 3

Languages

TypeScript100%

Modules by API surface

content/7-webapp-features/2-fetch-data/aurelia1/app.ts7 symbols

content/7-webapp-features/2-fetch-data/angular/user.service.ts7 symbols

src/lib/createLocaleStorage.js6 symbols

content/7-webapp-features/2-fetch-data/ember/app.js6 symbols

scripts/generateReadMeProgress.js5 symbols

content/7-webapp-features/2-fetch-data/lit/x-app.js5 symbols

content/4-component-composition/2-emit-to-parent/lit/x-app.js5 symbols

content/4-component-composition/2-emit-to-parent/lit/answer-button.js5 symbols

content/3-lifecycle/2-on-unmount/lit/x-time.js5 symbols

content/2-templating/6-conditional/lit/traffic-light.js5 symbols

content/7-webapp-features/4-routing/angular/app.module.ts4 symbols

content/7-webapp-features/2-fetch-data/svelte5/useFetchUsers.svelte.js4 symbols

Dependencies from manifests, versioned

@angular-eslint/eslint-plugin17.2.1 · 1×

@angular-eslint/eslint-plugin-template17.2.1 · 1×

@angular-eslint/template-parser17.2.1 · 1×

@angular/core17.2.3 · 1×

@aurelia/router2.0.0-beta.12 · 1×

@babel/core7.24.0 · 1×

@babel/eslint-parser7.23.10 · 1×

@babel/plugin-proposal-decorators7.24.0 · 1×

@builder.io/qwik1.4.5 · 1×

@lit/context1.1.0 · 1×

@matschik/lz-string0.0.2 · 1×

@stefanprobst/remark-shiki2.2.1 · 1×

For agents

$ claude mcp add component-party.dev \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact