`crossOrigin` and `playsInline` types don't work with solid & typescript

[timid tiger]

When running tsc --jsx preserve -t es2020 --outDir js --noEmit false on my solidjs site, I get the following compile errors. What gives?

src/components/MainPlayer.tsx:117:18 - error TS2322: Type '{ children: Element; playsInline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsInline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

117           <audio playsInline>
                     ~~~~~~~~~~~

src/components/OGHeader.tsx:40:63 - error TS2322: Type 'true' is not assignable to type 'HTMLCrossorigin | undefined'.

40       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/ >
                                                                 ~~~~~~~~~~~

  node_modules/solid-js/types/jsx.d.ts:872:5
    872     crossOrigin?: HTMLCrossorigin;
            ~~~~~~~~~~~
    The expected type comes from property 'crossOrigin' which is declared here on type 'LinkHTMLAttributes<HTMLLinkElement>'

[buoyant flint]

it's not camelcased in solidjs.

try

<audio playsinline />
<link crossorigin="anonymous" />

Edit: Looks like both crossOrigin and crossorigin is supported on link with solidjs, but it's not a boolean so you'll have to pass it either anonymous or use-credentials

[timid tiger]

Thank you, that fixed the crossorigin but didn't work for the playsinline:

$ tsc --jsx preserve -t es2020 --outDir js --noEmit false
src/components/MainPlayer.tsx:116:18 - error TS2322: Type '{ children: Element; playsinline: true; }' is not assignable to type 'AudioHTMLAttributes<HTMLAudioElement>'.
  Property 'playsinline' does not exist on type 'AudioHTMLAttributes<HTMLAudioElement>'.

116           <audio playsinline>
                     ~~~~~~~~~~~

[buoyant flint]

What does your tsconfig.json look like?

[timid tiger]

{
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"],
    "noEmit": true,
    "isolatedModules": true
  }
}

[buoyant flint]

Aha. playsinline isn't actually a valid attribute on an audio element. It's only for videos.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

<video>

playsinline
A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen.