feat(image): add support for svelte (#1277)

## Description

Added queries for Svelte as well, based on Vue.

Note that I am not sure if the current HTML queries, which both Vue and
this Svelt query inherits from, is working as intended.

I do not get any sort of inline images. But I guess that will have to be
debugged and fixed in another issue and the fix should not affect this
patch (hopefully).

## Related Issue(s)

Fixes #1275

---------

Co-authored-by: Folke Lemaitre <folke.lemaitre@gmail.com>
This commit is contained in:
Olle Månsson 2025-02-18 16:49:40 +01:00 committed by GitHub
parent 479320cfa9
commit 54ab77c5d2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 19 additions and 2 deletions

View file

@ -24,7 +24,7 @@ Table of Contents *snacks-image-table-of-contents*
- open images in a wide range of formats:
`png`, `jpg`, `jpeg`, `gif`, `bmp`, `webp`, `tiff`, `heic`, `avif`, `mp4`, `mov`, `avi`, `mkv`, `webm`
- Supports inline image rendering in:
`markdown`, `html`, `norg`, `tsx`, `javascript`, `css`, `vue`, `scss`, `latex`, `typst`, `vue`
`markdown`, `html`, `norg`, `tsx`, `javascript`, `css`, `vue`, `svelte`, `scss`, `latex`, `typst`
- LaTex math expressions in `markdown` and `latex` documents
Terminal support:

View file

@ -8,7 +8,7 @@
- open images in a wide range of formats:
`pdf`, `png`, `jpg`, `jpeg`, `gif`, `bmp`, `webp`, `tiff`, `heic`, `avif`, `mp4`, `mov`, `avi`, `mkv`, `webm`
- Supports inline image rendering in:
`markdown`, `html`, `norg`, `tsx`, `javascript`, `css`, `vue`, `scss`, `latex`, `typst`, `vue`
`markdown`, `html`, `norg`, `tsx`, `javascript`, `css`, `vue`, `svelte`, `scss`, `latex`, `typst`
- LaTex math expressions in `markdown` and `latex` documents
Terminal support:

View file

@ -52,6 +52,7 @@ function M.fit(file, cells, opts)
local img_pixels ---@type snacks.image.Size
if opts.info then
local terminal = Snacks.image.terminal.size()
img_pixels = {}
img_pixels.height = opts.info.size.height / opts.info.dpi.height * 96 * terminal.scale
img_pixels.width = opts.info.size.width / opts.info.dpi.width * 96 * terminal.scale
else

View file

@ -0,0 +1,2 @@
; inherits: html
; extends

14
tests/image/test.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
const greeting = "hello";
</script>
<p class="greeting">{greeting}</p>
<img src="test.png" alt="test" />
<style>
.greeting {
color: red;
font-weight: bold;
background: url("test.png");
}
</style>