Add missing fetchpriority property to img on html element

[harrytran998]

Describe the problem

Here the bug:

Object literal may only specify known properties, and 'fetchpriority' does not exist in type 'HTMLProps<"img", HTMLAttributes<any>>'.

Describe the proposed solution

Just add the missing peace? 😆

Alternatives considered

I actually don't have enough knowledge to think of an alternative solution 🥹. Hope anyone can help.

Importance

would make my life easier

[baseballyama]

You need to provide a REPL.

And GitHub issues aren't the right place for support questions like this. Please ask on StackOverflow or in our Discord chat room.

[bdougherty]

@baseballyama this isn't really a support question in that way.

fetchpriority is a new attribute on <img> and <link> that should be recognized by Svelte. It is missing from the declaration here:

svelte/elements/index.d.ts

Line 695 in 967e9f5

export interface HTMLImgAttributes extends HTMLAttributes<HTMLImageElement> {

fetchpriority?: 'high' | 'low' | 'auto' | undefined | null;

I don't really know how to do a REPL for this because the svelte.dev/repl does not report any issue, but svelte-check does. Here is the svelte-check error from my SvelteKit project:

Error: Argument of type '{ src: string; srcset: string; alt: string; loading: "lazy" | undefined; fetchpriority: string | undefined; }' is not assignable to parameter of type 'HTMLProps<"img", HTMLAttributes<any>>'.
  Object literal may only specify known properties, and '"fetchpriority"' does not exist in type 'HTMLProps<"img", HTMLAttributes<any>>'. (ts)
                                        loading={priority ? undefined : 'lazy'}
                                        fetchpriority={priority ? 'high' : undefined}
                                />

All you need to do is add <img src="https://svelte.dev/_app/immutable/assets/stopwar-947a4798.svg" alt="Svelte" fetchpriority="high" /> somewhere.

[jamesarosen]

@bdougherty is correct. This isn't a "tech support" issue. fetchpriority is still experimental, but it does have pretty good browser support. I would expect to be able to use it in a Svelte app.

References:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img
• https://web.dev/fetch-priority/

The excellent @KTibow put together a replication here.

[jamesarosen]

The Svelte docs have a section on Enhancing built-in DOM types. Based off that section, I would expect this workaround to work, but it does not:

declare namespace svelteHTML {
	interface HTMLImgAttributes {
		fetchpriority: "auto" | "low" | "high" | null | undefined
	}
}

[jasonlyu123]

Only chromium support it in the stable release. I don't think it is "have pretty good browser support". Typescript also doesn't have it in their DOM definition. We have an issue with it in the language tools repo. But I declined it because only chromium support it. Although it has been nearly a year since then, The situation is basically the same.

[KTibow]

Around 67% of traffic can use it already, so it would still be useful in the cases where it works. Safari has it behind a flag too. On the other hand, this issue might be resolved by having better documentation on how to extend element types, as it seems most people fail while doing so.

[jamesarosen]

On the other hand, this issue might be resolved by having better documentation on how to extend element types

Agreed. fetchpriority is only one experimental attribute. There are many others and there will be more over the years.

https://www.sveltelab.dev/x81qkcafntbqgd5 shows that the documented method for extending built-in types does not work. (Or that the documentation is insufficiently clear for how to add attributes to one element type.)

[jasonlyu123]

Based off that section, I would expect this workaround to work, but it does not:

Make sure you're putting the declaration in .d.ts that is not a module, i.e. has no import/export. If it's a module, you must wrap it inside a global block like the App namespace in the SvelteKit's app.d.ts. Otherwise, TypeScript will ignore those.

[Zachiah]

Is this something that you guys want getting fixed? People in the discord are asking for first tasks so I was looking for issues with the "good first issue" tag and I found this, but based on the conversation it sounds like you want to wait so I'm unsure about recommending they work on it.

[colinhowells]

TS has absolved me of my crimes against it by my use of an ambient.d.ts file (as Svelte recommends for random NPM packages etc):

//src/ambient.d.ts

declare module '@some/npm-package-you-are-using';
declare module '*.gql'; // if you like standalone GraphQL files, just a tip

declare namespace svelteHTML {
	interface HTMLAttributes<T> {
		fetchpriority?: 'auto' | 'low' | 'high';
	}
}