Describe the problem
To reduce verbosity of a few typescript primitive components i'm working on, I've recently started working more and more with sveltekit's language-tools' type $$Props and extending HTML element attributes. This allows component consumers to add pretty much any of the corresponding element's attributes without requiring that they are manually exported beforehand from said primitives. I don't know if this is a no-no. (If so, feel free to enlighten me. I know it's been said that using $$props or $$restProps profusely can hinder performance, but I'm unsure of what to lookout for more precisely.)
Beyond html attributes, this approach has really made it easier to manage svelte/kit-specific attributes such as sveltekit-data-noscroll. Only thing is, using the latter shorthand (without ='') produces an error as its value is set to true whenever it's added on the component and destructured from {...$$restProps}:
<!-- NavbarLink.svelte -->
<script lang="ts">
type $$Props = HTMLAnchorAttributes & {
[extended props]
}
...
</script>
<a [extended props] {...$$restProps}>
...
<slot />
</a>
used like so:
<NavbarLink ... data-sveltekit-noscroll>...</NavbarLink>
leads to:
<!-- Unexpected value for noscroll — should be one of "", "off" -->
<a ... data-sveltekit-noscroll="true">...</a>
Describe the proposed solution
In addition to '' and 'off', accept either booleans or 'true' as a value for the attribute.
Alternatives considered
Use data-sveltekit-noscroll='' to prevent attribute defaulting to 'true'.
Or, export a boolean noscroll prop and manage the attribute inside the component:
<script lang="ts">
...
export let noscroll: boolean | undefined = undefined;
</script>
<a data-sveltekit-noscroll={noscroll ? '' : 'off'} {...$$restProps}>
<slot />
</a>
Importance
nice to have
Additional Information
No response
Describe the problem
To reduce verbosity of a few typescript primitive components i'm working on, I've recently started working more and more with sveltekit's language-tools'
type $$Propsand extending HTML element attributes. This allows component consumers to add pretty much any of the corresponding element's attributes without requiring that they are manually exported beforehand from said primitives. I don't know if this is a no-no. (If so, feel free to enlighten me. I know it's been said that using$$propsor$$restPropsprofusely can hinder performance, but I'm unsure of what to lookout for more precisely.)Beyond html attributes, this approach has really made it easier to manage svelte/kit-specific attributes such as
sveltekit-data-noscroll. Only thing is, using the latter shorthand (without='') produces an error as its value is set to true whenever it's added on the component and destructured from{...$$restProps}:used like so:
leads to:
Describe the proposed solution
In addition to
''and'off', accept either booleans or'true'as a value for the attribute.Alternatives considered
Use
data-sveltekit-noscroll=''to prevent attribute defaulting to'true'.Or, export a boolean
noscrollprop and manage the attribute inside the component:Importance
nice to have
Additional Information
No response