TypeScript *

React — Compound Components

Как-то я уже упоминал паттерн Compound Components (Составные компоненты) для React, теперь остановимся на нём немного подробнее.

ℹ️ Compound components — это подход позволяет объединить несколько компонентов в единую сущность, которая неявно имеет общее состояние. Эти компоненты тесно взаимодействуют друг с другом и работают как единое целое, представляя собой полноценный UI компонент.

? Основные характеристики:

• Используется React контекст, чтобы управлять состоянием

• Должен быть главный компонент, в котором хранится состояние и объявляется React контекст

• Все дочерние компоненты используют состояние через React контекст

ℹ️ Он состоит из 2 простых подходов React:

1. Композиция компонентов

2. Паттерн “Провайдер” — использование контекста React 

? Вначале рассмотрим подходы по отдельности

1️⃣ Что такое композиция?

Вместо вот этого 

<Tile count={money} title="Стоимость" icon={<MoneyIcon/>}/>

Мы пишем вот так

<Tile>
  <Title>{title}</Title>
  <Number>{count}</Number>
  <Icon>{icon}</Icon>
</Tile>

2️⃣ Паттерн “Провайдер” 

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

? Если объединить два этих подхода, то сможем реализовать паттерн Compound Components. Как пример, можно использовать компонент табов из библиотеки material-ui.

https://t.me/cherkashindev/166

Явное управление ресурсами в TypeScript — using

Недавно, когда я рассказывал, как мы пишем тесты, я уже упоминал, что в TypeScript’е появилось новое ключевое слово using. Оно позволяет нам сделать код чище и более линейным, избавившись от try/finally. 

Но мы можем использовать using не только, когда открываем файл или подключение к базе данных, иначе его использование ограничилось бы исключительно сервером. 

Мне нравится рассматривать using, как Undo/Redo только наоборот, сперва мы выполняем какое-то действие, а в конце отменяем его:

- создали объект, удалили

- показали спиннер и скрыли, когда получили данные

Причем отмена удобно происходит в самом конце функции, даже если мы используем async/await.

Вот простой пример, как можно использовать using, чтобы показывать/скрывать спиннер в React коде.

useEffect(() => {
  (async () => {
    using manager = new LoadingManager(setIsLoading);
    await Promise.resolve().then(() => console.log("promise.resolve"));
  })();
 }, []);

/**
 * Класс, который управляет состоянием спиннера
 */
class LoadingManager {
  constructor(private setIsLoading: (value: boolean) => any) {
    this.setIsLoading(true);
    console.log("constructor");
  }

  [Symbol.dispose]() {
    this.setIsLoading(false);
    console.log("disposer")
  }
}

// В консоли будет выведено в следующем порядке
// constructor

Код можно открыть в песочнице.

К сожалению, нельзя опустить переменную manager, но это лучше, чем лепить везде try/finally.

https://t.me/cherkashindev/164

Представлен функциональный, контентно-адресуемый и сетевой язык программирования Scrapscript. Он предназначен для создания небольших программ, которыми можно легко делиться.

Scrapscript лучше всего понимать с нескольких точек зрения:

• «это JSON с типами, функциями и хешированными ссылками»;

• «Это крошечный Haskell с чрезвычайной синтаксической согласованностью»;

• «Это язык со странной особенностью IPFS».

Scrapscript решает проблему совместного использования программного обеспечения. Современное программное обеспечение ломает границы. API расходятся, пакеты разрушаются, конфигурации закостеневают, сериализация портится, git запутывается, зависимости ломаются, документация умирает, всплывают уязвимости и так далее.

Чтобы сделать программное обеспечение безопасным и доступным для совместного использования, Scrapscript сочетает в себе существующие знания по-новому: все выражения являются содержательно-адресуемыми «обрывками» все программы являются данными все программы «платформенные».

Эти простые решения в Scrapscript порождают новые парадигмы:

• контентно-адресуемое всё;

• всемирное совместное пространство имен;

• никаких сломанных зависимостей;

• управление версиями на уровне выражения.

VKADSKIP - расширение промотает рекламу в видео VK за вас⁠⁠!

