Sveltejs

Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!

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

Попробуйте прямо сейчас

Вы можете просто начать новый Svelte + Typescript проект, скачав обычный шаблон и запустив специальный скрипт-настройщик node scripts/setupTypeScript.js.

npx degit sveltejs/template svelte-typescript-appcd svelte-typescript-appnode scripts/setupTypeScript.js

Если вы используете VS Code, убедитесь что вы используете новое официальное расширение, которое заменяет популярное расширение от James Birtles. Далее мы подробно рассмотрим отдельные шаги, связанные с использованием TypeScript в существующем проекте Svelte.

Что означает поддержка TypeScript в Svelte?

На самом деле, поддержка Typescript в Svelte приложениях уже была возможна в течении долгого времени. Однако вам приходилось смешивать множество разрозненных инструментов, и каждый проект выполнялся независимо. Сегодня почти все эти инструменты находятся в ведении организации Svelte и официально поддерживаются группой людей, которые берут на себя ответственность за весь конвейер и преследуют общие цели.

За неделю до того как COVID был объявлен пандемией, я внес предложение консолидировать лучшие инструменты и идеи Svelte из аналогичных dev-экосистем и предоставил набор шагов, чтобы получить первокласную поддержку TypeScript. С тех пор многие люди присоединились к этому предложению и написали код, чтобы реализовать задуманное.

Итак, когда мы говорим, что Svelte теперь поддерживает TypeScript, мы имеем в виду несколько различных вещей:

• Можно использовать TypeScript внутри блоков <script>- просто добавьте атрибут lang="ts".

• Компоненты с TypeScript могут быть проверены с помощью команды svelte-check.

• Вы получаете подсказки, автодополнение и проверку типов, даже в выражениях внутри разметки!

• Файлы TypeScript понимают API компонентов Svelte - больше никаких красных волнистых подчеркиваний при импорте файла .svelteв модуль .ts.

Как это работает?

Чтобы понять две основные части поддержки TypeScript, мы рассмотрим техники, которые TypeScript использует для предоставления средств разработки. Существует компилятор tsc, который запускается в командной строке для преобразования *.ts в *.js. Далее, существует TSServer, который отвечает на запросы от текстовых редакторов. TSServer- это то, что обеспечивает весь анализ JavaScript и TypeScript в реальном времени и в нем содержится большая часть кода компилятора.

Svelte имеет свой собственный Svelte compiler и теперь у нас есть svelte-language-server, который отвечает на вызовы из текстового редактора по стандарту Language Server Protocol. Первоклассная поддержка TypeScript означает, что обе эти системы хорошо справляются с кодом TypeScript.

Компилятор Svelte поддерживает TypeScript с помощью svelte-preprocess, написанный Christian Kaisermann, который теперь является официальным проектом Svelte.

Для уровня редактора, мы вдохновлялись работой Pine в экосистеме Vue через Vetur. Vetur предоставляет LSP, расширение VS Code и CLI. Теперь Svelte также имеет LSP, расширение VS Code и CLI.

Анализ *.svelte

Официальное расширение для VS Code мы построили на основе UnwrittenFun/svelte-vscode и UnwrittenFun/svelte-language-server, написанных James Birtles.

Simon HolthausenиLyu, Wei-Daсделали великолепную работу по улучшению анализа JavaScript and TypeScript, включая интеграцию сsvelte2tsx от@halfnelson, который обеспечивает понимание свойств компонентов в шаблонах.

Добавление TypeScript в существующий проект

Перед началом работы добавьте зависимости:

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1.Компиляция TypeScript

Прежде всего нужно настроитьsvelte-preprocess, который пропускает содержимое ваших <script lang="ts"> через компилятор TypeScript.

Если вы используете Rollup, это будет выглядеть вот так:

+ import autoPreprocess from 'svelte-preprocess';+ import typescript from '@rollup/plugin-typescript';export default {  ...,  plugins: [    svelte({+       preprocess: autoPreprocess()    }),+   typescript({ sourceMap: !production })  ]}

Обратите внимание, что вам необходимо также установить@rollup/plugin-typescript, чтобы Rollup мог работать с.tsфайлам. Полные инструкции для других сред здесь.

Чтобы настроить TypeScript, необходимо создать файл tsconfig.jsonв корне проекта:

{  "extends": "@tsconfig/svelte/tsconfig.json",  "include": ["src/**/*", "src/node_modules"],  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],}

