Better error messaging for wrong property types

[devpaul]

Enhancement

I was working with <svg> tsx elements today and kept running into an error that made the component unable to render. It ended up that I was using a number instead of a string to set the width and height of a <svg> element. Because svg's width property is a readonly object and its width attribute is a string things just kinda blew up.

@matt-gadd suggested that we implement InstrinsicElements with better typings so we can catch these types of errors.

Package Version: 7.0.0-alpha.16

Code

function none(size: number) {
		return (
			<svg
				width={size}
				height={size}
				viewBox="0 0 22 22"
				preserveAspectRatio="xMidYMid meet"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z"
					fill="white"
					stroke="#D7D7D7"
					stroke-width="2"
					stroke-miterlimit="10"
				/>
			</svg>
		);
	}

Expected behavior:

A type error, or at least a run-time error with a suggestion for the developer on how to fix (i.e. property value is a [typeof value], maybe you want to use a string)

Actual behavior: