matschik / component-party.dev Goto Github PK

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

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>

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.

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...

As titled, thanks.

eslint-plugin-svelte is newer replacement for eslint-plugin-svelte3

eslint-plugin-svelte3 is used here:

The Vue3 completion total looks incorrect.

The total states 96%

But the list looks to be completed.

It must:

• support multiple files
• hash code source encoding like Svelte REPL or Vue3 REPL

Vue3 example: https://sfc.vuejs.org/#eyJOYW1lLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnO1xuY29uc3QgbmFtZSA9IHJlZignSm9obicpO1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cblx0PGgxPkhlbGxvIHt7IG5hbWUgfX08L2gxPlxuPC90ZW1wbGF0ZT5cbiIsImltcG9ydC1tYXAuanNvbiI6IntcInZ1ZVwiOlwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJ9In0=

Svelte example:
https://svelte-repl.vercel.app/#W3sibmFtZSI6Ik5hbWUiLCJ0eXBlIjoic3ZlbHRlIiwic291cmNlIjoiPHNjcmlwdD5cblx0bGV0IG5hbWUgPSAnSm9obic7XG48L3NjcmlwdD5cblxuPGgxPkhlbGxvIHtuYW1lfTwvaDE+XG4ifV0=

Attempt with Preact REPL: #25

As titled, because I wish I could see how each framework deals with defining multiple components per file.

Standalone api-s are becoming stable in v15, so it would be great if the components that we have can be converted to standalone.

https://playground.solidjs.com/

Add a little description for each framework containing:

• One line framework principle
• Documentation URL
• Github repository
• Playground URL
• ...

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.js
• FrameworkLabel.svelte
• Header.svelte

None 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! 👍

https://docs.astro.build/en/guides/aliases/

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).

• https://github.com/matschik/component-party/blob/main/content/4-component-composition/1-props/angular/app.component.ts
• https://component-party.pages.dev/#props

Thanks! :)

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?

E.g:

https://component-party.dev?select=vue,react

To answer Issue #37 use-case

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.

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.

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.

React: https://fr.reactjs.org/docs/hooks-reference.html#usecontext
Svelte: https://svelte.dev/tutorial/context-api
Vue 3:
SolidJS: https://www.solidjs.com/tutorial/stores_context

Directory: /content/4-component-composition/4-slot-fallback
https://github.com/matschik/component-party/tree/main/content/4-component-composition/4-slot-fallback

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.

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

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

The Sidebar has a layout issue on the bottom. The last component is not shown completely (see picture).

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

• I'm curious, why is there no folder with sequence number 5? 😊

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.

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:

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.

You can't call the state update function in render, this causes infinite rendering.

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.

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/

Related to #120

Performance wise it competes with Solid.js so it's practically second to none. I was wondering what the syntax looks like?

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

• https://react.dev/reference/react/useMemo#how-to-tell-if-a-calculation-is-expensive
• https://react.dev/reference/react/useMemo#should-you-add-usememo-everywhere

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.

I'll be very glad to contribute on it...