Секции include/excludeмогут отличаться в зависимости от проекта, но эти настройки по-умолчанию должны хорошо работать для большинства проектов Svelte.

2.Поддержка редактором

Любой редактор, который использует LSP, может получить поддержку. Расширение VS Code является наиболее приоритетным для нас, но также идет работа над расширением для Atom и Vim черезcoc-svelte.

Эти расширения улучшат качество написания кода даже если вы используете только JavaScript. Редактор не будет оповещать об ошибках, но будет предлагать информацию об интерфейсах и инструменты рефакторинга. Вы можете добавить //@ ts-checkв верхнюю часть тега <script>с помощью JavaScript, чтобы получить улучшенные сообщения об ошибках.

Чтобы переключиться с<script>на использование TypeScript, просто добавьтеlang="ts"аттрибут. Надеюсь, вы не увидите океан красных завитков! ;-)

3.CI проверки

Наличие красных завитков - это здорово, однако в долгосрочной перспективе необходимо проверить отсутствие ошибок в коде. Для проверки отсутствия ошибок в проекте можно использовать CLI инструмент svelte-check. Он, так же как как редактор, запускает проверку на ошибки для всех файлов .svelte.

Можно добавить зависимость в проект, а затем добавить ее в CI.

 npx svelte-checkLoading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-appGetting Svelte diagnostics...====================================/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2Error: Type '123' is not assignable to type 'string'. (ts)====================================svelte-check found 1 errorerror Command failed with exit code 1.

Как насчет TypeScript в Sapper?

Поддержка TypeScript была добавлена в Sapper начиная с 0.28 версии. Если вы используете более старую версию, необходимо сделать upgrade.

Как я могу внести свой вклад?

Мы так рады, что вы спросили об этом. Основная работа ведется в репозиторииsveltejs/language-tools, а обсуждения в канале#language-toolsв Discord. Если вы хотите сообщить о проблемах, отправить исправления или помочь с расширениями для новых редакторов и так далее, вы можете найти нас. Увидимся там!

Введение

Давайте вспомним как мы пишем веб-приложения без фреймворков:

Создаем элемент

// создаем элемент h1const h1 = document.createElement('h1');h1.textContent = 'Hello World';// ...и добавляем его в bodydocument.body.appendChild(h1);

Обновляем элемент

// обновляем текст элемента h1h1.textContent = 'Bye World';

Удаляем элемент

// наконец, мы удаляем элемент h1document.body.removeChild(h1);

Добавляем стили к элементу

const h1 = document.createElement('h1');h1.textContent = 'Hello World';// добавляем класс к элементу h1h1.setAttribute('class', 'abc');// ...и добавляем тег <style> в headconst style = document.createElement('style');style.textContent = '.abc { color: blue; }';document.head.appendChild(style);document.body.appendChild(h1);

Слушаем события click на элементе

const button = document.createElement('button');button.textContent = 'Click Me!';// слушаем событие clickbutton.addEventListener('click', () => {  console.log('Hi!');});document.body.appendChild(button);

На чистом JavaScript нам нужно написать что-то подобное.

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

Синтаксис Svelte

Далее я покажу базовые примеры Svelte синтаксиса.

Если вы хотите узнать подробнее, рекомендую попробовать интерактивный Svelte туториал.

Итак, вот простейший компонент Svelte:

<h1>Hello World</h1>

Svelte REPL

Для добавления стилей, нужно добавить тег <style>:

<style>  h1 {    color: rebeccapurple;  }</style><h1>Hello World</h1>

Svelte REPL

На этом этапе написание Svelte компонента ощущается аналогично тому как мы пишем обычный HTML, потому что синтаксис Svelte является надмножеством HTML синтаксиса.

Давайте посмотрим, как мы добавляем данные в наш компонент:

<script>  let name = 'World';</script><h1>Hello {name}</h1>

Svelte REPL

Мы помещаем переменную JavaScript в фигурные скобки.

Чтобы добавить обработчик клика, мы используем директиву on:

<script>  let count = 0;  function onClickButton(event) {    console.log(count);  }</script><button on:click={onClickButton}>Clicked {count}</button>

Svelte REPL

Для изменения данных мы используем операторы присваивания:

<script>  let count = 0;  function onClickButton(event) {    count += 1;  }</script><button on:click={onClickButton}>Clicked {count}</button>

Svelte REPL

Давайте посмотрим как синтаксис Svelte компилируется в JavaScript, который мы видели ранее.

Компилируем Svelte в уме

Компилятор Svelte анализирует код, который вы пишете и генерирует оптимизированный JavaScript.

Чтобы понять, как Svelte компилирует код, давайте начнем с наименьшего возможного примера и постепенно будем усложнять его. В процессе вы увидите, что именно Svelte добавляет к конечному коду на основе наших изменений.

Первый пример на который мы посмотрим:

<h1>Hello World</h1>

Svelte REPL

Код который получится на выходе:

function create_fragment(ctx) {  let h1;  return {    c() {      h1 = element('h1');      h1.textContent = 'Hello world';    },    m(target, anchor) {      insert(target, h1, anchor);    },    d(detaching) {      if (detaching) detach(h1);    },  };}export default class App extends SvelteComponent {  constructor(options) {    super();    init(this, options, null, create_fragment, safe_not_equal, {});  }}

Мы можем разделить данный код на 2 части:

• create_fragment

• class App extends SvelteComponent

create_fragment

Компоненты Svelte - это строительные блоки приложения Svelte. Каждый компонент Svelte фокусируется на построении своей части или фрагменте финального DOM дерева.

Функция create_fragment дает компоненту Svelte руководство по созданию фрагмента DOM дерева.

Посмотрите на возвращаемый объект функции create_fragment. В нем есть такие методы, как:

• c()

Сокращенно от create. Содержит инструкции по созданию всех элементов во фрагменте.

В этом примере метод содержит инструкции по созданию элемента h1:

h1 = element('h1');h1.textContent = 'Hello World';

• m(target, anchor)

Сокращенно от mount. Содержит инструкции для вставки элементов в указанную цель.

В этом примере метод содержит инструкции по вставке элемента h1 в target:

insert(target, h1, anchor);// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.tsexport function insert(target, node, anchor) {  target.insertBefore(node, anchor || null);}

• d(detaching)

Сокращенно от destroy. Содержит инструкции по удалению элементов из указанной цели.

В этом примере мы удаляем элемент h1 из DOM дерева:

detach(h1);// http://github.com/sveltejs/svelte/tree/master/src/runtime/internal/dom.tsfunction detach(node) {  node.parentNode.removeChild(node);}

Имена методов сокращены для лучшей минификации. Посмотрите, что не может быть минифицированно.

export default class App extends SvelteComponent

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

В конструкторе мы инициализируем компонент с информацией из которой он состоит, например create_fragment. Svelte будет передавать только необходимую информацию и удалять ее всякий раз, когда в этом нет необходимости.

Попробуйте удалить тег <h1> и посмотрите, что произойдет с выводом:

<!-- empty -->

Svelte REPL

class App extends SvelteComponent {  constructor(options) {    super();    init(this, options, null, null, safe_not_equal, {});  }}

Svelte передаст null вместо create_fragment!

Функция init - это то место, где Svelte настраивает большинство внутренних частей, таких как:

• входные параметры компонента, ctx и контекст

• события жизненного цикла

• механизм обновления компонента

в самом конце Svelte вызывает create_fragment для создания и монтирования элементов в DOM.

Если вы заметили, все внутренние состояния и методы привязаны к this.$$.

Поэтому, если вы обращаетесь к свойству $$ компонента, вы подключаетесь к внутренним частям компонента. Вы предупреждены!

Добавление данных

Теперь когда мы рассмотрели минимальный Svelte компонент, давайте посмотрим как добавление данных изменит скомпилированный код:

<script>let name = 'World';</script><h1>Hello {name}</h1>

Svelte REPL

Обратите внимание на изменение вывода:

function create_fragment(ctx) {  // ...  return {    c() {      h1 = element('h1');      h1.textContent = `Hello ${name}`;},    // ...  };}let name = 'World';class App extends SvelteComponent {  // ...}

Некоторые наблюдения:

• то, что мы написали в теге <script>, перемещается на верхний уровень кода

• текстовое содержимое элемента h1 теперь является шаблонной строкой

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

Обновление данных

Давайте добавим функцию для обновления имени:

<script>let name = 'World';function update() {name = 'Svelte';}</script><h1>Hello {name}</h1>

Svelte REPL

и посмотрим на изменение скомпилированного кода:

function create_fragment(ctx) {  return {    c() {      h1 = element('h1');      t0 = text('Hello ');      t1 = text(/*name*/ ctx[0]);    },    m(target, anchor) {      insert(target, h1, anchor);      append(h1, t0);      append(h1, t1);    },    p(ctx, [dirty]) {      if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);    },    d(detaching) {      if (detaching) detach(h1);    },  };}function instance($$self, $$props, $$invalidate) {  let name = 'World';  function update() {    $$invalidate(0, (name = 'Svelte'));  }  return [name];}export default class App extends SvelteComponent {  constructor(options) {    super();    init(this, options, instance, create_fragment, safe_not_equal, {});  }}

Некоторые наблюдения:

• текстовое содержимое элемента <h1> теперь разбито на 2 текстовых узла, созданных функцией text (...)

• объект возвращаемый функцией create_fragment получил новый метод p(ctx, dirty)

• появилась новая функция instance

• то что мы написали в теге script было перенесено в функцию instance

• имя переменной, которое использовалось в create_fragment, теперь заменено на ctx[0]

Почему произошли такие изменения?

Компилятор Svelte отслеживает все переменные, объявленные в теге <script>.

Он отслеживает следующие факторы переменной:

• может быть изменена? например: count++

• может быть переназначена? например: name = 'Svelte'

• на переменную ссылаются в шаблоне? например <h1>Hello {name}</h1>

• доступна для записи? например const i = 1; или let i = 1;

• ... и многое другое

Когда компилятор Svelte понимает, что имя переменной можно переназначить (из-за name = 'Svelte'; при обновлении), он разбивает текстовое содержимое h1 на части, чтобы он мог динамически обновлять часть текста.

И в самом деле, вы можете видеть, что есть новый метод p для обновления текстового узла.

• p(ctx, dirty)

Сокращенно от u_p_date

p(ctx, dirty) содержит инструкции по обновлению элементов в зависимости от того, что изменилось в состоянии (dirty) и состоянии (ctx) компонента.

Функция instance

Компилятор понимает, что имя переменной не может использоваться в разных экземплярах компонента App.

Вот почему он перемещает объявление имени переменной в функцию с именем instance.

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

<App /><App /><App /><!-- выведет --><h1>Hello world</h1><h1>Hello world</h1><h1>Hello world</h1>

Но в этом примере переменную name можно изменить в пределах 1 экземпляра компонента, поэтому объявление этой переменной теперь перемещено в функцию instance:

<App /><App /><App /><!-- может быть --><h1>Hello world</h1><h1>Hello Svelte</h1><h1>Hello world</h1><!-- в зависимости от внутреннего состояния компонента -->

instance($$self, $$props, $$invalidate)

Функция instance возвращает список переменных компонента:

• на которые ссылаются в шаблоне

• которые могут быть изменены или переназначены в рамках экземпляра компонента

В Svelte мы называем этот список переменных ctx.

В функции init Svelte вызывает функцию instance для создания ctx и использует его при создания фрагмента для компонента:

// концептуально,const ctx = instance(/*...*/);const fragment = create_fragment(ctx);// создаем фрагментfragment.c();// монтируем фрагмент в DOM деревоfragment.m(target);

Теперь вместо доступа к переменной name вне компонента мы ссылаемся на name, переданную через ctx:

t1 = text(/* name */ ctx[0]);

Причина, по которой ctx является массивом, а не коллекцией Map или объектом, связана с оптимизацией. Вы можете увидеть обсуждение этого здесь.

$$invalidate

Секрет системы реактивности в Svelte - кроется в функции $$invalidate.

Для каждой переменной, которая была

• переназначена или изменена

• упомянута в шаблоне

будет вставлена функция $$invalidate сразу после присвоения или изменения:

name = 'Svelte';count++;foo.a = 1;// скомпилируется в примерно такой кодname = 'Svelte';$$invalidate(/* name */, name);count++;$$invalidate(/* count */, count);foo.a = 1;$$invalidate(/* foo */, foo);

Функция $$invalidate отмечает переменную как грязную и планирует обновление для компонента:

// концептуально...const ctx = instance(/*...*/);const fragment = create_fragment(ctx);// чтобы отслеживать, какая переменная измениласьconst dirty = new Set();const $$invalidate = (variable, newValue) => {  // обновляем ctx  ctx[variable] = newValue;  // помечаем переменную как грязную  dirty.add(variable);  // планируем обновление для компонента  scheduleUpdate(component);};// вызывается, когда запланировано обновлениеfunction flushUpdate() {  // обновить фрагмент  fragment.p(ctx, dirty);  // очистить список помеченных переменных  dirty.clear();}

