Svelte

Чтобы попробовать Svelte в интерактивной онлайн-среде, вы можете попробовать REPL или StackBlitz.

Для создания проекта локально мы рекомендуем использовать SvelteKit, официальный фреймворк для приложений от команды Svelte:

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

Компоненты — это строительные блоки приложений Svelte. Они записываются в файлы .svelte, используя расширение HTML.

Все три раздела — сценарий, стили и разметка — необязательны.

<script>
	// logic goes here
</script>

<!-- markup (zero or more items) goes here -->

<style>
	/* styles go here */
</style>

Svelte использует ключевое слово export для обозначения переменной как свойства или параметра, что означает, что оно станет доступным для потребителей компонента (см. раздел о атрибутах и параметрах для получения дополнительной информации).

<script>
	export let foo;

	// Values that are passed in as props
	// are immediately available
	console.log({ foo });
</script>

Вы можете указать значение по умолчанию для свойства. Оно будет использоваться, если потребитель компонента не указывает свойство (или если его начальное значение равно undefined) при создании компонента. Обратите внимание, что при удалении свойства потребителем его значение устанавливается в undefined, а не в начальное значение.

В режиме разработки (см. опции компилятора) будет выведено предупреждение, если начальное значение по умолчанию не указано, и потребитель не указывает значение. Чтобы подавить это предупреждение, убедитесь, что указано начальное значение по умолчанию, даже если оно равно undefined.

<script>
	export let bar = 'optional default initial value';
	export let baz = undefined;
</script>

Если вы экспортируете const, class или function, оно будет только для чтения снаружи компонента. Функции являются допустимыми значениями свойств, как показано ниже.

<script>
	// these are readonly
	export const thisIs = 'readonly';

	export function greet(name) {
		alert(`hello ${name}!`);
	}

	// this is a prop
	export let format = n => n.toFixed(2);
</script>

Вы можете использовать зарезервированные слова в качестве имён свойств.

<script>
	let className;

	// creates a `class` property, even
	// though it is a reserved word
	export { className as class };
</script>

Для изменения состояния компонента и запуска перерисовки достаточно присвоить значение локально объявленной переменной.

Выражения обновления (count += 1) и присваивания свойств (obj.x = y) имеют тот же эффект.

<script>
	let count = 0;

	function handleClick () {
		// calling this function will trigger an
		// update if the markup references `count`
		count = count + 1;
	}
</script>

Поскольку реактивность Svelte основана на присваиваниях, использование методов массивов, таких как .push() и .splice(), не вызовет автоматических обновлений. Для запуска обновления требуется последующее присваивание. Подробности об этом и многом другом можно найти в учебнике.

<script>
	let arr = [0, 1];

	function handleClick () {
		// this method call does not trigger an update
		arr.push(2);
		// this assignment will trigger an update
		// if the markup references `arr`
		arr = arr
	}
</script>

Блоки <script> Svelte выполняются только при создании компонента, поэтому присваивания внутри блока <script> не выполняются автоматически повторно при обновлении свойства. Если вам нужно отслеживать изменения свойства, см. следующий пример в следующем разделе.

<script>
	export let person;
	// this will only set `name` on component creation
	// it will not update when `person` does
	let { name } = person;
</script>

Любой оператор верхнего уровня (т. е. не внутри блока или функции) может быть сделан реактивным, добавив префикс $: синтаксис JS метки. Реактивные операторы выполняются после других кодов сценария и перед отрисовкой разметки компонента, всякий раз, когда изменяются значения, от которых они зависят.

<script>
	export let title;
	export let person

	// this will update `document.title` whenever
	// the `title` prop changes
	$: document.title = title;

	$: {
		console.log(`multiple statements can be combined`);
		console.log(`the current title is ${title}`);
	}

	// this will update `name` when 'person' changes
	$: ({ name } = person);

	// don't do this. it will run before the previous line
	let name2 = name;
</script>

Только значения, которые непосредственно появляются внутри блока $:, станут зависимостями реактивного оператора. Например, в коде ниже total обновится только тогда, когда x изменится, но не y.

<script>
	let x = 0;
	let y = 0;
	
	function yPlusAValue(value) {
		return value + y;
	}
	
	$: total = yPlusAValue(x);
</script>

Total: {total}
<button on:click={() => x++}>
	Increment X
</button>

<button on:click={() => y++}>
	Increment Y
</button>

Важно отметить, что реактивные блоки упорядочиваются с помощью простого статического анализа на этапе компиляции, и все, что анализирует компилятор, — это переменные, которым присваиваются значения и которые используются в самом блоке, а не в любых функциях, вызываемых ими. Это означает, что yDependent не будет обновляться при обновлении x в следующем примере:

<script>
	let x = 0;
	let y = 0;
	
	const setY = (value) => {
		y = value;
	}
	
	$: yDependent = y;
	$: setY(x);
</script>

Если оператор состоит целиком из присваивания необъявленной переменной, Svelte вставит объявление let от вашего имени.

<script>
	export let num;

	// we don't need to declare `squared` and `cubed`
	// — Svelte does it for us
	$: squared = num * num;
	$: cubed = squared * num;
</script>

Хранилище — это объект, который позволяет получать доступ к значению с помощью простого контракта хранилища. Модуль svelte/store содержит минимальные реализации хранилищ, которые соответствуют этому контракту.

Всякий раз, когда у вас есть ссылка на хранилище, вы можете получить доступ к его значению внутри компонента, добавив префикс $. Это заставляет Svelte объявлять префиксную переменную, подписываться на хранилище при инициализации компонента и отписываться при необходимости.

Присваивания к переменным с префиксом $ требуют, чтобы переменная была записываемым хранилищем, и приведут к вызову метода .set хранилища.

Обратите внимание, что хранилище должно быть объявлено на верхнем уровне компонента — не внутри блока if или функции, например.

Локальные переменные (которые не представляют значения хранилища) не должны иметь префикс $.

<script>
	import { writable } from 'svelte/store';

	const count = writable(0);
	console.log($count); // logs 0

	count.set(1);
	console.log($count); // logs 1

	$count = 2;
	console.log($count); // logs 2
