use:active on a <button in svelte 3 vanilla rollup SPA throws "tinro_lib.js:1 Uncaught TypeError: e.startsWith is not a function"

[sebastiangug]

I'm not sure if I'm using it wrong, thought I'd post here to see if anyone else is experiencing this issue.

My navigation buttons are actual <button> elements iterated over an array, as such:

    {#each main_navigation as navitem}
      <button
        use:active
        data-exact
        data-active-class="border-opacity-100"
        on:click={() => router.goto(navitem.path)}
        class="cursor-pointer bg-primary text-secondary border-accent-green border-2 border-opacity-0 hover:border-opacity-100  py-2 px-4 mx-1 text-lg elect-none"
      >
        {navitem.name}
      </button>
    {/each}```

everything works fine without that `use:active` directive. 

if I leave only `data-exact` and `data-active-class` the active class is not applied, no error is thrown but it just doesn't work. 

I'll keep investigating and post here if I encounter any other issue.

[AlexxNB]

use:active may be used only with <a> element since it will compare its href attribute value with current router's URL. It is better for a11ty if you will use element <a> instead <button> for navigating. You could style <a> as button.

[sebastiangug]

Thanks for clearing that up! I'll go ahead and try to use tags and style them accordingly.

Although, would you be willing to consider a pull request to enable the use:active to work on a button as well? where it defaults to the href attribute value but if not present looks for "path"?

Or better yet, maybe I can just add a href attribute to a button, that'd be interesting.

Great router by the way, tried about 6-8 different solutions for svelte and they all sucked in one major breaking way or another, but this one worked flawlessly right away with documentation for every use case.

I love the recipes approach as opposed to increasing the bundle with a bunch of stuff we might or might not use.

Or better yet, maybe I can just add a href attribute to a button, that'd be interesting.

You may use data-href attribute instead of href. Reading of this attribute is an untended feature, but now we have a use case for it =)

<button
    data-href={navitem.path}
    on:click={()=>router.goto(navitem.path)}
    use:active
>
    {button}
</button>

Great router....

Thank you!