Добавляем слушатели событий

Теперь добавим слушателя событий

<script>let name = 'world';function update() {name = 'Svelte';}</script><h1 on:click={update}>Hello {name}</h1>

Svelte REPL

И обратите внимание на разницу:

function create_fragment(ctx) {  // ...  return {    c() {      h1 = element('h1');      t0 = text('Hello ');      t1 = text(/*name*/ ctx[0]);    },    m(target, anchor) {      insert(target, h1, anchor);      append(h1, t0);      append(h1, t1);      dispose = listen(h1, 'click', /*update*/ ctx[1]);},    p(ctx, [dirty]) {      if (dirty & /*name*/ 1) set_data(t1, /*name*/ ctx[0]);    },    d(detaching) {      if (detaching) detach(h1);      dispose();},  };}function instance($$self, $$props, $$invalidate) {  let name = 'world';  function update() {    $$invalidate(0, (name = 'Svelte'));  }  return [name, update];}// ...

Некоторые наблюдения:

• функция instance теперь возвращает 2 переменных вместо одной

• добавлен вызов listen в функции mount и dispose в функции destroy

Как я упоминал ранее, функция instance возвращает переменные, на которые есть ссылка в шаблоне и которые изменены или переназначены.

Поскольку мы только что сослались на функцию update в шаблоне, теперь она возвращается в функции instance как часть ctx.

Svelte пытается сгенерировать как можно более компактный вывод JavaScript, не возвращая лишнюю переменную, если в этом нет необходимости.

listen и dispose

Каждый раз, когда вы добавляете слушатель событий в шаблоне, Svelte добавляет соответствующий слушатель и удаляет его, когда фрагмент удаляется из DOM.

Попробуем добавить больше слушателей событий,

<h1on:click={update}on:mousedown={update}on:touchstart={update}>  Hello {name}!</h1>

Svelte REPL

и посмотрим на вывод компилятора:

// ...dispose = [  listen(h1, 'click', /*update*/ ctx[1]),  listen(h1, 'mousedown', /*update*/ ctx[1]),  listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true }),];// ...run_all(dispose);

Вместо того чтобы объявлять и создавать новую переменную для удаления каждого слушателя, Svelte присваивает их в массив:

// вместо вот такогоdispose1 = listen(h1, 'click', /*update*/ ctx[1]);dispose2 = listen(h1, 'mousedown', /*update*/ ctx[1]);dispose2 = listen(h1, 'touchstart', /*update*/ ctx[1], { passive: true });// ...dispose1();dispose2();dispose3();

Минификация может сжать имя переменной, но скобки убрать нельзя.

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

Итого

Синтаксис Svelte - это надмножество HTML.

Когда вы пишете компонент Svelte, компилятор анализирует ваш код и генерирует оптимизированный JavaScript код.

Который можно разделить на 3 сегмента:

1. create_fragment

• Возвращает фрагмент, который представляет собой инструкцию по созданию фрагмента DOM для компонента.

2. instance

• Большая часть кода, написанного в теге <script>, находится здесь.

• Возвращает список переменных экземпляра, на которые есть ссылка в шаблоне.

• $$invalidate вставляется после каждого присваивания и изменения переменной экземпляра

3. class App extends SvelteComponent

• Инициализирует компонент с помощью create_fragment и instance

• Устанавливает внутренние части компонента

• Предоставляет API компонента

Svelte стремится создать как можно более компактный JavaScript, например:

• Разбиение текстового содержимого h1 на отдельные текстовые узлы только тогда, когда часть текста может быть обновлена

• Не определяет create_fragment или instance, когда это не нужно

• Генерирует dispose как массив или функцию, в зависимости от количества слушателей событий.

• ...

Заключение

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

Надеюсь данный материал был для вас полезен!

Попытка жалкого подобия на хуки useSelector, useDispatch, как в react-redux.

Большинство из нас сталкивались с redux, а те, кто использовал его в ReactJS могли пощупать хуки useSelector, useDispatch, в ином случае через mstp, mdtp + HOC connect. А что со svelte? Можно навернуть, или найти что-то похожее на connect, по типу svelte-redux-connect, описывать огромные конструкции, которые будем отдавать в тот самый connect:

const mapStateToProps = state => ({  users: state.users,  filters: state.filters});const mapDispatchToProps = dispatch => ({  addUser: (name) => dispatch({    type: 'ADD_USER',    payload: { name }  }),  setFilter: (filter) => dispatch({    type: 'SET_FILTER',    payload: { filter }  }) });

Прямо какие-то страшные флэшбэки до середины 2018, до введения хуков :). Хочу хуки в svelte. Что мы можем из него взять? Хм... store у svelte глобальный, не нужны никакие провайдеры с контекстом (шучу, нужны для разделения контекстов, но пока выкинем). Значит так: мы создаем redux-store, потом попробуем написать наши жалкие хуки для удобства использования.

