$mol Getting started

Приложения, которые работают офлайн, синхронизируются без бэкенда и весят ~140 KB brotli со всем включённым. Реактивность, хранилище и UI приезжают одним стеком: ты пишешь приложение, а не собираешь фреймворк из чужих библиотек.

К концу этого руководства у тебя будет настоящее приложение на $mol с офлайном, темами и локальным хранилищем, развёрнутое локально и собранное одной командой. Минут за десять, если терминал и редактор уже под рукой.

Что получится в итоге

Запущенное приложение, в котором уже есть то, что обычно прикручиваешь потом:

• установка как PWA и офлайн-режим,

• локальное хранилище с бесконфликтной синхронизацией (без серверного кода с твоей стороны),

• светлая и тёмная темы с переключателем,

• клиентский роутинг,

• GitHub Action для деплоя на Pages.

Всё это даёт скаффолдер. Дальше поменяешь одну строку и увидишь, как оно само пересчитывается.

Что понадобится

• Node.js 24+ и git.

Это весь список. В сборку попадают только те модули, на которые ссылается твой код. dependencies руками никто не ведёт.

Шаг 1. Поднять рабочее пространство и dev-сервер

git clone https://github.com/hyoo-ru/mam.git ./mam && cd mamnpm install && npm start

прямо в этом же терминале и процессе запустим гипер базу

+ giper/baza/app/run port=9090

mam работает как монорепо-воркспейс из независимых модулей. Твоё приложение живёт в нём как пара файлов в собственном неймспейсе, а в бандл попадут только модули, до которых дотянулся твой код. Dev-сервер на http://localhost:9080 собирает каждый бандл по запросу.

Шаг 2. Сгенерировать приложение (одна команда)

Из папки mam создай проект. Выбери свой неймспейс и имя приложения, например my/hello:

npm create view-tree-lsp@latest my/hello -- --no-docker --no-tauri

Команда создаёт готовое работающее приложение в ./my/hello/:

my/hello/├── app/│   ├── index.html        # веб-точка входа│   ├── app.view.tree     # декларативное описание компонента│   ├── app.view.ts       # поведение│   ├── app.view.css.ts   # стили (типизированный CSS-in-TS)│   ├── app.test.ts       # тест│   ├── app.meta.tree     # офлайн установка │   └── app.locale=ru.json├── store/│   └── store.ts          # локальное хранилище├── assets/logo.svg└── .github/workflows/deploy.yml

Приложение готово к запуску.

Шаг 3. Открыть

Перейди на http://localhost:9080/my/hello/app/. Первая загрузка занимает несколько секунд: dev-сервер на лету собирает JS и CSS под этот модуль. Дальше всё инкрементально. Увидишь приложение с темами, несколькими экранами и работающей навигацией, готовое жить локально без сервера.

Скаффолдер также печатает URL тест-раннера (…/app/-/test.html), там можно посмотреть, как проходит встроенный тест.

Что ты получил (и почему это важно)

Скаффолдер кладёт минимальное настоящее приложение на $mol, и это сделано намеренно. Тут уже есть:

• Локальное хранилище из коробки. store/store.ts поверх CRDT: состояние сохраняется локально и чисто сливается между устройствами. Логику синхронизации руками писать не надо, бэкенда тоже нет.

• В app.meta.tree строкой include \/mol/offline/install подключён модуль PWA. Приложение ставится на телефон и продолжает работать без сети. Оффлайн просто ещё один модуль.

• Переключатель светлой/тёмной темы и навигация по URL ($mol_state_arg) уже стоят. Не нужны? Удали Theme_toggle из view.tree, и его не будет ни в DOM, ни в бандле.

• Стили типизированные: app.view.css.ts это CSS-in-TS, опечатка падает на компиляции.

Сделать реактивно

Открой app/app.view.tree, найди приветственный текст. Добавь поле ввода, привязанное к свойству, и строку, которая от него зависит:

home <= Home $mol_pagetitle \Homebody /<= Name $mol_stringhint \Имяvalue? <=> name? \<= Greeting $mol_texttext <= greeting \

Затем в app/app.view.ts опиши greeting как функцию от name:

greeting() {const name = this.name()return name ? `Привет, ${name}!` : ''}

Попробуй печатать. Приветствие обновляется само. Ты не подписывался на поле и не планировал перерисовку: greeting читает this.name(), поэтому $mol запоминает зависимость и пересчитывает только это значение, когда меняется name. Та же реактивная модель пронизывает все слои, включая загрузку данных: значение, которое ещё не готово, “приостанавливается” и подставляется, когда придёт. Поэтому асинхронный код читается как обычный синхронный.

Настроить редактор (минута)

view.tree чувствителен к отступам, так что поддержка в редакторе сильно помогает:

• VS Code: поставь плагин языка view.tree; используй плагин .editorconfig, чтобы были TAB-ы для отступов и LF в концах строк.

• Zed: расширение view.tree добавляет подсветку, go-to-definition и автодополнение.

• Zed-расширение построено на view.tree LSP и tree-sitter-грамматике, их можно подключить и к другим редакторам.

Деплой

В скаффолде уже лежит GitHub Actions workflow: пушишь в main, он собирает и публикует на GitHub Pages. Ветки-фичи деплоятся на собственный preview-URL.

Попробуй

Сгенерируй приложение, преврати приветственный экран во что-то, чем правда пользуешься, и положи это в сгенерированное хранилище, чтобы пережило обновление страницы и перезапуск офлайн. Когда понадобится полный список кирпичиков (поля, списки, графики, пикеры), загляни в справочник модулей: там каждый, с примерами.

Если зависнешь, есть скил для нейронки, который умеет в view.tree и подскажет, как сделать конкретную штуку:

npx skills add b-on-g/mol_skill --all -g