szdl-ui-kit

UI-KIT

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

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

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

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

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)

Для /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):

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

Зависимости

Подключение

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)

Список компонентов 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