Skip to content

Accept 'true' as a valid value for data-sveltekit-noscroll #9396

Description

@emmnull

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions