Разработка компилятора для TypeScript на TypeScript на базе LLVM

номинальные типы в TS:

declare type int8 = number & { __typename?: 'int8' }
declare type int16 = number & { __typename?: 'int16' }
declare type int32 = number & { __typename?: 'int32' }

const a: int32 = 123123
const b: int8 = 123

function add(a: int8, b: int8): int8 | int16 {
	return a + b
}
add(a, b) // compile error

Typescript: unsound behavior или поблажки надежности

type CompanyId = string & { __typename?: 'CompanyId' }
type UserId = string & { __typename?: 'UserId' }

const userId: UserId = 'user.id.1'
const companyId: CompanyId = 'company.id.1'
/*
Тип "CompanyId" не может быть назначен для типа "UserId".
  Тип "CompanyId" не может быть назначен для типа "{ __typename?: "UserId" | undefined; }".
    Типы свойства "__typename" несовместимы.
      Тип ""CompanyId" | undefined" не может быть назначен для типа ""UserId" | undefined".
        Тип ""CompanyId"" не может быть назначен для типа ""UserId" | undefined".
*/
const compiletimeError1: UserId = companyId
/*
Тип "UserId" не может быть назначен для типа "CompanyId".
  Тип "UserId" не может быть назначен для типа "{ __typename?: "CompanyId" | undefined; }".
    Типы свойства "__typename" несовместимы.
      Тип ""UserId" | undefined" не может быть назначен для типа ""CompanyId" | undefined".
        Тип ""UserId"" не может быть назначен для типа ""CompanyId" | undefined".
*/
const compiletimeError2: CompanyId = userId

Стилизация Select-Option (почти) без JavaScript

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

В обычном случае: если выбрать value='' то селект считается пустым и необходимо заполнить

<form>
  <select name='' required>
    <option value=''>select option placeholder</option>
    <option value='1'>option 1</option>
    <option value='2'>option 2</option>
  </select>
</form>

В случае с радиогруппой: проверяется только факт наличия выбранного инпута, value='' является корректным значением, так как задаётся разработчиком напрямую

<form>
  <input name='gr' type='radio' value='' checked /><!-- already checked -->
  <input name='gr' type='radio' required value='1' /><!-- require check ignored -->
  <input name='gr' type='radio' required value='2' /><!-- require check ignored -->
  <button>send</button>
</form>

В случае с чекбоксом: в HTML нет такого понятия как группа чекбоксов, required работает только непосредственно на сам чекбокс. Чекбокс группы никогда не будет, вообще, 0, точка,. (везде есть а HTML особенный)

<form>
  <input name='gr' type='checkbox' value='1' required /><!-- must be checked -->
  <input name='gr' type='checkbox' value='2' required /><!-- must be checked -->
  <input name='gr' type='checkbox' value='3' required /><!-- must be checked -->
  <button>send</button>
</form>

Но...

… мы то все прекрасно понимаем, что наличие всяких там name/value/required/checked/form и прочих легаси атрибутов это моветон, скучно и никому не интересно, у нас же есть {Framework}JS! Балом правят всякие ng-form билдеры, код вида this.setState({… }) и вот это вот всё

Закрывание по клику в body решается крайне просто через :focus-within и небольшим скриптом, который на esc будет сбрасывать фокус.

Accessability вполне можно наваять при помощи aria-*, но это не точно, не сталкивался, не знаю, я мимокрокодил, рядомстоял, из одного уха влетела.

После долгих изысканий в дизайне и функционале в лучше просто оставить select как есть, игра не стоит свеч.

Спасибо за внимание

Kotlin + React vs Javasript + React

В подобном подходе вообще минусов нет, за исключением одного и единственного: в React dev tools будет выводиться что-то типа Anonymous Component (или просто Component). Такая же штука с Vue. Иногда очень полезно видеть дерево компонентов и у кого что внутри твориться (пропсы, стейт, контекст). Естественно на продакшене такие вещи всякими минификаторами убиваются (насколько помню, можно выключить).