Custom/arbitrary attributes on script tag cause a type error

[Ingramz]

🐛 The bug

Some scripts may require attributes do not have a data- prefix. It is possible pass them to a script like this:

useScript({
  src: 'https://chat.askly.me/cw/chat/latest.js',
  async: true,
  crossorigin: false,
  'tw-client-key': clientKey,
})

and it will work. However since it is not a recognized key, TypeScript will complain about this.

Documentation shows that there is attributes?: Record<string, string>, however this does not seem to be true either.

🛠️ To reproduce

See above

🌈 Expected behavior

No type errors, either by allowing arbitrary string/string key value pairs or by providing a documented way to augment the type.

ℹ️ Additional context

No response

[harlan-zw]

Hi, thanks for the issue.

I'm not entirely sure what the best solution here is, technically the third party wants you to provide invalid HTML which I'd prefer not to have type support for.

I am open to changing the types if more third parties have this issue, otherwise, I'd recommend just doing a @ts-expect-error

I will need to review the docs on the attributes as this does not seem right.

[Ingramz]

I did end up going with @ts-expect-error as well, which is fine by me as long as this remains the expected workaround for such situation, perhaps a test could be also added such that it wouldn't randomly break down the line.

With types something like this is possible, where autocomplete is preserved but due to accepting any string, typos are not being detected anymore. This is why I think a "I know what I am doing" comment is probably the better way to suppress the error.

type ArbitraryKeys = Record<(string & {}), string>

type UseScriptInput = string | (MaybeComputedRefEntriesOnly<Omit<ScriptBase & DataKeys & ArbitraryKeys & SchemaAugmentations['script'], 'src'>> & {
    src: string;
});