29 lines
798 B
TypeScript
29 lines
798 B
TypeScript
import { unwrapSignalOrValue } from ':src/utils.ts'
|
|
import { Ensure } from ':types'
|
|
import { JSX } from 'preact'
|
|
|
|
export type PictureProps =
|
|
& { formats: string[] }
|
|
& Ensure<JSX.HTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'loading'>
|
|
|
|
export function Picture(
|
|
{ formats, src, ...props }: PictureProps,
|
|
) {
|
|
const groups = unwrapSignalOrValue(src)?.match(/(?<path>.*)(?<ext>\.\w+)/)
|
|
?.groups
|
|
if (groups === undefined) {
|
|
throw new SyntaxError(`unable to parse path of "${src.valueOf()}"`)
|
|
}
|
|
|
|
const { path } = groups
|
|
|
|
return (
|
|
<picture>
|
|
{formats.map((format) => (
|
|
<source type={`image/${format}`} srcset={`${path}.${format}`} />
|
|
))}
|
|
<img src={src} {...props} />
|
|
</picture>
|
|
)
|
|
}
|