Итак, наши константы:

//constants.jsexport const GET_USER = '@@user/get'export const FETCHING_USER = '@@user/fetch'export const SET_USER = '@@user/set'

Редюсер:

//user.jsimport {FETCHING_USER, SET_USER} from "./constants";const initialState = {  user: null,  isFetching: false}export default function user(state = initialState, action = {}){  switch (action.type){    case FETCHING_USER:    case SET_USER:      return {        ...state,        ...action.payload      }    default:      return state  }}

Экшены:

//actions.jsimport {FETCHING_USER, GET_USER, SET_USER} from "./constants";export const getUser = () => ({  type: GET_USER})export const setUser = (user) => ({  type: SET_USER,  payload: {    user  }})export const setIsFetchingUser = (isFetching) => ({  type: FETCHING_USER,  payload: {    isFetching  }})

Селекторы. К ним вернемся отдельно:

//selectors.jsimport {createSelector} from "reselect";import path from 'ramda/src/path'export const selectUser = createSelector(  path(['user', 'user']),  user => user)export const selectIsFetchingUser = createSelector(  path(['user', 'isFetching']),  isFetching => isFetching)

И главный combineReducers:

//rootReducer.jsimport {combineReducers} from "redux";import user from "./user/user";export const reducers = combineReducers({  user})

Теперь надо прикрутить redux-saga, а в качестве api у нас будет https://randomuser.me/api/. Во время тестирования всего процесса, эта апи очень быстро работала, а я очень сильно хотел посмотреть на лоадер подольше (у каждого свой мазохизм), поэтому я завернул таймаут в промис на 3 сек.

//saga.jsimport {takeLatest, put, call, cancelled} from 'redux-saga/effects'import {GET_USER} from "./constants";import {setIsFetchingUser, setUser} from "./actions";import axios from "axios";const timeout = () => new Promise(resolve => {  setTimeout(()=>{    resolve()  }, 3000)})function* getUser(){  const cancelToken = axios.CancelToken.source()  try{    yield put(setIsFetchingUser(true))    const response = yield call(axios.get, 'https://randomuser.me/api/', {cancelToken: cancelToken.token})    yield call(timeout)    yield put(setUser(response.data.results[0]))    yield put(setIsFetchingUser(false))  }catch (error){    console.error(error)  }finally {    if(yield cancelled()){      cancelToken.cancel('cancel fetching user')    }    yield put(setIsFetchingUser(false))  }}export default function* userSaga(){  yield takeLatest(GET_USER, getUser)}

//rootSaga.jsimport {all} from 'redux-saga/effects'import userSaga from "./user/saga";export default function* rootSaga(){  yield all([userSaga()])}

И наконец инициализация store:

//store.jsimport {applyMiddleware, createStore} from "redux";import {reducers} from "./rootReducer";import {composeWithDevTools} from 'redux-devtools-extension';import {writable} from "svelte/store";import createSagaMiddleware from 'redux-saga';import rootSaga from "./rootSaga";const sagaMiddleware = createSagaMiddleware()const middleware = applyMiddleware(sagaMiddleware)const store = createStore(reducers, composeWithDevTools(middleware))sagaMiddleware.run(rootSaga)// берем изначальное состояние из storeconst initialState = store.getState()// написали writable store для useSelectorexport const useSelector = writable((selector)=>selector(initialState))// написали writable store для useDispatch, хотя можно было и без этого// но для симметрии использования оставил такexport const useDispatch = writable(() => store.dispatch)// подписываемся на обновление storestore.subscribe(()=>{  const state = store.getState()  // при обновлении store обновляем useSelector, тут нет никакой мемоизации,   // проверки стейтов, обработки ошибок и прочего очень важного для оптимизации  useSelector.set(selector => selector(state))})

