Прийшли з React чи Vue і ніщо не складається докупи? Прочитайте спершу Ментальну модель: п'ять хвилин про те, куди поділися computed, watch, хуки життєвого циклу й завантаження даних.
$mol — це реактивний UI-фреймворк: ти описуєш, чим є інтерфейс, а фреймворк з'ясовує, як і коли його оновити. Немає віртуального DOM, немає ручних підписок, немає useEffect. Ти пишеш компоненти як дерево; $mol рендерить лише те, що видно, і перераховує лише те, що дійсно змінилося.Компонент складається з трьох файлів:name.view.tree — декларативна розмітка (компактна деревоподібна мова)name.view.ts — поведінка (звичайні класи TypeScript)name.view.css.ts — типізовані стилі (перевіряються компілятором)Це розділення і є вся ідея: розмітка лишається читабельною, логіка — придатною до тестування, стилі — типобезпечними.Обов'язкового серед трьох немає жодного. Дерево — скорочення для структури, яку можна написати й руками: Від TypeScript до view.tree збирає один компонент обома способами й показує код, у який дерево компілюється.
Ти хочеш невеликий застосунок, який лишається невеликим у міру зростання — рантайм компактний, а рендеринг за замовчуванням віртуалізований.Ти любиш типи всюди — навіть стилі перевіряються TypeScript.Ти втомився з'єднувати реактивність вручну — стан у $mol реактивний автоматично, як у електронній таблиці.
Лічильник, повністю:1$my_counter$mol_view2 sub /3<= Count $mol_view4 sub /<= count \5<= Increment $mol_button6 click?<=> increment?7 sub /<= label \+1namespace $.$${2export class $my_counterextends$.$my_counter{3@ $mol_memcount(){return 0}4@ $mol_actionincrement(){this.count(this.count()+1)}5}6}count реактивний: усе, що його читає, автоматично перерендерюється, коли він змінюється. Немає setState, немає масиву залежностей, немає стора, який треба реєструвати.
