types/intellisense for Image params?

[wrex]

First, thank you SO MUCH for putting this together! It's working like a champ for a recent project.

There's an awful lot of magic going on that I don't understand, though. (No surprise -- IANAFED¹. I barely know how any of this stuff actually works).

In an attempt to understand things better, I'm trying to get npm run check to pass for my project. My main sticking point is my Image component, which I stole verbatim from this repository.

I'm pretty sure alt is just a string, but I'd like to provide a JSDOC @type directive for src. I can see that it's an Object with properties of sources and fallback at least, but is this just a contract between the calling pages and the component, or is there some library documentation somewhere that explains the interface?

I'm getting lost going down the rabbit-hole with svelte-preprocess-import-assets, vite asset handling, and svelte-imagetools. Or maybe I should be looking at sharp?

Anyway, apologies for such a poorly worded issue, but I'm driving myself nuts trying to figure this out. I'm pretty sure I can create type definitions that will at least get npm run check to pass, but I'd really like to understand this better.

TIA!

---

For what it's worth, this got npm run check to shut up, but I'm not exactly confident this is correct:

<script>
	/** @typedef {{ [format: string]: HTMLImageElement[] }} FormatSources */
	/** @typedef {{ sources: FormatSources, fallback:  HTMLImageElement }} ImageSource */
	
	/** @type {ImageSource} */
	export let src;
	
	/** @type string */
	export let alt;
</script>

<picture>
	{#each Object.entries(src.sources) as [format, images]}
		<source
			srcset={images.map((i) => `${i.src}`).join(', ')}
			type={'image/' + format}
		/>
	{/each}
	<img src={src.fallback.src} {alt} loading="lazy" />
	<!-- https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#images_and_iframes -->
</picture>

<style>
	img {
		margin: auto;
	}
</style>

Footnotes

1. I am not a front-end developer ↩

[rdela]

So happy you are getting use out of this and while I don't have a ready answer for you I bet asking in the Svelte Discord chat would yield results. If you don't want to post it there I will.

[wrex]

I should have thought of that. I will, and I'll just point to this thread rather than rewrite ite. Thanks!

[rdela]

hi @wrex not sure how it went in the discord, but in working on the docs for #1 I dove deeper into the (now closed) Imagetools PR (#421) with an updated sveltekit example and this images.d.ts file (diff in PR) should be of particular interest. I may try to incorporate some of these examples into this repo, but in the meantime thought I would point that out for you and anyone else who finds this issue.

[wrex]

Awesome! Thank you.

I asked in discord but didn't get a response (likely because I worded the question poorly, but I did link to this thread).

[rdela]

Sorry the Discord didn't work out, I have found it less helpful since it was reorganized. Your question is important but elusive due to the lack of examples and docs (the reason for this repo). After my cursory scan of that PR I think we should incorporate the more in depth JonasKruckenberg/imagetools#421 examples, and getting check to pass will be beneficial to validate those.

[rdela]

sveltejs/kit#241 (comment)