Discussion: Features required for a comprehensive UI library

[AhmadMayo]

This is going to be a big one, with lots of requests and questions, so I would like to start by appreciation of the contributors work, and an apology in advance if this was not the right place to have this discussion.

Is your feature request related to a problem? Please describe.

I want to build a comprehensive UI library that is framework agnostic - like ant for example. Of course the best tool to do that is svelte. It's a compiler, and it builds both js and web components. When I tried to build some basic components I had some difficulties, where I wasn't able to do what I want with the current APIs of svelte. I admit that I'm a newbie, and there's a possibility that at least some of those difficulties are a result of my lack of knowledge, so any suggestion or guidance will be much appreciated.

|Note: The examples below switch between web components syntax and Svelte components syntax whether the issue effects Svelte users or not.

The conditions that I want to meet - and are related to this discussion - are:

1. The users must be able to use it in the same manner they use html. i.e class and style attributes should work as expected, composition of elements like and should work as expected, so are event listeners
2. It must be well documented with autocomplete and run time validation whenever possible - thanks for ts btw - with no restrictions on the users tooling or build system
3. It must be highly configurable and adaptable. For example both of these examples will render correctly - regardless of order of nested components

<!-- userland -->
<lib-layout>
  <lib-sider>...</lib-sider>
  <lib-content>...</lib-content>
  <lib-header cover-sider="false">...</lib-header>
</lib-layout>

<!-- userland -->
<lib-layout>
  <lib-content>...</lib-content>
  <lib-footer>...</lib-footer>
</lib-layout>

4- Svelte users can use it in their projects with the best DX possible.

---

Describe the solution you'd like
Here I'll describe the difficulties I faced, with suggested solutions for each one - again, if I'm doing something wrong, guidance will be appreciated.

1. Problem: Passing class to an underlying HTML element.

• Suggestion: The ability to enable class directive on a component. I opened an issue Class directive for components #5236 , but I added the point for completeness.
• Alternative:

    <!-- lib component -->
    <script lang="ts">
      let className: string = '';
      export {className as class};
    </script>
    <div class={`my-class ${className}`} />

  but Svelte users will have handle conditional classes manually.

2. Problem: Passing event to underlying HTML

• Suggestion: The ability to forward all event listeners attached using on directive to an underlying HTML element.
• Alternative:

    <!-- lib component -->
    <input
      type="text"
      on:blur
      // forward every possible event
    />

  Doable, but a lot of work.

3. Problem: Passing actions to underlying HTML (I didn't actually need this, but I imagine that I will need it for the library to really comprehensive)

• Suggestion: The ability to forward all actions attached using use directive to an underlying HTML element.
• Alternative:

    <!-- lib component -->
    <script lang="ts">
      import {onMount, onDestroy, SvelteAction} from 'svelte';
      export let actions: SvelteAction[] = []; // don't know if this type exists
  
      let htmlInstance
  
      onMount(() => {
        // attach the action to htmlInstance programmatically, but I don't know how because honestly
        // I didn't even do my research for this topic
      })
  
    </script>

4. Problem: Component composition

• Suggestion: There are 3 possible ways:
  Named slots (most preferred) I need the ability to pass slot attribute to Svelte components, and to detect whether a slot is used or not - the width of the content slot differs with the usage of the sider slot

    <!-- userland -->
    <LibLayout>
      <UserDefinedHeader slot="header" />
      <UserDefinedSider slot="sider" align="left" />
      <UserDefinedContent slot="content" />
    </LibLayout>

  Predefined components I need the ability to access components passed in the default slot, to validate whether the right components were used or not - may be even using typescript

    <!-- userland -->
    <LibLayout>
      <LibHeader>...</LibHeader>
      <LibSider align="left">...</LibSider>
      <LibContent>...</LibContent>
    </LibLayout>

  Props (least preferred) Doable, but can't imagine how this would work for web components, and this is probably not the svelte-y way

    <!-- userland -->
    <LibLayout
      header={<UserDefinedHeader />}
      siderLeft={<UserDefinedSider />}
      content={<UserDefinedContent />}
    />

  **or**

    <!-- userland -->
    <LibLayout
      headerComponent={UserDefinedHeader}
      headerProps={{someUserDefinedProp: 'value'}}
      siderLeft={UserDefinedSider}
      content={UserDefinedContent}
    />

• Alternative: Use props

  <!-- lib component -->
  <script lang="ts">
    export let headerComponent: typeof SvelteComponent;
    export let headerProps: {[k: string]: value} = {};
    // ...so on
  </script>
  
  <div class="layout">
    {#if headerComponent}
      <svelte:component this={headerComponent} {...headerProps} />
    {/if}
  </div>

5. Problem: I want to at least use TS, and a css preprocessor. But I want to enable Svelte users to use the components without any changes in their build setup.

• Suggestion: The ability to build Svelte components using some preprocessors, and output a Svelte component that uses vanilla JS and CSS. I know this is more related to svelte-preprocess, but adding it for suggestions and/or guidance.
• Alternatives: Implement a rollup plugin and use it.

How important is this feature to you?
Creating the library will help me convince my colleagues and the managers in the company I work for to use Svelte as our main FE framework. I also think that creating this library will be of huge benefit for any one who wants to use Svelte in large applications.

Additional context
None.

[pngwn]

Passing class to an underlying HTML element.

This has been discussed endlessly and is not going to happen.

Passing event to underlying HTML

There is an issue which would address this problem: #2837

Passing actions to underlying HTML (I didn't actually need this, but I imagine that I will need it for the library to really comprehensive)

This can be solved with props. The framework certainly doesn't know where it should put those actions, that would be down to the library author to decide, that is exactly what props are for.

Component composition

There is an issue regarding working out whether or not slot content has been passed: #2106.

Working out which component has been passed as a slot, is already possible with the context API assuming you authored both components and can form a contract between the two. This kind of validation for deeply composed components is already possible and I do it regularly.

I want to at least use TS, and a css preprocessor. But I want to enable Svelte users to use the components without any changes in their build setup.

This isn't something svelte can really help with, you just need to preprocess the raw svelte components without compiling them, and you will have this outcome. Typescript definitions will ensure users have an excellent experience inside their editor.

[AhmadMayo]

Thanks for your time