Телеграмм чат группы sveltejs страница 8591

Size: a a a

Svelte [svelt] - All about Svelte JavaScript framework.

2021 November 06

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Внутри компонента

<script>
  export let var = "red";
</script>

<div class="element" style="—some-var: {var}" />

<style>
  .element {
    color: var(—some-var);
  }
</style>

источник

02:13пожаловаться #1

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

У всех инстансов будет идентичный CSS, но атррибут на style разный, задача с пробросом переменных из JS в CSS решена.

источник

02:15пожаловаться #2

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Можно даже под свои нужны написать какой-нибудь хелпер для генерирования строки с переменными.

источник

02:15пожаловаться #3

M S in Svelte [svelt] - All about Svelte JavaScript framework.

Проверил. Собака он бешеная. Действительно переписывает для всех инстансов. Смысл тогда в нем?

источник

02:17пожаловаться #4

Alexander Ponomarev in Svelte [svelt] - All about Svelte JavaScript framework.

Потому что в его названии есть свелт и поэтому его постят в канал. А то что большинство поделок на гитхабе это шлак никто не задумывается)

источник

02:18пожаловаться #5

M S in Svelte [svelt] - All about Svelte JavaScript framework.

Понял, спасибо. Хеши разные при этом?

источник

02:19пожаловаться #6

Alexander Ponomarev in Svelte [svelt] - All about Svelte JavaScript framework.

нету никаких хешей

источник

02:19пожаловаться #7

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Стили те же, переменные долетают из инлайновых стилей с аттрибута style.

источник

02:19пожаловаться #8

Alexander Ponomarev in Svelte [svelt] - All about Svelte JavaScript framework.

как назовешь переменную так она и будет называться

источник

02:20пожаловаться #9

M S in Svelte [svelt] - All about Svelte JavaScript framework.

не понял. Сейчас проверю

источник

02:20пожаловаться #10

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Да, хэши тут не при чем. Всё с инлайна долетает в компонент.

источник

02:20пожаловаться #11

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Переменные у всех прописаны в стилях компонента, но их значения в аттрибуре style на ДОМ ноде будут отличаться.

источник

02:21пожаловаться #12

Аидрфй in Svelte [svelt] - All about Svelte JavaScript framework.

Всем доброй ночи. Хотел спросить, возможно ли сделать двухсторонний биндинг derived стора? Задача: у меня есть стор, в нем массив, и derived стор с элементом из массива. Как сделать так чтобы при изменении derived стора изменялся и стор с массивом?

источник

02:28пожаловаться #13

M S in Svelte [svelt] - All about Svelte JavaScript framework.

Ага. Разобрался. Да, работает трюк. Спасибо

источник

02:29пожаловаться #14

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

👍

источник

02:30пожаловаться #15

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Вроде бы derived стор, как я это сейчас понимаю, используется для цепочки реактивности. Он меняется вслед за родительским стором. Думаю, в зависимости от задачи стоит подумать над кастомным стором.

источник

02:32пожаловаться #16

M S in Svelte [svelt] - All about Svelte JavaScript framework.

Получается, и не нужен нафиг тот препроцессор, правда только лишние строки придется добавлять в элементы

источник

02:32пожаловаться #17

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Да, так точно. Я для себя пишу хелперы для этих строк. Ещё есть возможность не писать всего этого, но там есть, кхм, нюанс в виде лишней обертки. Сейчас скину ссылку с доки.

источник

02:33пожаловаться #18

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

https://svelte.dev/docs#style_props

svelte.dev

Svelte API docs

Cybernetically enhanced web apps

источник

02:33пожаловаться #19

Eric Rovell in Svelte [svelt] - All about Svelte JavaScript framework.

Абсолютно тот же подход, но свелт обернет компонент в div, не влияющий на разметку. Ну как сказать, вешает display: contents; В целом, работает, но с этим есть какие-то баги с доступностью в хроме, может исправили, так что на свой страх и риск. Не придется писать строки для переменных, свелт сам сделает.

источник

02:35пожаловаться #20