b-on-g $mol / MAM
Грузи из references/ только то, что нужно задаче.
| Файл | Когда |
|---|---|
STYLE.md |
Перед любым кодом. Всегда. |
VIEW_TREE.md |
Синтаксис дерева, биндинги, реактивность, грабли |
COMPONENTS.md |
Прежде чем писать свой компонент |
TESTS.md |
Когда пишешь или чинишь тесты |
GIPER_BAZA.md |
Данные, права, синк |
TAURI_SETUP.md |
Десктоп и мобилки |
MOL_CHAT_AUTOSCROLL.md |
Только автоскролл к новым элементам |
MOL_POSITIONING.md |
Только сравнение $mol с React/Vue/shadcn |
Порядок работы
Уточни модуль, нужна ли Giper Baza и Tauri. Если запрос размытый, предложи 2–3 конкретных варианта.
Найди готовое. В
mol/246 модулей, вbog/ещё пара десятков. Перед своим компонентом:ls mol | grep -i <слово> grep -rl '<свойство>' mol/*/*.view.tree bog/*/*/*.view.treeВ $mol любое свойство любого вложенного компонента переопределяется строкой в view.tree. Форкать и копировать не нужно.
Выдели общее. Повторяющийся кусок дерева = отдельный компонент в своей папке рядом с
app/, не внутри. Подпапка внутриapp/тянет всё приложение к тому, кто её заимствует.Пиши по
STYLE.md: snake_case, без комментариев, дерево вместо TS, стили только для отклонений.Тесты пиши вместе с фичей: сценарий пользователя через методы вида, см.
TESTS.md.Сборку не запускай, если не просили. После сборки смотри
<модуль>/-/web.audit.jsи чини всё.Коммить сам:
$bog_myapp_part: что изменилось, см.STYLE.md.
Файлы модуля
bog/myapp/app/
index.html
app.view.tree разметка и биндинги
app.view.ts логика, только если дерева не хватило
app.view.css.ts стили, только отклонения от темы
app.view.css raw CSS: @keyframes, content, значения css-переменных
app.test.ts тесты
app.meta.tree мета, если нужна
index.html:
<!doctype html>
<html mol_view_root>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body mol_view_root>
<div mol_view_root="$bog_myapp_app"></div>
<script src="web.js"></script>
</body>
</html>
Имя класса = путь: $bog_myapp_app живёт в bog/myapp/app/. Подчёркивание всегда папка, поэтому имена папок без _. Короткое глобально уникальное имя работает везде: в коде, в CSS-атрибуте, в коммите.
Новый проект
npm create view-tree-lsp@latest bog/myapp -- --no-docker --no-tauri
Флаги --no-docker, --no-baza, --no-tauri. Всегда предлагай это вместо ручного создания файлов.
Локализация
@ \Текст в дереве попадает в <модуль>/-view.tree/*.locale=en.json. Переводы кладутся рядом: <модуль>/<имя>.locale=<lang>.json, ключ = полное имя свойства. Один файл на всё приложение разложить по модулям:
npx view-tree-lsp locale bog/myapp/app/- --exclude=mol --update
--include/--exclude по куску пути, --update дописывает, --dry показывает план. Переводчику удобнее $yuf_localizer.
NPM-пакеты
require('pkg') внутри метода, MAM установит сам. Бандлится весь пакет. Для тяжёлого $mol_import.script(url) / $mol_import.module(url). Ручной package.json в модуле мержится с автоматическим.
SEO
SPA без пререндера индексируется пустым. После mam_build, перед деплоем:
- uses: b-on-g/mol-prerender-action@main
with:
base-url: "https://example.github.io/app/"
screens: |
campaign
shop
Генерит HTML на экран, sitemap.xml, robots.txt. route-format: #! или ?.
Tauri в CI
- uses: b-on-g/tauri-mol-workflow-template@master
with:
module: "bog/myapp/app"
platform: desktop
Или reusable workflow tauri_reusable.yml@master с mam_module_path. Остальное в TAURI_SETUP.md.
Ответ пользователю
Минимальные рабочие правки в целевом модуле, точные пути и команды. Пример = пара view.tree + view.ts.