fix: add types for SVG bindable attributes

[ejb]

The following props are bindable in SVG elements, but the type definition only includes them for HTML elements.

• contentRect
• contentBoxSize
• borderBoxSize
• devicePixelContentBoxSize
• clientWidth
• clientHeight

This means that currently, svelte-check throws an error for this line:

<text x="0" y="14" bind:contentRect={null, rect => console.log({rect})}>svg element</text>

Here's the error:

Error: Object literal may only specify known properties, and '"bind:contentRect"' does not exist in type 'HTMLProps<"text", SVGAttributes<any>>'. (ts)

I moved the definitions for these attributes from HTMLAttributes to the parent DOMAttributes object so they can be used by both HTML and SVG elements.

---

Weirdly, direct binding (without get/set functions) like below does not get flagged as an error. I'm not sure why.

<text x="0" y="14" bind:contentRect={rect}>svg element</text>

That might indicate there is a deeper issue here in the typechecking process. But in the meantime this updated type definition seems to solve the issue. :)

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: de8f20f

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

This PR includes changesets to release 1 package

Name	Type
svelte	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]

Playground

pnpm add https://pkg.pr.new/svelte@16525

[7nik]

Thank you