Всё. Самое интересное начинается с 18 строки. После того, как приходит понятие того, что мы написали, возникает вопрос - если я буду использовать useSelector в 3 разных компонентах с разными данными из store - у меня будут обновляться все компоненты сразу? Нет, обновятся и перерисуются данные, которые мы используем. Даже если логически предположить, что при каждом чихе в store у нас меняется ссылка на функцию, то и обновление компонента по идее должно быть, но его нет. Я честно не до конца разобрался как это работает, но я доберусь до сути, не ругайтесь :)

Хуки готовы, как использовать?

Начнем c useDispatch. Его вообще можно было не заворачивать в svelte-store и сделать просто
export const useDispatch = () => store.dispatch, только по итогу с useSelector мы используем store bindings, а с useDispatch нет - сорян, всё же во мне есть частичка маленького перфекционизма. Используем хук useDispatch в App.svelte:

<!--App.svelte--><script>  import {getUser} from "./store/user/actions";  import {useDispatch} from "./store/store";  import Loader from "./Loader.svelte";  import User from "./User.svelte";  // создаем диспатчер  const dispatch = $useDispatch()  const handleClick = () => {    // тригерим экшен    dispatch(getUser())  }</script><style>    .wrapper {        display: inline-block;        padding: 20px;    }    .button {        padding: 10px;        margin: 20px 0;        border: none;        background: #1d7373;        color: #fff;        border-radius: 8px;        outline: none;        cursor: pointer;    }    .heading {        line-height: 20px;        font-size: 20px;    }</style><div class="wrapper">    <h1 class="heading">Random user</h1>    <button class="button" on:click={handleClick}>Fetch user</button>    <Loader/>    <User/></div>

Вот такая вот загогулина у меня свёрстана. При нажатии на кнопку Fetch user, тригерим экшен GET_USER. Смотрим в Redux-dev-tools - экшен вызвался, всё хорошо. Смотрим network - запрос к апи выполнен, тоже всё хорошо:

Теперь нужно показать процесс загрузки и полученного нами пользователя. Используем useSelector:

<!--Loader.svelte--><script>    import {useSelector} from "./store/store";    import {selectIsFetchingUser} from "./store/user/selector";// Только в такой конструкции мы можем получить из store данные,     // выглядит не так страшно и не лагает, я проверял :3    $: isFetchingUser = $useSelector(selectIsFetchingUser)</script><style>    @keyframes loading {        0% {            background: #000;            color: #fff;        }        100% {            background: #fff;            color: #000;        }    }    .loader {        background: #fff;        box-shadow: 0px 0px 7px rgba(0,0,0,0.3);        padding: 10px;        border-radius: 8px;        transition: color 0.3s ease-in-out, background 0.3s ease-in-out;        animation: loading 3s ease-in-out forwards;    }</style>{#if isFetchingUser}    <div class="loader">Loading...</div>{/if}

Лоадер рисуется. Данные из store прилетают, теперь надо показать юзера:

