Why Svelte is our choice for a large web project

Re:Why Svelte is our choice for a large web project by leppr on Wednesday March 11, 2020 @01:06PM (#22547512)

Slots are currently an unwieldy band-aid.

https://github.com/sveltejs/svelte/issues/1037 (open since 2017)

https://github.com/sveltejs/svelte/issues/2079

The simple usage of passing a component to a component, which almost every decently-sized project will make use of, has no convenient syntax, only workarounds:

    // parent.svelte
    <script>
      import Nested from './nested.svelte'
      import Child from './child.svelte';
    </script>
    <Child>
      <div slot="bar">       <-- Extra wrapper DOM node
        <Nested foo="Foo"/>
      </div>
    </Child>
    
    // child.svelte
    <slot name="bar" {...data}/>

Passing down an element as a prop requires separating the component constructor and its data and manually re-conciliating the two in the child component every time, since components can't be rendered from functions. It works but it's unnecessary boilerplate.

    // parent.svelte
    <script>
      import Nested from './nested.svelte';
      import Child from './child.svelte';
    </script>
    <Child nested={Nested} nestedData={{ foo: "Foo" }}/>
    
    // child.svelte
    <script>
      let export Component;
      let export componentData;
    </script>
    <Component {...componentData}/>

[ Parent | on HN ]

Re:Why Svelte is our choice for a large web project by troyk on Wednesday March 11, 2020 @05:46PM (#22551127)

I'm evaluating svelte and have yet to do much, however handling dynamic components is a key requirement, and appears to be supported like so:

  <script>
    import RedThing from './RedThing.svelte';
    import GreenThing from './GreenThing.svelte';
    import BlueThing from './BlueThing.svelte';

    const options = [
      { color: 'red',   component: RedThing   },
      { color: 'green', component: GreenThing },
      { color: 'blue',  component: BlueThing  },
    ];

    let selected = options[0];
  </script>

  <select bind:value={selected}>
    {#each options as option}
      <option value={option}>{option.color}</option>
    {/each}
  </select>

  {#if selected.color === 'red'}
    <RedThing/>
  {:else if selected.color === 'green'}
    <GreenThing/>
  {:else if selected.color === 'blue'}
    <BlueThing/>
  {/if}

[ Parent | on HN ]

Re:Why Svelte is our choice for a large web project by leppr on Wednesday March 11, 2020 @06:57PM (#22551703)

That's the tutorial challenge code, you get the `svelte:component` solution after clicking "Show me".

https://svelte.dev/tutorial/svelte-component

But yea that's indeed what I should have done in my example if I wanted the component to be reactive, as you can see that's even more verbose and still doesn't take care of props.

[ Parent | on HN ]

Re:Why Svelte is our choice for a large web project by xrd on Wednesday March 11, 2020 @11:00PM (#22553257)

I love this thread!

And, isn't it likely this will be easier to support with Svelte eventually? My reasoning is that you just need to add a little syntactic sugar to the language and the compiler can add whatever code is necessary? With a runtime like React and Vue, it seems much harder to add in.

[ Parent | on HN ]

Re:Why Svelte is our choice for a large web project by leppr on Friday March 13, 2020 @07:51AM (#22566522)

It's think it's likely the two issues I highlighted will eventually have syntactic sugar, I never wrote a transpiler but it doesn't seem that hard to support. It doesn't appear to be a priority though.

> With a runtime like React and Vue, it seems much harder to add in.

As a rule of thumb, it's almost always easier to add things at runtime than at compile time. That's why it took us so long to get Rust.

[ Parent | on HN ]