Еще одна шпаргалка по Svelte3

Имейте в виду, что это не исчерпывающий список.

Основные понятия

Svelte — это феноменальный компилятор JavaScript, который создает молниеносные и высокоинтерактивные приложения.

Реактивность

Она измеряет, как DOM синхронизируется с обновлениями текущего состояния. Большинство Javascript-фреймворков, таких как React, добавляют для этого промежуточный слой. В React это виртуальный DOM. В Svelte это время сборки.

Выглядит знакомо?

Svelte довольно близок к чистому HTML, CSS и Js. Однако он добавляет несколько расширений для экономии времени и создания ультра-оптимизированного пакета ванильного JavaScript.

Файлы .svelte

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

Типичная структура

project
│
├── .gitignore
├── node_modules/
├── src/
│   ├── App.svelte
│   └── main.js
│
├── scripts/
│   └── special-script.js (optional)
│
├── public/
│   ├── global-styles.css
│   ├── index.html
│   └── favicon.png
│
├── LICENSE
├── README.md
├── rollup.config.js
└── package.json
Вход в полноэкранный режим Выход из полноэкранного режима

Без виртуального DOM

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

Источник: виртуальный DOM — это чистые накладные расходы

Компиляция Svelte

Прочитайте руководство по компиляции
(довольно трудно найти лучшее объяснение!)

Стили Svelte

Скопированные стили

Пусть вас не смущает типичная структура. Хотя вы можете иметь глобальные стили, каждый компонент имеет свои собственные автоматически масштабируемые стили:

// section.svelte
<style>
  section {
    background-color: limegreen;
    color: black;
  }
</style>

<section>
  <slot/>
</section>
Вход в полноэкранный режим Выход из полноэкранного режима

Svelte автоматически генерирует классы, например, svelte-1kxxubc, который является хэшем стилей ваших компонентов.

Пользовательские классы CSS

// paragraph.svelte
<style>
  .para {
    background-color: limegreen;
    color: black;
  }

  .graph {
      letter-spacing: -.1em;
  }
</style>

<p class:para class:graph>
  <slot/>
</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Динамический CSS

<script>
    export let color = "fuschia";
  </script>

  <style>
    p {
        color: {color}
    }
  </style>

  <p>I'm a FBI agent</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Переменные

Основы

<script>
    export let a = 'a';
</script>

<p>It's {a}</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Деструктуризация

$: (метка доллара) — это магия Svelte для того, чтобы заставить вещи реагировать автоматически:

<script>
    export let article;

    $: ({ title, excerpt, url } = article);
  </script>

  <article>
      <h2><a href="{url}">{title}</a></h2>
      <p>{excerpt}</p>
  </article>
Войти в полноэкранный режим Выйти из полноэкранного режима

Импортировать

<script>
    import z from 'external';
</script>

<p>It's {z}</p>
Войти в полноэкранный режим Выход из полноэкранного режима

Петля, петля, петля…

<script>
    export let items = [
        'item1',
        'item2',
        'item3',
    ];
    </script>
    <ol>
    {#each items as item}
        <li>{item}</li>
    {/each}
    </ol>
Войти в полноэкранный режим Выход из полноэкранного режима

Деструктуризация и цикл

<script>
    export let articles;
</script>

{#each articles as {title, url, excerpt }}
  <article>
    <h2><a href="{url}">{title}</a></h2>
    <p>{excerpt}</p>
  </article>
{/each}
Войти в полноэкранный режим Выход из полноэкранного режима

Условия

{#if CONDITION1}
    <p>case 1</p>
{:else if CONDITION2}
    <p>case 2</p>
{:else}
    <p>everything else</p>
{/if}
Вход в полноэкранный режим Выход из полноэкранного режима

События

Вы можете использовать on:EVENT, например, on:click или on:mouseup.

<script>
    let count = 1;
    const increment = () => {
        count += 1
    }
</script>

<p>counter: {count}
<button on:click={increment}>Increment</button>
Вход в полноэкранный режим Выход из полноэкранного режима

Жизненный цикл onmount

После первого рендеринга:

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

    let data = [];

    onMount(async () => {
       const res = await fetch(`https://myapi.com/endpoint`);
       data = await res.json();
    });
</script>
Войти в полноэкранный режим Выход из полноэкранного режима

Диспетчер

Диспетчер предназначен для пользовательских событий (не таких как классические события DOM). Svelte предоставляет для этого createEventDispatcher:

// Button.svelte
<button on:click={fireStarter}>
  Custom click event
</button>

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  export let fireStarter = () => dispatch("fireStarter");
</script>
Вход в полноэкранный режим Выход из полноэкранного режима
<script>
  import Button from './Button.svelte';
</script>
<Button on:fireStarter={() => console.log('fire starter')} />
Вход в полноэкранный режим Выход из полноэкранного режима

Передача реквизитов

// ChildComponent.svelte
<script>
  export let text = "no one" // default value
</script>
<h1>Cotton-eyed {text}</h1>
Войти в полноэкранный режим Выход из полноэкранного режима
// App.svelte
<script>
  import ChildComponent from './ChildComponent.svelte'
</script>

<ChildComponent text="joe" /> // <h1>Cotton-eyed joe</h1>
Войти в полноэкранный режим Выход из полноэкранного режима

Привязка

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

bind:value

<script>
let guy = "cotton-eyed joe"
</script>
<input bind:value={guy}>
<p>Where did you come from? Where did you go? {guy}</p>
Вход в полноэкранный режим Выйти из полноэкранного режима

bind:checked

<script>
    let show = false;
  </script>

  <label>
    <input type="checkbox" bind:checked="{show}" />
    Show
  </label>  
  {#if show}
  Hello
  {:else}
  Bye
  {/if} 
Вход в полноэкранный режим Выход из полноэкранного режима

bind:group

Практическое использование — для радиовходов

bind:this

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

    let canvasElement;

    onMount(() => {
        const ctx = canvasElement.getContext('2d');
        drawStuff(ctx);
    });
</script>
Войти в полноэкранный режим Выход из полноэкранного режима

Хранилища

Хранилища помогают передавать данные между компонентами, когда в иерархии компонентов нет только отношений «родитель-ребенок».

Вы можете прочитать это Введение.

Переходы

Svelte обрабатывает переходы естественным образом. Вы даже можете передавать параметры.

Слоты

Элементы slot позволяют вложить один или несколько компонентов друг в друга. Вы также можете передавать данные от дочерних компонентов к родительскому.

<script>
import Article from "./Article.svelte";
</script>

<Article>
    <span slot="title">Title1</span>
    <span slot="excerpt">excerpt1</span>
</Article>
Вход в полноэкранный режим Выход из полноэкранного режима
// Article.svelte
<article>
  <h2>
    <slot name="title">
      <span class="error">No title</span>
    </slot>
  </h2>
  <slot name="excerpt">
      <span class="error">No excerpt</span>
    </slot>
</article>
Войти в полноэкранный режим Выход из полноэкранного режима

Отладка

Для проверки значения лучше всего использовать {@debug VAR}:

{@debug post}
<h1>{post.title}</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

Это проверит переменную и приостановит выполнение.

Продуманные фреймворки

Существуют полезные ресурсы, облегчающие разработку:

Sveltekit

npm init svelte@next my-app
cd my-app
npm install
npm run dev -- --open
Вход в полноэкранный режим Выход из полноэкранного режима

Источник: kit.svelte.dev

Plenti

Что такое Plenti?

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *