UI-KIT

Версия 0.0.34. Один npm-пакет szdl-ui-kit с optional entry points: лёгкое ядро, Bitrix24 UI и графики. Архитектурный план: docs/PLAN-optional-b24-chart.md.

Новые возможности (0.0.34)

| Entry | Импорт | Что даёт | |---|---|---| | Core | szdl-ui-kit + style.css | Мобильный kit (mobileKit / useUiKit) без тяжёлых зависимостей | | Chart | szdl-ui-kit/chart + chart.css | Chart, DashBoard (echarts / vue-echarts / swiper) | | B24 UI | szdl-ui-kit/b24 + b24.css | Полный публичный API Bitrix24 UI без Vite/Tailwind в аппе | | B24 Editor | szdl-ui-kit/b24-editor + b24.css | Editor + Collaboration с настоящим @tiptap/y-tiptap (Yjs-коллаборация; апп ставит только yjs) |

• Апп подключает только нужный entry — zip не раздувается echarts или B24 «на всякий случай».
• Webpack 5-аппы импортируют B24 точечно (Modal, Button, …) с tree-shaking.
• В аппе не ставят @bitrix24/b24ui-nuxt, Tailwind и Vite-плагин B24 — стили и компоненты уже в dist kit.
• Версия B24 UI запинена: @bitrix24/[email protected] (обновлять осознанно, отдельной задачей).

Технические особенности

Subpath exports

szdl-ui-kit            → dist/index.js (+ UMD)
szdl-ui-kit/style.css  → стили ядра
szdl-ui-kit/chart      → dist/chart.js
szdl-ui-kit/chart.css  → стили Chart / DashBoard
szdl-ui-kit/b24        → dist/b24/index.js (ESM; y-tiptap = stub)
szdl-ui-kit/b24.css    → один CSS на B24
szdl-ui-kit/b24-editor → dist/b24-editor/index.js (ESM; y-tiptap встроен, yjs = peer)

package.json → exports + sideEffects только для *.css (JS считается tree-shakeable).

Сборка kit (Vite)

| Конфиг | Entry | Формат | |---|---|---| | vite.config.js | core | ESM + UMD | | vite.chart.config.js | chart | ESM + UMD; echarts / vue-echarts / swiper — external | | vite.b24.config.js | b24 | ESM + preserveModules; @tiptap/y-tiptap и vue-router → stub/shim | | vite.b24-editor.config.js | b24-editor | ESM + preserveModules; @tiptap/y-tiptap встроен, yjs → external peer |

Для /b24 и /b24-editor компоненты прогоняются через Vite+плагин. Аппу не нужен bitrix24UIPluginVite / Tailwind.

• /b24 — повседневные компоненты; y-tiptap stub внутри, апп ничего не ставит.
• /b24-editor — если нужна Yjs-коллаборация Editor: npm i yjs + импорт Editor и Collaboration из /b24-editor. Стили те же (b24.css).
  • y-tiptap, tiptap и prosemirror встроены в kit одной копией — иначе свой @tiptap/extension-collaboration в аппе потянул бы вторые @tiptap/core / prosemirror-* и сломался бы.
  • yjs — external: Y.Doc аппа и kit обязаны быть одним экземпляром библиотеки.

Tree-shaking B24 в Webpack 5

Именованный импорт тянет граф зависимостей компонента, а не весь B24:

import { Modal } from 'szdl-ui-kit/b24'; // хорошо

Один b24.css на entry — в zip всегда полный CSS entry (компромисс веса vs поддержка). Замер (npm run measure:b24):

| сценарий | JS gzip | CSS gzip | Δ total gzip | |---|---:|---:|---:| | без b24 | ~0 | 0 | — | | один Modal | ~45 KB | ~53 KB | ~98 KB | | 9 компонентов | ~104 KB | ~53 KB | ~157 KB |

Сырые данные: docs/MEASURE-b24-webpack.json. CSS ≈ 53 KB gzip — у верхней границы плана; дальше при необходимости — purge на сборке kit.

Зависимости

| Пакет | Как | Зачем | |---|---|---| | vue | peer | всегда | | szdl-utils-kit | dependency (+ peer) | ProgressView и др.; ставится вместе с kit | | echarts, vue-echarts | optional peer | только /chart | | swiper | optional peer | только DashBoard | | vue-router | не нужен | B24 собран с router: false (ссылки — обычные <a>); useRoute в B24 — shim, читающий $route, если роутер в аппе есть | | yjs | optional peer | только /b24-editor (Yjs-коллаборация) |

Подключение

npm i szdl-ui-kit

Core

import 'szdl-ui-kit/style.css';
import { mobileKit } from 'szdl-ui-kit';
const { AlertLine, ChecklineCounter, DownButton, MobNavbar, NotDataLine } = mobileKit;

mobileKit / useUiKit не содержат Chart и DashBoard.

Chart

import 'szdl-ui-kit/chart.css';
import { Chart, DashBoard, chartKit } from 'szdl-ui-kit/chart';

Bitrix24 UI

import 'szdl-ui-kit/b24.css';
import { Modal, Button, App, b24UiPlugin } from 'szdl-ui-kit/b24';

// при необходимости:
// app.use(b24UiPlugin)

B24 Editor (Yjs-коллаборация)

Обычный Editor можно брать и из /b24 (без коллаборации). Для совместного редактирования:

npm i yjs
# + провайдер синхронизации по задаче (y-websocket, y-webrtc, …)

import { markRaw } from 'vue';
import * as Y from 'yjs';
import 'szdl-ui-kit/b24.css';
import { Editor, EditorToolbar, Collaboration } from 'szdl-ui-kit/b24-editor';

const ydoc = new Y.Doc();
// markRaw обязателен, если extensions попадают в data()/reactive:
// Vue-Proxy над Y.Doc ломает Yjs ("Unexpected case").
const extensions = markRaw([Collaboration.configure({ document: ydoc })]);

<Editor :extensions="extensions" :starter-kit="{ undoRedo: false }" />

• Collaboration берите из /b24-editor, не из своего @tiptap/extension-collaboration.
• undoRedo: false — история ведётся через Yjs (tiptap иначе предупреждает о конфликте).
• Y.Doc / extensions держите вне reactive-состояния (markRaw, константа модуля или shallowRef).

Migration note (0.0.33 → 0.0.34)

| Было | Стало | |---|---| | mobileKit.Chart / DashBoard | import { Chart, DashBoard } from 'szdl-ui-kit/chart' | | Chart через useUiKit | Нет скрытого алиаса — только явный импорт из /chart |

Список компонентов core (mobileKit)

const mobileKit = {
	CustomCheckbox, Counter, DownButton, MobNavbar, Loader, UserAvatar, Popup,
	AlertLine, AlertLineCounter, NotDataLine,
	ChecklineCounter, ChecklineGroup, ChecklineLink, ChecklineLinkDep,
	TextLineCounter, AvatarLineCounter, AvatarLineCheck, DropDownButton,
	ProgressView, ScreenView,
}

Обновление npm-пакета

• изменения в коде
• типы: types/index.d.ts, types/chart.d.ts, types/b24.d.ts, types/b24-editor.d.ts
• entry: src/ui-kit/index.js, chart.js, b24/index.js, b24-editor/index.js
• npm run build (core + chart + b24 + b24-editor)
• npm login → npm run pub

Скрипты: build:core, build:b24 (оба b24-entry), measure:b24.

Storybook

• сторис в src/stories
• npm run story-build → загрузить storybook-static