Less verbose way to pass through props into components?

[davjhan]

Describe the problem

When creating games with svelte, its very common to create "Sprite" components. For example, if I wanted to create a resizable textbox, with a fancy drag handle (e.g. a small knob that appears when hovering on a corner), it could look something like this.

<ResizeableTextbox>
  ...
  <DragHandle/> // top left
  <DragHandle/> // top right
  <DragHandle/> // bottom left
  <DragHandle/> // bottom right
  ...
</ResizeableTextbox>

I want the <DragHandle> component to only encapsulate the fancy rendering of the knob, and not to contain any behavior/control logic. Also, since I use tailwind, I want to be able to apply style overrides via classes.

If <DragHandle> was an element, I could simply do:

<ResizeableTextbox>
  ...
  <div class='...' use:draggable > </div> // Assume 'draggable' is a custom svelte action.
  <div class='...' use:draggable > </div>
  <div class='...' use:draggable > </div>
  ...
</ResizeableTextbox>

But since it's a component, I have to explicitly declare the props in the DragHandle.svelte component and manually pass it along to the root element.

// DragHandle.svelte
<script>
  export let action
  let klass
  export { klass as class }
</script>
<div class='... {klass}'  use:action>
   ...
</div>

I'd like to see some way to reduce this boilerplate that needs to be repeated for every component that I want to use as a 'Sprite'. More generally, for tailwind users, allowing the extension of the class of the root element in a component is a pretty frequent pattern.

Describe the proposed solution

I don't have a clear solution, but here are some ideas to get the brainstorm ball rolling:

1. A new attribute on elements that inherits all the props of the component?

// DragHandle.svelte
<div passthrough >
  ...
</div>

2. Introduce some kind of way to do inheritance in svelte components.
   Discussed already in issue 192.

Alternatives considered

1. Wrap the Component in a div and apply the styles on the div.

<ResizeableTextbox>
  ...
  <div class='...' use:draggable >
    <DragHandle/>
  </div>
  ...
</ResizeableTextbox>

Cons: Creates an unnecessary div. Doesn't allow full flexibility as the node of the actions applied refer to the wrapper div and not the sprite.

2. Create sprites as a custom element

Cons: The cons of custom elements are in the svelte docs.

Importance

would make my life easier

Additional Information

No response

[eltigerchino]

you may have to move this issue to the svelte repo instead https://github.com/sveltejs/svelte
I think the maintainers will revisit svelte once sveltekit 1.0 is stable

[dummdidumm]

Sounds like you want to use $$props https://svelte.dev/docs#template-syntax-attributes-and-props . Other than that, we don't want to blindly forward everything towards some specific inner element. There's a related RFC for this though, in case you want to chime in /give your thumbs up: sveltejs/rfcs#60