VKADSKIP - это бесплатное расширение для браузеров Google Chrome, Яндекс.Браузер, Opera и Firefox.

Как это выглядит?

Когда пользователь VK Видео откроет видеоролик, по которому в базе данных уже есть размеченные участки, в плеере на полосе таймлайна появятся цветные сегменты, которые будут автоматически пропускаться во время просмотра. После пропуска участка отобразится уведомление о пропущенном участке с возможностью отмотать обратно. Также рядом с переключателем звука будет кнопка "Реклама в видео", где можно просмотреть подробную информацию и добавить новый сегмент для автопропуска.

Пример демонстрации на видео

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

Пользователи (и команда асессоров) сами размечают на видеороликах участки с рекламой и другими типами лишнего контента. У всех других пользователей на тех же видеороликах появятся сегменты для автопропуска.

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

Загрузить расширение бесплатно:

Для браузера Google Chrome

Для браузера Яндекс.Браузер

Для браузера Opera

Для браузера Mozilla Firefox

Больше информации и возможность поддержать проект на сайте:

https://vkadskip.star-tech.dev/

Выводим Мурыча на чистую воду

Топ перлов:

• В JS нет переменных и присваивания, но есть потоки

• Все числа выделяются в куче

• TS не годится для разработки

• let и const - главные перфоманс ботлнеки

Упоминаемые материалы:

• Исправление Object.assign в TS

• Бенчмарк деструктуризации

• Императивный язык с формальными проверками

• Язык с мощным метапрограммированием

• Сравнение редакторов документов

Мета-сслыки:

• Форум Гипер Дев: https://t.me/h_y_o_o

• $mol_news: https://t.me/mol_news

• Донаты: http://boosty.to/hyoo

Препарируем StyleX и находим родовые травмы

Решение от большой компании, но..

• Раздутый как CSS, так и HTML, и даже JS

• Несемантичный CSS и HTML

• Околонулевая типизация без автодополнения

• Много бойлерплейта

• Зависимость от Babel

• Тормозная сборка

• Сложная отладка

Копилка благодарностей: https://boosty.to/hyoo

Использование never в TypeScript

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

1. Явно с помощью width и height 

2. Диалог должен принять размер контента, за это отвечает свойство responsive

Тут есть несколько проблем:

1. Чтобы передать либо width и height или только responsive, мы пометили все поля как необязательные и теперь мы можем передать неправильный набор полей или не передать ни одного вовсе.

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

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

Такой интерфейс будет выглядеть вот так:

type DialogProps = { title: string } & (
  | {
      responsive: boolean;
      width?: never;
      height?: never;
    }
  | {

      responsive?: never;
      width: number;
      height: number;
    }

);

never - пустое множество или проще говоря, это тип, которому не может быть присвоено ни одно значение.

// ✅ correct 
const withSize: DialogProps = {
  title: "Dialog with Size",
  width: 600,
  height: 500,
  responsive: undefined
};

// ❌ incorrect
const incorrect: DialogProps = {
  title: "Incorrect Props Dialog",
  responsive: false,
  width: 600
  height: 500
};

В третьем примере мы получим ошибку ?.

https://t.me/cherkashindev/21

Amazon опубликовала компилятор jsii 1.90, представляющий собой модификацию компилятора TypeScript, позволяющую извлечь из компилируемых модулей информацию об API и сгенерировать универсальное представление данного API для обращения к JavaScript-классам из приложений на различных языках программирования. Код проекта написан на TypeScript и распространяется под лицензией Apache 2.0.

Jsii даёт возможность создавать на языке TypeScript библиотеки классов, которые могут использоваться в проектах на языках C#, Go, Java и Python, благодаря трансляции в родные для этих языков модули, предоставляющие тот же самый API. Инструментарий используется в AWS Cloud Development Kit для поставки библиотек для разных языков программирования, формируемых из одной кодовой базы. В новой версии jsii реализовано кэширование списка классов для каждой сборки и документировано, как можно превратить обязательное свойство в необязательное.

Источник: OpenNET.