<!--User.svelte--><script>    import {useSelector} from "./store/store";    import {selectIsFetchingUser,selectUser} from "./store/user/selector";    $: user = $useSelector(selectUser)    $: isFetchingUser = $useSelector(selectIsFetchingUser)</script><style>    .user {        background: #fff;        box-shadow: 0px 0px 7px rgba(0,0,0,0.3);        display: grid;        padding: 20px;        justify-content: center;        align-items: center;        border-radius: 8px;    }    .user-image {        width: 100px;        height: 100px;        background-position: center;        background-size: contain;        border-radius: 50%;        margin-bottom: 20px;        justify-self: center;    }</style>{#if user && !isFetchingUser}    <div class="user">        <div class="user-image" style={`background-image: url(${user.picture.large});`}></div>        <div>{user.name.title}. {user.name.first} {user.name.last}</div>    </div>{/if}

Пользователя так же получили.

Итог

Запилили какие-никакие подобия на хуки, вроде удобно, но не известно как это отразится в будущем, если сделать из этого mini-app на пару страниц. Саги так же пашут. Через redux devtools можно дебажить redux и прыгать от экшена к экшену, всё хорошо работает.

В конце прошлого года на сайте State of JS 2020 было опубликовано исследование о состоянии экосистемы JavaScript в 2020 году с ретроспективой на предыдущие годы развития. Исследование основывалось на многочисленных опросах, в которых суммарно приняли участие более 23 тысяч человек из 137 стран мира.

По результатам исследования можно сделать ряд прогнозов о том, какой будет экосистема JavaScript в 2021 году.

Языки, расширяющие возможности JavaScript

Первое, на что хочется обратить внимание, это тренды использования компилируемых языков, которые расширяют стандартные возможности JavaScript. Здесь всё довольно предсказуемо: TypeScript прочно обосновался на позиции лидера. При этом из года в год количество его поклонников только растет. И, возможно, TypeScript уже стал негласным стандартом для индустрии разработки веб-приложений.

Кроме рейтинга использования языков, на сайте также приводится сравнение по трём другим показателям: удовлетворённость от использованием этой технологии, интерес к ней и осведомлённость о её существовании. Как и в первом случае TypeScript держит лидирующие позиции с тенденцией к дальнейшему росту.

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

Фреймворки

Наверно, многие помнят, когда в начале бурного развития фронтенд-экосистемы количество фреймворков росло, словно грибы после дождя. Часть из них уже канула в лету (Press F for Backbone.js, Marrionete.js, Prototype.js, [type anything].js), и за последние годы мы могли наблюдать стабилизацию позиций трёх основных конкурентов: React, Angular, Vue. И с каждым годом их доля присутствия на рынке только росла.

Однако здесь не всё так однозначно. В 2019 году ворвался молодой Svelte, который за 2020 год в два раза увеличил свою долю использования среди разработчиков. И при этом в рейтингах проявления интереса и удовлетворённости от использования со стороны IT-сообщества Svelte занимает первое место. Фреймворк стал глотком свежего воздуха в подходе к созданию веб-приложений, и поэтому следует ожидать, что он будет наращивать своё присутствие в 2021 году всё больше и больше.

Такжеинтересна позицияAngularкак одного из лучших в рейтинге использования.Несмотря на то, что им пользуется более половины опрошенных, интерес к изучению этого JavaScript-фреймворка плавно угасает.Разработчики едины во мнении, что Angular имеет высокий порог входа и применим в основном для разработки крупных и сложных проектов.Ожидается, что в 2021 году разработчиков будут привлекать фреймворки с меньшим порогом входа.

Главный лидер, React,по-прежнему занимает прочную позицию во фронтенд-сообществе, и это не изменится в 2021 году. Постоянное развитие этого инструмента в сочетании с некоторыми новаторскими идеями во фронтенде гарантирует, что это решение ориентировано на будущее.

Управление данными

Благодаря популярности React и его частому использованию совместно с Redux для управления состоянием приложения, последний на протяжении пяти лет исследований занимал первую позицию. И только в 2020 году его доля использования перестала расти, а удовлетворённость от использования стала резко падать. Возможно, это связано с гетерогенностью обвесов, которые применяются совместно с Redux и большим количеством шаблонного кода, который приходится писать при использовании этой технологии.

Одновременно с этим GraphQL за последние годы медленно наращивал свои позиции. Инструментсейчас чрезвычайно популярен, становясь номером один в категориях удовлетворённости, интереса и осведомлённости.Легкость работы и отличная интеграция с бекендом становится ключом к успеху. И это даёт неплохие шансы для GraphQL на 2021 год в плане дальнейшей популяризации.

Инструменты для тестирования

В мире библиотек для модульного тестирования всё довольно прагматично и основывается на ранее рассмотренных показателях. В частности, Jest продолжает своё господство, что и следовало ожидать, учитывая, что React является самым популярным фреймворком, а Jest это часть экосистемы React.

Mocha по-прежнему является достойной альтернативной. Но отсутствие явной привязанности к конкретному фреймворку смещает её на вторую позицию.

Jasmine является инструментом тестирования по умолчанию для проектов на Angular. И, возможно, спад его популярности связан с определенным спадом самого Angular.

Также интересен тот факт, что сообщество проявляет активный интерес к инструментам для интеграционного и e2e-тестирования. Сложно сказать, с чем это могло бы быть связано. Возможно, на это повлияла популярность TypeScript, который предлагает статическую проверку типов на этапе компиляции. Что значительно снижает количество требуемых модульных тестов для покрытия кода и высвобождает время для того, чтобы можно было заняться интеграционными и e2e-тестами.

Заключение

Специфика экосистемы JavaScript такова, что каждое направление ее развития представлено большим количеством технологий и инструментов. Для бизнеса критически важна гибкость и скорость в разработке своих продуктов, возможность с легкостью нанимать специалистов с рынка и не скатываться в legacy. Поэтому возрастает важность прогноза технологических трендов развития IT-индустрии, который может серьёзно повлиять на успех компаний в будущем.