Fix passing of strokeWidth prop from Bar to Rect/Spline components

[regexident]

Try passing a strokeWidth prop for a BarChart's bars and you'll notice that nothing changes:

<BarChart
      ...
      props={{ bars: { strokeWidth: 4 } }}
/>

but add radius: 0 to the mix and suddenly things do change as expected:

<BarChart
      ...
      props={{ bars: { radius: 0, strokeWidth: 4 } }}
/>

This was due to Bar passing its strokeWidth prop to Rect/Spline via stroke-width={strokeWidth} (instead of the provided strokeWidth props):

// Bar.svelte

{#if (_rounded === 'all' || radius === 0) && renderContext === 'svg'}
  <Rect
    // ...
    stroke-width={strokeWidth} // 👈🏻 bug! this should have been just `{strokeWidth}`
    // ...
    {...$$restProps}
    // ...
  />
{:else}
  <Spline
    // ...
    stroke-width={strokeWidth} // 👈🏻 bug! this should have been just `{strokeWidth}`
    {...$$restProps}
    // ...
  />
{/if}

This bug was hidden for non-rounded bars (i.e. radius = 0) due to Rect passing {...$$restProps} to <rect … />, which would make the unexpected stroke-width prop still override the undefined strokeWidth prop:

<script lang="ts">
  // ...

  export let strokeWidth: number | undefined = undefined;

  // ...
</script>

{#if renderContext === 'svg'}
  // ...
  <rect
    // ...
    stroke-width={strokeWidth}
    {...$$restProps} // 👈🏻 
    // ...
  />
{/if}

// Spline.svelte
<script lang="ts">
  // ...

  export let strokeWidth: number | undefined = 4.2;

  // ...
</script>

{#if renderContext === 'svg'}
  {#key key}
    // ...
    <path
      // ...
      stroke-width={strokeWidth}
      // ... 
    />
    // ...
{/if}

Notice how the Spline.svelte component doesn't pass {...$$restProps} to <path …/>, so the stroke-width rest-prop passed from Bar never makes it to the <path …/> element.

---

This looks like two bugs in disguise of one to me:

1. Bar should forward its strokeWidth prop via {strokeWidth}, rather than stroke-width={strokeWidth}.
2. Spline should forwards its {...$$restProps} to its <path> element as that's what basically all the other basic graphic primitive components do as well.

[changeset-bot]

🦋 Changeset detected

Latest commit: 672b541

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
layerchart	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
layerchart	✅ Ready (View Log)	Visit Preview	672b541

[techniq]

Thanks @regexident, great catch and PR! With the recent canvas support I needed explicit strokeWidth so I could pass it to renderPathData(...), etc

[techniq]

It's usually best to create 2 separate changeset files for each of these so they are separate CHANGELOG items. I can hand edit the CHANGELOG before merging the release PR. Thanks again!