![\"2mqjs](\"https://raw.githubusercontent.com/Poliklot/2mqjs/master/assets/logo.svg\"){kind=logo}
\n\n \n
\n ![\"npm](\"https://img.shields.io/npm/v/2mqjs.svg\")
\n ![\"CI\"](\"https://github.com/Poliklot/2mqjs/actions/workflows/ci.yml/badge.svg\"){kind=icon}
\n ![\"CodeQL\"](\"https://github.com/Poliklot/2mqjs/actions/workflows/codeql.yml/badge.svg\"){kind=icon}
\n \n
![\"TypeScript](\"https://img.shields.io/badge/TypeScript-strict-blue\"){kind=icon}
![\"MIT](\"https://img.shields.io/badge/license-MIT-green.svg\"){kind=icon}
\n
\n Маленький performance-first архитектурный набор для веб-приложений без фреймворков.\n
\n\n\n English version ·\n Components ·\n Ports ·\n Workers ·\n Tasks ·\n Store ·\n Events\n
\n\n---\n\n## Что это?\n\n**2mqjs** помогает разбить vanilla TypeScript/JavaScript сайт на небольшие runtime-слои:\n\n- **UI-компоненты** загружаются только тогда, когда они реально нужны.\n- **Бизнес-логика** может уехать в Web Workers.\n- **События** идут через явные ports, а не через скрытые связи между модулями.\n- **Tasks** управляют порядком запуска, видимостью, idle-временем, готовностью данных и воркеров.\n- **Store** может жить вне main thread и сохраняться между перезагрузками.\n\nБиблиотека нужна для страниц, где важны **маленький initial JS, меньше работы в main thread и предсказуемый порядок инициализации**.\n\n## Установка\n\n```bash\nnpm i 2mqjs\n# или\npnpm add 2mqjs\n# или\nyarn add 2mqjs\n```\n\nПроект должен использовать ESM:\n\n```jsonc\n{\n \"type\": \"module\"\n}\n```\n\n## Импортируйте только нужное\n\n2mqjs публикует subpath exports, чтобы bundler мог не тянуть лишнее:\n\n```ts\nimport { registerComponent } from '2mqjs/components';\nimport { emitPort, onPort } from '2mqjs/ports';\nimport { registerTask } from '2mqjs/tasks';\n```\n\nКорневой экспорт тоже доступен, если удобнее:\n\n```ts\nimport { registerComponent, emitPort, registerTask } from '2mqjs';\n```\n\n## Быстрый старт\n\n### 1. Ленивые UI-компоненты\n\n```ts\nimport { registerComponent, runComponentLoader } from '2mqjs/components';\n\nregisterComponent({\n name: 'product-card',\n load: () => import('./components/product-card.js'),\n when: 'visible',\n hasDisplay: true,\n});\n\nrunComponentLoader();\n```\n\n```html\n\n```\n\nМодуль компонента:\n\n```ts\nexport function display(el: Element) {\n el.innerHTML = '';\n}\n\nexport function boot(el: Element) {\n el.querySelector('[data-add]')?.addEventListener('click', () => {\n // Тяжёлая логика стартует только после появления компонента.\n });\n}\n```\n\n### 2. Ports: явные события приложения\n\n```ts\nimport { emitPort, onPort } from '2mqjs/ports';\n\nconst off = onPort<{ id: string }>('cart:add', ({ id }) => {\n console.log('Добавить товар', id);\n});\n\nemitPort('cart:add', { id: 'sku-42' });\noff();\n```\n\n### 3. Tasks: предсказуемый порядок запуска\n\n```ts\nimport { registerTask, runTasks } from '2mqjs/tasks';\n\nregisterTask({\n id: 'hydrate-products',\n stage: 'bootstrap',\n when: 'idle',\n run: async () => {\n // Некритичная работа ждёт idle-времени.\n },\n});\n\nawait runTasks('bootstrap');\n```\n\n### 4. Workers: тяжёлая логика вне main thread\n\n```ts\nimport { registerWorker, emitPort } from '2mqjs/workers';\n\nawait registerWorker({\n name: 'productData',\n src: () => import('./workers/productData.worker.js'),\n});\n\nemitPort('productData:init', { page: 'catalog' });\n```\n\n### 5. Store: состояние в dedicated worker\n\n```ts\nimport { defineGlobalStore } from '2mqjs/store';\n\nconst app = defineGlobalStore({\n name: 'shop',\n initial: { cart: [] as string[] },\n persist: ['cart'],\n});\n\nawait app.ready;\n\napp.watch('cart', cart => {\n console.log('Корзина изменилась', cart);\n});\n\napp.add('cart', 'sku-42');\n```\n\n## Модули\n\n| Модуль | Для чего | Импорт |\n| --- | --- | --- |\n| Components | Ленивые UI-модули, `display`/`boot`, запуск по видимости и взаимодействию | `2mqjs/components` |\n| Ports | Лёгкий pub/sub со snapshot/replay | `2mqjs/ports` |\n| Workers | Регистрация воркеров и port-based messaging | `2mqjs/workers` |\n| Tasks | Оркестрация запуска, зависимости и runtime-условия | `2mqjs/tasks` |\n| Store | Глобальное состояние вне main thread + persist | `2mqjs/store` |\n| Events | DOM-утилиты: делегирование событий и resize subscriptions | `2mqjs/events` |\n\n## Принципы runtime\n\n- **Откладывать по умолчанию.** Запускать дорогой UI и логику только когда они нужны.\n- **Держать слои явными.** UI, данные, воркеры и orchestration общаются через маленькие контракты.\n- **Не привязывать к фреймворку.** Можно использовать рядом с SSR, islands, виджетами или обычным HTML.\n- **Следить за размером.** Subpath exports и release smoke checks защищают package shape и bundle budgets.\n\n## Текущий roadmap\n\nСледующий цикл разработки сфокусирован на production-grade производительности:\n\n- lazy components без потери первого interaction;\n- shared observers и cache в component loader;\n- cleanup жизненного цикла listeners в ports/tasks/events/workers;\n- patch-based store updates вместо отправки всего state;\n- `SharedWorker` mode для синхронизации стора между вкладками;\n- улучшение scheduler: DAG validation, cancellation, timeouts, concurrency limits;\n- browser smoke tests, benchmarks и bundle-size budgets.\n\nПодробный backlog — в [open issues](https://github.com/Poliklot/2mqjs/issues).\n\n## Релизы\n\n2mqjs теперь использует GitHub automation:\n\n- **CI** гоняет release gate на поддерживаемых версиях Node.js.\n- **CodeQL** сканирует JavaScript/TypeScript код.\n- **Dependabot** группирует обновления npm и GitHub Actions.\n- **Release Please** создаёт release PR из Conventional Commits.\n- npm-публикация идёт через GitHub Actions с provenance.\n\nЛокальная проверка перед релизом:\n\n```bash\nnpm run release:check\n```\n\n## Лицензия\n\n[MIT](./LICENSE)\n","readmeFilename":"README.ru.md"}