</script>

Тег <script> с атрибутом context="module" выполняется один раз при первом вычислении модуля, а не для каждого экземпляра компонента. Значения, объявленные в этом блоке, доступны из обычного <script> (и разметки компонента), но не наоборот.

Вы можете export привязки из этого блока, и они станут экспортами скомпилированного модуля.

Вы не можете export default, так как экспорт по умолчанию — это сам компонент.

Переменные, определённые в скриптах module, не реактивные — повторное присваивание не вызовет перерисовку, хотя сама переменная обновится. Для значений, общих для нескольких компонентов, рассмотрите использование хранилища.

<script context="module">
	let totalComponents = 0;

	// this allows an importer to do e.g.
	// `import Example, { alertTotal } from './Example.svelte'`
	export function alertTotal() {
		alert(totalComponents);
	}
</script>

<script>
	totalComponents += 1;
	console.log(`total number of times this component has been created: ${totalComponents}`);
</script>

CSS внутри блока <style> будет ограничен этим компонентом.

Это работает путём добавления класса к затронутым элементам, который основан на хеше стилей компонента (например, svelte-123xyz).

<style>
	p {
		/* this will only affect <p> elements in this component */
		color: burlywood;
	}
</style>

Чтобы применить стили к селектору глобально, используйте модификатор :global(...).

<style>
	:global(body) {
		/* this will apply to <body> */
		margin: 0;
	}

	div :global(strong) {
		/* this will apply to all <strong> elements, in any
			 component, that are inside <div> elements belonging
			 to this component */
		color: goldenrod;
	}

	p:global(.red) {
		/* this will apply to all <p> elements belonging to this 
			 component with a class of red, even if class="red" does
			 not initially appear in the markup, and is instead 
			 added at runtime. This is useful when the class 
			 of the element is dynamically applied, for instance 
			 when updating the element's classList property directly. */
	}
</style>

Если вы хотите сделать @keyframes доступными глобально, вам нужно добавить префикс к именам ваших keyframes с помощью -global-.

Часть -global- будет удалена при компиляции, и к keyframe будет обращаться только с помощью my-animation-name в других частях вашего кода.

<style>
	@keyframes -global-my-animation-name {...}
</style>

В компоненте должен быть только 1 тег верхнего уровня <style>.

Однако, можно иметь тег <style>, вложенный внутри других элементов или блоков логики.

В этом случае тег <style> будет вставлен в DOM как есть, никакой обработки или анализа тега <style> не будет производиться.

<div>
	<style>
		/* this style tag will be inserted as-is */
		div {
			/* this will apply to all `<div>` elements in the DOM */
			color: red;
		}
	</style>
</div>

Тег в нижнем регистре, например <div>, обозначает обычный HTML-элемент. Заглавный тег, такой как <Widget> или <Namespace.Widget>, указывает на компонент.

<script>
	import Widget from './Widget.svelte';
</script>

<div>
	<Widget/>
</div>

По умолчанию атрибуты работают точно так же, как и их HTML-аналоги.

<div class="foo">
	<button disabled>can't touch this</button>
</div>

Как и в HTML, значения могут быть не заключены в кавычки.

<input type=checkbox>

Значения атрибутов могут содержать JavaScript-выражения.

<a href="page/{p}">page {p}</a>

Или они могут быть JavaScript-выражениями.

<button disabled={!clickable}>...</button>

Булевы атрибуты включаются в элемент, если их значение является истинным, и исключаются, если оно является ложным.

Все остальные атрибуты включаются, если их значение не является нулевым (null или undefined).

<input required={false} placeholder="This input field is not required">
<div title={null}>This div has no title attribute</div>

Выражение может содержать символы, которые приведут к сбоям в подсветке синтаксиса в обычном HTML, поэтому разрешается заключать значение в кавычки. Кавычки не влияют на то, как значение анализируется:

<button disabled="{number !== 42}">...</button>

Когда имя и значение атрибута совпадают (name={name}), их можно заменить на {name}.

<!-- These are equivalent -->
<button disabled={disabled}>...</button>
<button {disabled}>...</button>

По соглашению, значения, передаваемые компонентам, называются свойствами или props, а не атрибутами, которые являются функцией DOM.

Как и для элементов, name={name} можно заменить сокращением {name}.

<Widget foo={bar} answer={42} text="hello"/>

Распределенные атрибуты позволяют передавать сразу множество атрибутов или свойств элементу или компоненту.

Элемент или компонент может иметь несколько распределенных атрибутов, перемежающихся с обычными.

<Widget {...things}/>

$$props ссылается на все свойства, передаваемые компоненту, включая те, которые не объявлены с export. В целом не рекомендуется, так как затрудняет оптимизацию Svelte. Однако в редких случаях может быть полезно – например, когда на этапе компиляции не известно, какие свойства могут быть переданы компоненту.

<Widget {...$$props}/>

$$restProps содержит только те свойства, которые не объявлены с помощью export. Его можно использовать для передачи других неизвестных атрибутов элементу внутри компонента. Он имеет те же проблемы с оптимизацией, что и $$props, и также не рекомендуется.

<input {...$$restProps}>

Выражения текста

{expression}

Текст также может содержать JavaScript-выражения:

Если вы используете регулярное выражение (RegExp) в виде литерала, вам нужно заключить его в скобки.

<h1>Hello {name}!</h1>
<p>{a} + {b} = {a + b}.</p>

<div>{(/^[A-Za-z ]+$/).test(value) ? x : y}</div>

Внутри компонентов можно использовать HTML-комментарии.

<!-- this is a comment! -->
<h1>Hello world</h1>

Комментарии, начинающиеся с svelte-ignore, отключают предупреждения для следующего блока разметки. Обычно это предупреждения по обеспечению доступности; убедитесь, что вы отключаете их по уважительной причине.

<!-- svelte-ignore a11y-autofocus -->
<input bind:value={name} autofocus>

Условный контент можно заключить в блок if.

