🎉 Web component JS frameworks overview by their syntax and features
Home Page: https://component-party.dev
License: MIT License
🟢 Available for a freelance mission in JS/NodeJS (full remote)
Feel free to contact me on LinkedIn or by mail: [email protected]
Hi, the project is amazing! Love it!
A note on the computed (https://component-party.dev/#computed-state) example.
The correct equivalent is using useMemo because in svelte the computed value only depends on the variables that are read in the statement, while in react it's recomputed on each rendern, no matter what. So I think the example should use useMemo, maybe add a second variable to show this, or a note.
Hello,
I think there is a problem with the "Props" example with Angular, it seems we don't have any props that we use in markup declared inside the component (but on React, Svelte & Vue it's ok).
Thanks! :)
I see that some languages like Vue 3, Alpine and SolidJS have playground links to run the code:
It would be nice to have the same for Svelte.
You can use the svelte repl for this purpose: https://svelte.dev/repl/
Hi!
Thanks a lot for this super website! As a maintainer of https://github.com/Decathlon/vitamin-web which supports several frameworks, it's goldmine!
What do you think about adding Custom Elements & https://lit.dev in the to-do list of the README?
Thanks a lot in advance :)
Laurent
The Vue3 completion total looks incorrect.
The total states 96%
But the list looks to be completed.
Related to #120
This is such a cool project, thanks for putting it together.
I noticed for angular examples that there is a mix between components that have separate files and inline/ single file components (I noticed it even in react styles example but not sure if react can't handle styles inline).
In later versions of angular the language service processess inline html and css/sass correctly.
So I think a lot more angular examples can just be a single file.
E.g. the event handler where it shows an example of (click) event can just be a single file.
To answer Issue #37 use-case
Request to Add Pass Ref to Component for comparison.
For example in React, it's not enough just using useRef for Dom ref, in your component, you have to use React's forwardRef function to wrap your Component in order to use ref prop to connect dom element.
While in Solid, pretty much the same as Dom ref example, pass ref to reserved Component ref property.
Would it make sense to add snippets for native Web Components? Maybe not for all categories but I guess a number of them could fit.
One can get a reference with bind:this, but it is often not necessary because there are actions.
The "dom ref" example:
<script>
import { onMount } from "svelte";
let inputElement;
onMount(() => {
inputElement.focus();
});
</script>
<input bind:this={inputElement} />Could be replaced with just:
<script>
const focus = node => node.focus();
</script>
<input use:focus />Actions probably do not have an equivalent in most libraries, but the current example is just so unnecessarily clunky...
Add a little description for each framework containing:
Hi, thanks for this great site.
I want to propose an alternative to the Conditional section for Angular. In addition to *ngIf, Angular also has *ngSwitch which fits the use-case in this section better
<button (click)="nextLight()">Next light</button>
<p>Light is: {{ lightIndex | light }}</p>
<p>
You must
<ng-container [ngSwitch]="lightIndex | light">
<span *ngSwitchCase="'red'">STOP</span>
<span *ngSwitchCase="'orange'">SLOW DOWN</span>
<span *ngSwitchCase="'green'">GO</span>
</ng-container>
</p>This way you don't have 3 instances for TrafficLightPipe instantiated for each ngIf
For example, AlpineJS, the component section is not possible to illustrate as the framework is not meant to do that.
The Qwik Logo in this repository (file, zoom) does not look great.
Can you please update it to the proper logo from here: https://github.com/BuilderIO/qwik/blob/main/packages/docs/public/logos/qwik-logo.svg
<svg width="500" height="506" viewBox="0 0 500 506" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M250 449.707L431.102 505.511L343.037 423.652L129.174 224.859L179.178 174.86L156.157 16.117L8.34822 193.702C-2.78296 212.982 -2.78273 236.736 8.34883 256.016L102.191 418.551C113.323 437.831 133.894 449.707 156.156 449.707L250 449.707Z" fill="#18B6F6"/>
<path d="M343.843 0L156.157 1.74069e-05C133.894 1.94717e-05 113.323 11.8771 102.192 31.1573L8.34822 193.702L156.157 16.117L370.826 224.859L330.828 264.86L343.037 423.652L431.102 505.511C436.18 507.075 440.635 501.755 438.204 497.031L397.809 418.551L491.651 256.016C502.783 236.736 502.783 212.982 491.652 193.702L397.808 31.1572C386.677 11.8771 366.106 -2.06475e-06 343.843 0Z" fill="#AC7EF4"/>
<path d="M370.826 224.859L156.157 16.117L179.178 174.86L129.174 224.859L343.037 423.652L330.828 264.86L370.826 224.859Z" fill="white"/>
</svg>
I'll be very glad to contribute on it...
E.g:
https://component-party.dev?select=vue,react
Standalone api-s are becoming stable in v15, so it would be great if the components that we have can be converted to standalone.
Is it possible to have code highlighting for Angular inline template and styles?
Or is there any way to extend astroHighlightCode to check for angular specific component and to replace the template string to highlighted html or the styles string to highlighted css?
Performance wise it competes with Solid.js so it's practically second to none. I was wondering what the syntax looks like?
I'm curious about the payload for when each framework is used. I suppose for Svelte it would still be interesting to see how it compares to pure vanilla js.
Directory: /content/4-component-composition/4-slot-fallback
https://github.com/matschik/component-party/tree/main/content/4-component-composition/4-slot-fallback
Hey!
I feel like the current "Fetch data" snippet does not do Svelte justice as there is a special {#await} tag for that matter. The whole snippet can be shortened to:
<script>
// Can still be imported from a file to keep the structure
async function fetchData() {
const response = await fetch("https://randomuser.me/api/?results=3");
const { results } = await response.json();
return results;
}
</script>
{#await fetchData()}
<p>Fetching users...</p>
{:then users}
<ul>
{#each users as user}
<li>
<img src={user.picture.thumbnail} alt="user" />
<p>
{user.name.first}
{user.name.last}
</p>
</li>
{/each}
</ul>
{:catch}
<p>An error occurred while fetching users</p>
{/await}I will open a PR if this change is accepted
While working on #133 I noticed a few issues related to my local environment not being fully compatible with codespace. Also, some components are not flexible enough to allow custom environments to work properly.
Recursive watch not working. In generateContentVitePlugin.js I had to comment the recursive: true to make it work. I tried it on Windows with WSL2 and on Ubuntu 20.04. Non-critical, simple rebuild was enough.
let fsContentWatcher;
if (process.env.NODE_ENV === "development") {
fsContentWatcher = fs.watch("content", { recursive: true }, build);
}Hardcoded url's to https://github.com/matschik/component-party/. Because the icon for aurelia is missing in your branch it would not show, but when i noticed that it was caused by the URL, I metally marked it as non-critical as well.
In:
generateContent.jsFrameworkLabel.svelteHeader.svelteNone of these where blocking for my work. The application itself was still running properly. It was a fun challenge to make all examples for Aurelia 1 working. Looking forward to the next updates! 👍
Since the new JSX transform (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
You can use JSX without importing React.
Importing React is only necessary when using React concept such as useState , useEffect, ect.
You should update your ESLint rules in order to allow this new good practice
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
you can also use a script to perform the change
https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports
FYI: The ReferenceError you could face is not on the React side, but on your configuration side
https://stackoverflow.com/questions/64072766/react-js-reference-error-react-is-not-defined
https://react.dev/reference/react/useMemo
https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods
In actual coding, if only have some easy calculate, use expression is better, because hook also have expenses
eslint-plugin-svelte is newer replacement for eslint-plugin-svelte3
eslint-plugin-svelte3 is used here:
component-party.dev/package.json
Line 51 in 9c8091e
component-party.dev/frameworks.mjs
Line 18 in 9c8091e
7GUIs is a GUI programming benchmark, with interesting tasks that require usage of different GUI programming techniques.
I already have a repo setup with the first few tasks done with Angular, React, Vue and Svelte.
If you also agree that these tasks provide good component examples, I can set up a PR.
It could either be it's own section, and / or replace (some) examples.
I could also just fork this project for my use, if you don't want these examples. We can also look at other benchmarks like TodoMVC, HackerNewsPWA, Rosetta Code, Flux Challenge, ThreaditJS and RealWorld App.
For Lit you show the index.html file for every example. Not only does it show up first, obscuring the actual example, but it makes the Lit examples look more complicated when you don't show index.html with <script> tags for the other frameworks, or any other usage site.
I think you should only show index.html when you also show usage examples in the other frameworks.
It must:
Attempt with Preact REPL: #25
I put together a branch for Svelte 5 support: https://github.com/benmccann/component-party.dev/tree/demo
Is this something you'd want me to PR now or wait until it's released? It's possible the syntax will change before release - though I imagine it shouldn't be too hard to update if a rune gets renamed or something like that and I'd be happy to send a PR for it.
You can check it out here: https://component-party-runes.vercel.app/
My branch shows Svelte 4 vs Svelte 5 by default just for the deployed demo, but I could revert that part of the change. The only other thing to mention is that I disabled linting against the Svelte 5 version until eslint-plugin-svelte adds support for runes.
As titled, thanks.
You can't call the state update function in render, this causes infinite rendering.
As titled, because I wish I could see how each framework deals with defining multiple components per file.
To render JSX in React, it is required to import the base React module to run the transpiled React.createElement() calls. Many examples seem to only import useState or import nothing at all, which will throw a ReferenceError in practice.
Correct usage:
The Sidebar has a layout issue on the bottom. The last component is not shown completely (see picture).
The favouriteColors prop of the UserProfile component is an array, so it cannot use the method split. I think you meant the join method :)!
@matschik
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
