Приложения, которые работают офлайн, синхронизируются без бэкенда и весят ~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 mam
npm 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_page
title \Home
body /
<= Name $mol_string
hint \Имя
value? <=> name? \
<= Greeting $mol_text
text <= 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