{#if answer === 42}
	<p>what was the question?</p>
{/if}

Дополнительные условия можно добавить с помощью {:else if expression}, необязательно завершая блоком {:else}.

{#if porridge.temperature > 100}
	<p>too hot!</p>
{:else if 80 > porridge.temperature}
	<p>too cold!</p>
{:else}
	<p>just right!</p>
{/if}

Итерацию по спискам значений можно выполнять с помощью блока each.

<h1>Shopping list</h1>
<ul>
	{#each items as item}
		<li>{item.name} x {item.qty}</li>
	{/each}
</ul>

Блок each также может указывать индекс, эквивалентный второму аргументу в вызове array.map(...):

{#each items as item, i}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Если указано выражение ключ — которое должно однозначно идентифицировать каждый элемент списка — Svelte будет использовать его для сравнения списка при изменении данных, а не добавления или удаления элементов в конце. Ключ может быть любым объектом, но рекомендуется использовать строки и числа, так как они позволяют сохранить идентичность при изменении самих объектов.

{#each items as item (item.id)}
	<li>{item.name} x {item.qty}</li>
{/each}

<!-- or with additional index value -->
{#each items as item, i (item.id)}
	<li>{i + 1}: {item.name} x {item.qty}</li>
{/each}

Вы можете свободно использовать деструктуризацию и остаточные шаблоны в блоках each.

{#each items as { id, name, qty }, i (id)}
	<li>{i + 1}: {name} x {qty}</li>
{/each}

{#each objects as { id, ...rest }}
	<li><span>{id}</span><MyComponent {...rest}/></li>
{/each}

{#each items as [id, ...rest]}
	<li><span>{id}</span><MyComponent values={rest}/></li>
{/each}

Блок each также может иметь блок {:else}, который отображается, если список пуст.

{#each todos as todo}
	<p>{todo.text}</p>
{:else}
	<p>No tasks today!</p>
{/each}

Блоки await позволяют ветвиться в зависимости от трёх возможных состояний Promise — ожидании, выполнении или отклонении. В режиме SSR на сервере будет отображаться только состояние ожидания.

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}

Блок catch можно опустить, если вам не нужно ничего отображать при отклонении обещания (или отклонение невозможно).

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{/await}

Если состояние ожидания вас не интересует, вы также можете опустить начальный блок.

{#await promise then value}
	<p>The value is {value}</p>
{/await}

Аналогично, если вы хотите отобразить только состояние ошибки, можно опустить блок then.

{#await promise catch error}
	<p>The error is {error}</p>
{/await}

Это полезно, если вы хотите, чтобы элемент воспроизводил свой переход всякий раз, когда значение изменяется.

{#key value}
	<div transition:fade>{value}</div>
{/key}

При использовании вокруг компонентов это приведет к их повторной инициализации.

{#key value}
	<Component />
{/key}

В текстовом выражении символы, такие как < и >, экранируются; однако в выражениях HTML они не экранируются.

Выражение должно быть допустимым автономным HTML — {@html "<div>"}content{@html "</div>"} не сработает, потому что </div> не является допустимым HTML. Также оно не будет компилировать код Svelte.

Svelte не очищает выражения перед вставкой HTML. Если данные поступают из ненадежного источника, вы должны очистить их, иначе вы подвергаете своих пользователей уязвимости XSS.

<div class="blog-post">
	<h1>{post.title}</h1>
	{@html post.content}
</div>

Тег {@debug ...} предлагает альтернативу console.log(...). Он регистрирует значения определённых переменных всякий раз, когда они изменяются, и приостанавливает выполнение кода, если у вас открыты инструменты разработчика.

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

{@debug ...} принимает список переменных, разделённых запятыми (не произвольные выражения).

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

Тег {@const ...} определяет локальную константу.

<script>
	export let boxes;
</script>

{#each boxes as box}
	{@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}

Используйте директиву on: для прослушивания событий DOM.

<script>
	let count = 0;

	function handleClick(event) {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	count: {count}
</button>

Обработчики могут быть объявлены непосредственно без потери производительности. Как и в случае с атрибутами, значения директив могут быть заключены в кавычки для удобства выделения синтаксиса.

<button on:click="{() => count += 1}">
	count: {count}
</button>

Добавляйте модификаторы к событиям DOM с помощью символа |.

<form on:submit|preventDefault={handleSubmit}>
	<!-- the `submit` event's default is prevented,
	     so the page won't reload -->
</form>

Если директива on: используется без значения, компонент передаст событие, что означает, что потребитель компонента может его прослушивать.

<button on:click>
	The component itself will emit the click event
</button>

Возможно иметь несколько обработчиков событий для одного и того же события:

<script>
	let counter = 0;
	function increment() {
		counter = counter + 1;
	}

	function track(event) {
		trackEvent(event)
	}
</script>

<button on:click={increment} on:click={track}>Click me!</button>

Данные обычно передаются сверху вниз, от родителя к дочернему элементу. Директива bind: позволяет данным передаваться в обратном направлении, от дочернего к родительскому элементу. Большинство привязок специфичны для конкретных элементов.

Самые простые привязки отражают значение свойства, например, input.value.

<input bind:value={name}>
<textarea bind:value={text}></textarea>

<input type="checkbox" bind:checked={yes}>

Если имя совпадает со значением, можно использовать сокращённую запись.

<!-- These are equivalent -->
<input bind:value={value}>
<input bind:value>

Значения числовых вводных данных приводятся к нужному типу; хотя input.value является строкой с точки зрения DOM, Svelte будет обрабатывать его как число. Если ввод пустой или недействительный (в случае type="number"), значение равно undefined.

<input type="number" bind:value={num}>
<input type="range" bind:value={num}>

В элементах <input> с type="file", вы можете использовать bind:files для получения FileList выбранных файлов. Оно является только для чтения.

<label for="avatar">Upload a picture:</label>
<input
	accept="image/png, image/jpeg"
	bind:files
	id="avatar"
	name="avatar"
	type="file"
/>

Если вы используете директивы bind: вместе с директивами on:, порядок их определения влияет на значение связанной переменной при вызове обработчика событий.

<script>
	let value = 'Hello World';
</script>

<input
	on:input="{() => console.log('Old value:', value)}"
	bind:value
	on:input="{() => console.log('New value:', value)}"
/>

Привязка значения <select> соответствует свойству value выбранного элемента <option>, которое может быть любым значением (не только строками, как обычно в DOM).

<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b}>b</option>
	<option value={c}>c</option>
</select>

Элемент <select multiple> ведет себя аналогично группе флажков.

<select multiple bind:value={fillings}>
	<option value="Rice">Rice</option>
	<option value="Beans">Beans</option>
	<option value="Cheese">Cheese</option>
	<option value="Guac (extra)">Guac (extra)</option>
</select>

Когда значение элемента <option> совпадает с его текстовым содержимым, атрибут можно опустить.

<select multiple bind:value={fillings}>
	<option>Rice</option>
	<option>Beans</option>
	<option>Cheese</option>
	<option>Guac (extra)</option>
</select>

Элементы с атрибутом contenteditable поддерживают привязки innerHTML и textContent.

<div contenteditable="true" bind:innerHTML={html}></div>

Элементы <details> поддерживают привязку к свойству open.

<details bind:open={isOpen}>
	<summary>Details</summary>
	<p>
		Something small enough to escape casual notice.
	</p>
</details>

Медиа-элементы (<audio> и <video>) имеют свой собственный набор привязок — шесть только для чтения...

• duration (только для чтения) — общая продолжительность видео в секундах
• buffered (только для чтения) — массив объектов {start, end}
• played (только для чтения) — то же самое
• seekable (только для чтения) — то же самое
• seeking (только для чтения) — булево значение
• ended (только для чтения) — булево значение

...и пять двусторонних привязок:

• currentTime — текущее время воспроизведения видео в секундах
• playbackRate — скорость воспроизведения видео, где 1 — нормальная скорость
• paused — это должно быть очевидно
• volume — значение от 0 до 1
• muted — булево значение, указывающее, заглушен ли плеер

Видео также имеют только для чтения привязки videoWidth и videoHeight.

<video
	src={clip}
	bind:duration
	bind:buffered
	bind:played
	bind:seekable
	bind:seeking
	bind:ended
	bind:currentTime
	bind:playbackRate
	bind:paused
	bind:volume
	bind:muted
	bind:videoWidth
	bind:videoHeight
></video>

Элементы блочного уровня имеют 4 привязки только для чтения, измеряемые с помощью техники, аналогичной этой:

• clientWidth
• clientHeight
• offsetWidth
• offsetHeight

<div
	bind:offsetWidth={width}
	bind:offsetHeight={height}
>
	<Chart {width} {height}/>
</div>

Взаимодействующие элементы могут использовать bind:group.

<script>
	let tortilla = 'Plain';
	let fillings = [];
</script>

<!-- grouped radio inputs are mutually exclusive -->
<input type="radio" bind:group={tortilla} value="Plain">
<input type="radio" bind:group={tortilla} value="Whole wheat">
<input type="radio" bind:group={tortilla} value="Spinach">

<!-- grouped checkbox inputs populate an array -->
<input type="checkbox" bind:group={fillings} value="Rice">
<input type="checkbox" bind:group={fillings} value="Beans">
<input type="checkbox" bind:group={fillings} value="Cheese">
<input type="checkbox" bind:group={fillings} value="Guac (extra)">

Чтобы получить ссылку на узел DOM, используйте bind:this.

<script>
	import { onMount } from 'svelte';

	let canvasElement;

	onMount(() => {
		const ctx = canvasElement.getContext('2d');
		drawStuff(ctx);
	});
</script>

<canvas bind:this={canvasElement}></canvas>

Директива class: предоставляет более короткий способ переключения класса на элементе.

<!-- These are equivalent -->
<div class="{active ? 'active' : ''}">...</div>
<div class:active={active}>...</div>

<!-- Shorthand, for when name and value match -->
<div class:active>...</div>

<!-- Multiple class toggles can be included -->
<div class:active class:inactive={!active} class:isAdmin>...</div>

Директива style: предоставляет сокращенную запись для установки нескольких стилей на элементе.

<!-- These are equivalent -->
<div style:color="red">...</div>
<div style="color: red;">...</div>

<!-- Variables can be used -->
<div style:color={myColor}>...</div>

<!-- Shorthand, for when property and variable name match -->
<div style:color>...</div>

<!-- Multiple styles can be included -->
<div style:color style:width="12rem" style:background-color={darkMode ? "black" : "white"}>...</div>

<!-- Styles can be marked as important -->
<div style:color|important="red">...</div>

Когда директивы style: комбинируются с атрибутами style, директивы имеют приоритет:

<div style="color: blue;" style:color="red">This will be red</div>

Действия — это функции, которые вызываются при создании элемента. Они могут возвращать объект с методом destroy, который вызывается после размонтирования элемента:

<script>
	function foo(node) {
		// the node has been mounted in the DOM

		return {
			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo></div>

Действие может иметь параметр. Если возвращаемое значение имеет метод update, он будет вызываться всякий раз, когда этот параметр изменяется, сразу после того, как Svelte применит обновления к разметке.

Не беспокойтесь о том, что мы объявляем функцию foo заново для каждой инстанции компонента — Svelte поднимет вверх любые функции, которые не зависят от локального состояния, из определения компонента.

<script>
	export let bar;

	function foo(node, bar) {
		// the node has been mounted in the DOM

		return {
			update(bar) {
				// the value of `bar` has changed
			},

			destroy() {
				// the node has been removed from the DOM
			}
		};
	}
</script>

<div use:foo={bar}></div>

Переход запускается, когда элемент входит в DOM или покидает его в результате изменения состояния.

Когда блок переходит наружу, все элементы внутри блока, включая те, у которых нет собственных переходов, остаются в DOM до завершения каждого перехода в блоке.

Директива transition: обозначает двусторонний переход, что означает, что он может быть плавно обращен во время перехода.

{#if visible}
	<div transition:fade>
		fades in and out
	</div>
{/if}

Как и действия, переходы могут иметь параметры.

(Двойные {{curlies}} — не особый синтаксис; это объект литерал внутри тега выражения.)

{#if visible}
	<div transition:fade="{{ duration: 2000 }}">
		fades in and out over two seconds
	</div>
{/if}

Переходы могут использовать пользовательские функции. Если возвращаемый объект имеет функцию css, Svelte создаст анимацию CSS, которая будет воспроизводиться на элементе.

Аргумент t, переданный функции css, представляет собой значение от 0 до 1 после применения функции easing. Переходы вход выполняются от 0 до 1, выход — от 1 до 0 — другими словами, 1 — это естественное состояние элемента, как будто переход не был применен. Аргумент u равен 1 - t.

Функция вызывается многократно перед началом перехода с различными аргументами t и u.

<script>
	import { elasticOut } from 'svelte/easing';

	export let visible;

	function whoosh(node, params) {
		const existingTransform = getComputedStyle(node).transform.replace('none', '');

		return {
			delay: params.delay || 0,
			duration: params.duration || 400,
			easing: params.easing || elasticOut,
			css: (t, u) => `transform: ${existingTransform} scale(${t})`
		};
	}
</script>

{#if visible}
	<div in:whoosh>
		whooshes in
	</div>
{/if}

Пользовательская функция перехода также может возвращать функцию tick, которая вызывается во время перехода с теми же аргументами t и u.

Если возможно использовать css вместо tick, делайте это — анимации CSS могут выполняться вне основного потока, предотвращая подтормаживание на медленных устройствах.

<script>
	export let visible = false;

	function typewriter(node, { speed = 1 }) {
		const valid = (
			node.childNodes.length === 1 &&
			node.childNodes[0].nodeType === Node.TEXT_NODE
		);

		if (!valid) {
			throw new Error(`This transition only works on elements with a single text node child`);
		}

		const text = node.textContent;
		const duration = text.length / (speed * 0.01);

		return {
			duration,
			tick: t => {
				const i = ~~(text.length * t);
				node.textContent = text.slice(0, i);
			}
		};
	}
</script>

{#if visible}
	<p in:typewriter="{{ speed: 1 }}">
		The quick brown fox jumps over the lazy dog
	</p>
{/if}

Элемент с переходами будет генерировать следующие события помимо стандартных событий DOM:

• introstart
• introend
• outrostart
• outroend

{#if visible}
	<p
		transition:fly="{{ y: 200, duration: 2000 }}"
		on:introstart="{() => status = 'intro started'}"
		on:outrostart="{() => status = 'outro started'}"
		on:introend="{() => status = 'intro ended'}"
		on:outroend="{() => status = 'outro ended'}"
	>
		Flies in and out
	</p>
{/if}

Локальные переходы воспроизводятся только при создании или уничтожении блока, к которому они относятся, а не при создании или уничтожении родительских блоков.

{#if x}
	{#if y}
		<p transition:fade>
			fades in and out when x or y change
		</p>

		<p transition:fade|local>
			fades in and out only when y changes
		</p>
	{/if}
{/if}

Аналогично transition:, но применяется только к элементам, входящим (in:) или выходящим (out:) из DOM.

В отличие от transition:, переходы, применённые с помощью in: и out:, не являются двусторонними — переход входа будет продолжать «воспроизводиться» вместе с выходом, а не отменяться, если блок будет выведен из отображения во время перехода. Если переход выхода прерван, переходы начнут выполняться заново.

{#if visible}
	<div in:fly out:fade>
		flies in, fades out
	</div>
{/if}

Анимация запускается при изменении порядка содержимого блока keyed each. Анимации не выполняются, когда элемент добавляется или удаляется, а только когда индекс существующего элемента данных внутри блока each изменяется. Директивы анимации должны быть на элементе, являющемся непосредственным потомком блока each.

Анимации могут использоваться с встроенными функциями анимации Svelte или пользовательскими функциями анимации.

<!-- When `list` is reordered the animation will run-->
{#each list as item, index (item)}
	<li animate:flip>{item}</li>
{/each}

Как и действия, анимации могут иметь параметры.

(Двойные {{curlies}} — не особый синтаксис; это объект литерал внутри тега выражения.)

{#each list as item, index (item)}
	<li animate:flip="{{ delay: 500 }}">{item}</li>
{/each}

Анимации могут использовать пользовательские функции, принимающие в качестве аргументов node, объект animation и любые дополнительные аргументы parameters. Параметр animation — это объект, содержащий свойства from и to, каждое из которых содержит DOMRect, описывающий геометрию элемента в его начальном и конечном положениях. Свойство from — DOMRect элемента в начальном положении, а свойство to — DOMRect элемента в конечном положении после переупорядочения списка и обновления DOM.

Если возвращаемый объект имеет метод css, Svelte создаст анимацию CSS, которая будет воспроизводиться на элементе.

Аргумент t, переданный функции css, — это значение, изменяющееся от 0 до 1 после применения функции easing. Аргумент u равен 1 - t.

Функция вызывается многократно перед началом анимации с различными аргументами t и u.

<script>
	import { cubicOut } from 'svelte/easing';

	function whizz(node, { from, to }, params) {

		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
			delay: 0,
			duration: Math.sqrt(d) * 120,
			easing: cubicOut,
			css: (t, u) =>
				`transform: translate(${u * dx}px, ${u * dy}px) rotate(${t*360}deg);`
		};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

Пользовательская функция анимации также может возвращать функцию tick, которая вызывается во время анимации с теми же аргументами t и u.

Если возможно использовать css вместо tick, сделайте это — анимации CSS могут выполняться вне основного потока, предотвращая рывки на медленных устройствах.

<script>
	import { cubicOut } from 'svelte/easing';

	function whizz(node, { from, to }, params) {

		const dx = from.left - to.left;
		const dy = from.top - to.top;

		const d = Math.sqrt(dx * dx + dy * dy);

		return {
		delay: 0,
		duration: Math.sqrt(d) * 120,
		easing: cubicOut,
		tick: (t, u) =>
			Object.assign(node.style, {
				color: t > 0.5 ? 'Pink' : 'Blue'
			});
	};
	}
</script>

{#each list as item, index (item)}
	<div animate:whizz>{item}</div>
{/each}

Компоненты могут генерировать события, используя createEventDispatcher, или передавая события DOM. Прослушивание событий компонентов выглядит так же, как прослушивание событий DOM:

<SomeComponent on:whatever={handler}/>

Как и в случае с событиями DOM, если используется директива on: без значения, компонент перенаправит событие, что означает, что потребитель компонента может его прослушивать.

<SomeComponent on:whatever/>

Вы также можете передавать стили как свойства компонентов для целей оформления, используя пользовательские свойства CSS.

Реализация Svelte по существу является синтаксическим сахаром для добавления обертки. Этот пример:

<Slider
  bind:value
  min={0}
  --rail-color="black"
  --track-color="rgb(0, 0, 255)"
/>

Десугаривается до этого:

<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
  <Slider
    bind:value
    min={0}
    max={100}
  />
</div>

Для пространства имён SVG вышеприведённый пример десугаривается, используя <g> вместо этого:

<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>

Поддержка переменных CSS в Svelte позволяет легко создавать темы для компонентов:

<!-- Slider.svelte -->
<style>
  .potato-slider-rail {
    background-color: var(--rail-color, var(--theme-color, 'purple'));
  }
</style>

Таким образом, вы можете установить цвет темы высокого уровня:

/* global.css */
html {
  --theme-color: black;
}

Или переопределить его на уровне потребителя:

<Slider --rail-color="goldenrod"/>

Вы можете привязать свойства компонентов, используя тот же синтаксис, что и для элементов.

<Keypad bind:value={pin}/>

Компоненты также поддерживают bind:this, что позволяет взаимодействовать с экземплярами компонентов программно.

Обратите внимание, что мы не можем сделать {cart.empty}, так как cart является undefined, когда кнопка впервые отрисовывается, и это приводит к ошибке.

<ShoppingCart bind:this={cart}/>

<button on:click={() => cart.empty()}>
	Empty shopping cart
</button>

Компоненты могут содержать дочернее содержимое так же, как и элементы.

Содержимое отображается в дочернем компоненте с помощью элемента <slot>, который может содержать резервное содержимое, которое отображается, если дочерние элементы не предоставлены.

<!-- Widget.svelte -->
<div>
	<slot>
		this fallback content will be rendered when no content is provided, like in the first example
	</slot>
</div>

<!-- App.svelte -->
<Widget></Widget> <!-- this component will render the default content -->

<Widget>
	<p>this is some child content that will overwrite the default slot content</p>
</Widget>

Именованные слоты позволяют потребителям нацеливаться на определённые области. Они также могут содержать резервное содержимое.

<!-- Widget.svelte -->
<div>
	<slot name="header">No header was provided</slot>
	<p>Some content between header and footer</p>
	<slot name="footer"></slot>
</div>

<!-- App.svelte -->
<Widget>
	<h1 slot="header">Hello</h1>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</Widget>

$$slots — это объект, ключами которого являются имена слотов, переданные в компонент родительским элементом. Если родительский элемент не передаёт слот с определённым именем, то это имя не будет присутствовать в $$slots. Это позволяет компонентам отображать слот (и другие элементы, такие как обертки для стилизации) только в том случае, если родительский элемент его предоставляет.

Обратите внимание, что явное передача пустого именованного слота добавит имя этого слота в $$slots. Например, если родительский элемент передаёт <div slot="title" /> дочернему компоненту, то $$slots.title будет истинным внутри дочернего компонента.

<!-- Card.svelte -->
<div>
	<slot name="title"></slot>
	{#if $$slots.description}
		<!-- This <hr> and slot will render only if a slot named "description" is provided. -->
		<hr>
		<slot name="description"></slot>
	{/if}
</div>

<!-- App.svelte -->
<Card>
	<h1 slot="title">Blog Post Title</h1>
	<!-- No slot named "description" was provided so the optional slot will not be rendered. -->
</Card>

Слоты могут быть отображены ноль или более раз и могут передавать значения обратно родителю с помощью свойств. Родительский элемент предоставляет значения в шаблон слота с помощью директивы let:.

Применяются обычные правила сокращения — let:item эквивалентно let:item={item}, а <slot {item}> эквивалентно <slot item={item}>.

<!-- FancyList.svelte -->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot prop={item}></slot>
		</li>
	{/each}
</ul>

<!-- App.svelte -->
<FancyList {items} let:prop={thing}>
	<div>{thing.text}</div>
</FancyList>

Именованные слоты также могут предоставлять значения. Директива let: применяется к элементу с атрибутом slot.

<!-- FancyList.svelte -->
<ul>
	{#each items as item}
		<li class="fancy">
			<slot name="item" {item}></slot>
		</li>
	{/each}
</ul>

<slot name="footer"></slot>

<!-- App.svelte -->
<FancyList {items}>
	<div slot="item" let:item>{item.text}</div>
	<p slot="footer">Copyright (c) 2019 Svelte Industries</p>
</FancyList>

Элемент <svelte:self> позволяет компоненту включать себя рекурсивно.

Он не может появляться на верхнем уровне разметки; он должен находиться внутри блока if или each или передаваться в слот компонента, чтобы предотвратить бесконечную рекурсию.

<script>
	export let count;
</script>

{#if count > 0}
	<p>counting down... {count}</p>
	<svelte:self count="{count - 1}"/>
{:else}
	<p>lift-off!</p>
{/if}

Элемент <svelte:component> динамически отображает компонент, используя конструктор компонента, указанный как свойство this. При изменении свойства компонент уничтожается и пересоздаётся.

Если this ложно, компонент не отображается.

<svelte:component this={currentSelection.component} foo={bar}/>

Элемент <svelte:element> позволяет отображать элемент динамически заданного типа. Это полезно, например, при отображении богатого текстового контента из CMS. Все свойства и обработчики событий будут применены к элементу.

Единственная поддерживаемая привязка — bind:this, так как специфичные для типа элемента привязки, которые Svelte выполняет на этапе сборки (например, bind:value для элементов input), не работают с динамическим типом тега.

Если this имеет нулевое значение, элемент и его дочерние элементы не будут отображены.

Если this — имя тега без содержимого (например, br) и <svelte:element> содержит дочерние элементы, в режиме разработки будет выброшена ошибка выполнения.

<script>
	let tag = 'div';
	export let handler;
</script>

<svelte:element this={tag} on:click={handler}>Foo</svelte:element>

Элемент <svelte:window> позволяет добавлять обработчики событий к объекту window, не беспокоясь о их удалении при уничтожении компонента или проверке существования window при рендеринге на стороне сервера.

В отличие от <svelte:self>, этот элемент может появляться только на верхнем уровне вашего компонента и никогда не должен находиться внутри блока или элемента.

<script>
	function handleKeydown(event) {
		alert(`pressed the ${event.key} key`);
	}
</script>

<svelte:window on:keydown={handleKeydown}/>

Вы также можете привязать следующие свойства:

• innerWidth
• innerHeight
• outerWidth
• outerHeight
• scrollX
• scrollY
• online — псевдоним для window.navigator.onLine

Все, кроме scrollX и scrollY, являются только для чтения.

<svelte:window bind:scrollY={y}/>

Аналогично <svelte:window>, этот элемент позволяет добавить обработчики событий на document.body, такие как mouseenter и mouseleave, которые не срабатывают на window. Он также позволяет использовать действия на элементе <body>.

Как и <svelte:window>, этот элемент может появляться только на верхнем уровне вашего компонента и никогда не должен находиться внутри блока или элемента.

<svelte:body
	on:mouseenter={handleMouseenter}
	on:mouseleave={handleMouseleave}
	use:someAction
/>

Этот элемент позволяет вставлять элементы в document.head. Во время рендеринга на стороне сервера содержимое head отображается отдельно от основного содержимого html.

Как и <svelte:window> и <svelte:body>, этот элемент может появляться только на верхнем уровне вашего компонента и никогда не должен находиться внутри блока или элемента.

<svelte:head>
	<link rel="stylesheet" href="/tutorial/dark-theme.css">
</svelte:head>

Элемент <svelte:options> предоставляет место для указания опций компилятора для каждого компонента, которые подробно описаны в разделе компилятора. Возможные опции:

• immutable={true} — вы никогда не используете изменяемые данные, поэтому компилятор может выполнять простые проверки равенства ссылок, чтобы определить, изменились ли значения
• immutable={false} — по умолчанию. Svelte будет более консервативно относиться к тому, изменились ли или нет изменяемые объекты
• accessors={true} — добавляет геттеры и сеттеры для свойств компонента
• accessors={false} — по умолчанию
• namespace="..." — пространство имён, в котором будет использоваться этот компонент, чаще всего "svg"; используйте пространство имён "foreign", чтобы отказаться от регистронезависимых имён атрибутов и предупреждений, специфичных для HTML
• tag="..." — имя, используемое при компиляции этого компонента как пользовательского элемента

<svelte:options tag="my-custom-element"/>

Функция onMount планирует вызов обратного вызова, который выполнится, как только компонент будет смонтирован в DOM. Она должна вызываться во время первоначальной инициализации компонента (но не обязательно внутри самого компонента; её можно вызвать из внешнего модуля).

onMount не выполняется внутри компонента на стороне сервера.

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		console.log('the component has mounted');
	});
</script>

Если из onMount возвращается функция, она будет вызвана при размонтировании компонента.

<script>
	import { onMount } from 'svelte';

	onMount(() => {
		const interval = setInterval(() => {
			console.log('beep');
		}, 1000);

		return () => clearInterval(interval);
	});
</script>

Планирует обратный вызов, который выполняется непосредственно перед обновлением компонента после любого изменения состояния.

В первый раз обратный вызов выполнится до первоначального onMount

<script>
	import { beforeUpdate } from 'svelte';

	beforeUpdate(() => {
		console.log('the component is about to update');
	});
</script>

Планирует обратный вызов, который выполняется непосредственно после обновления компонента.

В первый раз обратный вызов выполнится после первоначального onMount

<script>
	import { afterUpdate } from 'svelte';

	afterUpdate(() => {
		console.log('the component just updated');
	});
</script>

Планирует обратный вызов, который выполняется непосредственно перед размонтированием компонента.

Из onMount, beforeUpdate, afterUpdate и onDestroy только этот выполняется внутри компонента на стороне сервера.

<script>
	import { onDestroy } from 'svelte';

	onDestroy(() => {
		console.log('the component is being destroyed');
	});
</script>

Возвращает промис, который разрешается после применения всех ожидающих изменений состояния, или в следующей микрозадаче, если таковых нет.

<script>
	import { beforeUpdate, tick } from 'svelte';

	beforeUpdate(async () => {
		console.log('the component is about to update');
		await tick();
		console.log('the component just updated');
	});
</script>

Связывает произвольный context объект с текущим компонентом и указанным key и возвращает этот объект. Контекст затем доступен для дочерних компонентов (включая вложенный контент) с помощью getContext.

Как и функции жизненного цикла, это необходимо вызывать во время инициализации компонента.

<script>
	import { setContext } from 'svelte';

	setContext('answer', 42);
</script>

Извлекает контекст, который принадлежит ближайшему родительскому компоненту со специфицированным key. Необходимо вызывать во время первоначальной инициализации компонента.

<script>
	import { getContext } from 'svelte';

	const answer = getContext('answer');
</script>

Проверяет, установлен ли заданный key в контексте родительского компонента. Необходимо вызывать во время первоначальной инициализации компонента.

<script>
	import { hasContext } from 'svelte';

	if (hasContext('answer')) {
		// do something
	}
</script>

Извлекает всю карту контекста, которая принадлежит ближайшему родительскому компоненту. Необходимо вызывать во время инициализации компонента. Полезно, например, если вы программно создаёте компонент и хотите передать ему существующий контекст.

<script>
	import { getAllContexts } from 'svelte';

	const contexts = getAllContexts();
</script>

Создаёт диспетчер событий, который может использоваться для отправки событий компонентов. Диспетчеры событий являются функциями, которые могут принимать два аргумента: name и detail.

События компонентов, созданные с помощью createEventDispatcher, создают событие CustomEvent. Эти события не распространяются. Аргумент detail соответствует свойству CustomEvent.detail и может содержать любые данные.

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();
</script>

<button on:click="{() => dispatch('notify', 'detail value')}">Fire Event</button>

События, отправленные из дочерних компонентов, могут обрабатываться в родительском компоненте. Любые данные, предоставленные при отправке события, доступны в свойстве detail объекта события.

<script>
	function callbackFunction(event) {
		console.log(`Notify fired! Detail: ${event.detail}`)
	}
</script>

<Child on:notify="{callbackFunction}"/>

События можно отменить, передав третий параметр в функцию отправки. Функция возвращает false, если событие отменено с помощью event.preventDefault(), в противном случае возвращает true.

<script>
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function notify() {
		const shouldContinue = dispatch('notify', 'detail value', { cancelable: true });
		if (shouldContinue) {
			// no one called preventDefault
		} else {
			// a listener called preventDefault
		}
	}
</script>

Функция, которая создаёт хранилище, значения которого можно устанавливать из «внешних» компонентов. Оно создаётся как объект с дополнительными методами set и update.

set - это метод, который принимает один аргумент — значение, которое нужно установить. Значение хранилища устанавливается в значение аргумента, если значение хранилища не равно ему.

update - это метод, который принимает один аргумент — обратный вызов. Обратный вызов принимает текущее значение хранилища в качестве аргумента и возвращает новое значение, которое нужно установить в хранилище.

import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe(value => {
	console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update(n => n + 1); // logs '2'

Если в качестве второго аргумента передана функция, она будет вызвана, когда количество подписчиков меняется с нуля на единицу (но не с единицы на две и т. д.). Эта функция получит функцию set, которая изменяет значение хранилища. Она должна вернуть функцию stop, которая вызывается, когда количество подписчиков меняется с единицы на ноль.

import { writable } from 'svelte/store';

const count = writable(0, () => {
	console.log('got a subscriber');
	return () => console.log('no more subscribers');
});

count.set(1); // does nothing

const unsubscribe = count.subscribe(value => {
	console.log(value);
}); // logs 'got a subscriber', then '1'

unsubscribe(); // logs 'no more subscribers'

Создаёт хранилище, значение которого нельзя установить извне; первым аргументом является начальное значение хранилища, а второй аргумент для readable такой же, как и для writable.

import { readable } from 'svelte/store';

const time = readable(null, set => {
	set(new Date());

	const interval = setInterval(() => {
		set(new Date());
	}, 1000);

	return () => clearInterval(interval);
});

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

В простейшем варианте derived принимает одно хранилище, а обратный вызов возвращает вычисленное значение.

import { derived } from 'svelte/store';

const doubled = derived(a, $a => $a * 2);

Обратный вызов может установить значение асинхронно, приняв второй аргумент, set, и вызвав его при необходимости.

В этом случае вы также можете передать третий аргумент в derived — начальное значение производного хранилища перед тем, как set будет вызван впервые.

import { derived } from 'svelte/store';

const delayed = derived(a, ($a, set) => {
	setTimeout(() => set($a), 1000);
}, 'one moment...');

Если вы вернете функцию из обратного вызова, она будет вызвана, когда а) обратный вызов выполнится снова или б) последний подписчик отпишется.

import { derived } from 'svelte/store';

const tick = derived(frequency, ($frequency, set) => {
	const interval = setInterval(() => {
	  set(Date.now());
	}, 1000 / $frequency);

	return () => {
		clearInterval(interval);
	};
}, 'one moment...');

В обоих случаях вместо одного хранилища можно передать массив аргументов в качестве первого аргумента.

import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
	setTimeout(() => set($a + $b), 1000);
});

В целом, вы должны считывать значение хранилища, подписываясь на него, и использовать значение по мере его изменения со временем. Иногда может потребоваться получить значение хранилища, на которое вы не подписаны. get позволяет это сделать.

Это работает путем создания подписки, чтения значения, а затем отписки. Поэтому не рекомендуется в горячих кодовых участках.

import { get } from 'svelte/store';

const value = get(store);

По умолчанию Svelte интерполирует между двумя числами, двумя массивами или двумя объектами (пока массивы и объекты имеют одинаковую «форму», а их «листовые» свойства также являются числами).

<script>
	import { tweened } from 'svelte/motion';
	import { cubicOut } from 'svelte/easing';

	const size = tweened(1, {
		duration: 300,
		easing: cubicOut
	});

	function handleClick() {
		// this is equivalent to size.update(n => n + 1)
		$size += 1;
	}
</script>

<button
	on:click={handleClick}
	style="transform: scale({$size}); transform-origin: 0 0"
>embiggen</button>

Если начальное значение равно undefined или null, первое изменение значения вступит в силу немедленно. Это полезно, когда у вас есть значения tweened, основанные на параметрах, и вы не хотите никаких анимаций при первом рендеринге компонента.

const size = tweened(undefined, {
	duration: 300,
	easing: cubicOut
});

$: $size = big ? 100 : 10;

Параметр interpolate позволяет вам анимировать между любыми произвольными значениями. Он должен быть (a, b) => t => value функцией, где a — начальное значение, b — целевое значение, t — число от 0 до 1, а value — результат. Например, мы можем использовать пакет d3-interpolate для плавной интерполяции между двумя цветами.

<script>
	import { interpolateLab } from 'd3-interpolate';
	import { tweened } from 'svelte/motion';

	const colors = [
		'rgb(255, 62, 0)',
		'rgb(64, 179, 255)',
		'rgb(103, 103, 120)'
	];

	const color = tweened(colors[0], {
		duration: 800,
		interpolate: interpolateLab
	});
</script>

{#each colors as c}
	<button
		style="background-color: {c}; color: white; border: none;"
		on:click="{e => color.set(c)}"
	>{c}</button>
{/each}

<h1 style="color: {$color}">{$color}</h1>