Description

When using <MediaQuery> component with an array of queries in query prop, Svelte indicates a cryptic TypeScript error on let:matches destructured property.

How to reproduce

<MediaQuery
        query={['(min-width: 768px) and (max-width: 1023px)', '(min-width: 1024px)']}
	let:matches
>
        <!-- Type error appears here on IDE -->
        {@const [tablet, desktop] = matches}
        <Comp matches={tablet} />
        <OtherComp matches={desktop} />
</MediaQuery>

Expected

No type errors from Svelte.

Actual

Svelte: Type  boolean | QueryArray | ObjectType<any>  must have a  [Symbol.iterator]()  method that returns an iterator.

Thanks by advance for your help!

Hey Nikita!

Nice work on this library. I noticed an issue with dynamic media queries. Compound queries return false, even when the individual queries return true.

Take a look at this screenshot from the REPL and I think you'll understand the issue:

I expected [true, true, true] in that last line.

Thanks again!

it is safe to use in svelte 4 projects?

Failed to resolve entry for package "svelte-media-queries". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "svelte-media-queries" package