@topvisor/ui 1.0.42-checkvisibility.3 → 1.0.42-dev.1

package/PUBLISH.md

@@ -0,0 +1,88 @@
+# Публикация проекта @topvisor/ui в npm
+
+Не путать с публикацией Storybook. О том, как публиковать изменения в storybook на сайте, см. [STORYBOOK.md](./STORYBOOK.md)
+
+Ссылка на опубликованные версии: https://www.npmjs.com/package/@topvisor/ui.
+
+## Как опубликовать новую версию?
+
+Для запуска сборки и публикации необходимо **создать тег** с вашей версией и **запушить его**.
+
+- Выполните одну из команд, которая сама сменит версию и добавит тег:
+	- Для релиза: `npm run npm-release`
+	- Для пререлиза: `npm run npm-prerelease`
+	- Для пререлиза с именем, по желанию: `npm run npm-prerelease dialog`
+- Запушьте изменения, не забудьте запушить тег
+- После отправки тега в git, будет запущен pipeline, который выполнит сборку и публикацию npm пакета.
+  За процессом можно наблюдать на странице проекта в gitlab в разделе pipeline или tags.
+
+Перед каждой публикацией рекомендуется проверять и обновлять версию storybook.
+Периодически необходимо обновлять версии всех зависимостей и проверять работу компонентов после выполнения обновлений.
+
+### Чем отличается релиз от пререлиза?
+
+Для dev веток и небольших изминений используйте пререлизы. Пререлизы могут содержать незаконченный или не до конца проверенный фунционал.
+
+При работе в мастер ветке при пубилкации накомпленных изминений законченного и проверенного функционала используйте релизы.
+
+Релиз отличается от пререлиза следующим:
+
+* При релизе запускается дополнительная генерация документации, а именно: `npm run genDocs`
+* При релизе Версия npm пакета будет помечена тегом **latest**, она будет считаться стабильной
+
+## Как происходит публикация под капотом?
+
+Настройки и скрипты сборки см. в папке **./scripts/**.
+
+## Публикация в CDN
+
+Публикацию на CDN мы не производим.
+
+Однако после публикации в npm пакет будет автоматически доступен на публичных CDN, которые предоставляют доступ к npm, например:
+
+- https://unpkg.com/@topvisor/ui/
+- https://cdn.jsdelivr.net/npm/@topvisor/ui/
+
+## Ручная сборка
+
+Обычно сборка и публикация происходит автоматически, но вам может потребоваться производить сборку для проведения тестов.
+
+Если вам надо проверить то, как работает сборка, выполните команду: `npm run ci-cd-build`.
+
+После сборки весь код сборки будте доступен в папке `./dist/`.
+
+## Формат версий
+
+Версии генерируется в соответствие с соглашением: https://semver.org/lang/ru/
+
+**Релизы**:
+
+{{ major }}.{{ minor }}.{{ patch }}
+
+**Пререлизы**:
+
+{{ major }}.{{ minor }}.{{ patch }}-{{ prerelease }}
+
+prerelease может состоять только из номера версии или из имени и номера версии:
+
+- {{ devVersion }}
+- {{ devName }}.{{ devVersion }}
+
+В dev сборке базовая версия `{{ major }}.{{ minor }}.{{ patch }}` не изменяется и всегда берется из master,
+к ней через дефис версия пререлиза `{{ devName }}.{{ devVersion }}`.
+
+### Пример работы с версиями
+
+Правильный алгоритм упростит понимание того, с какой версией сейчас ведется работа и исключит случайное создание одинаковых версий.
+
+- вы сделали fork от `1.0.0`
+- вы что-то поменяли и сделали **пререлиз** без указания имени, теперь версия: `1.0.1-0`
+- вы что-то поменяли и сделали **пререлиз** с указанием имени пререлиза `myTask`, теперь версия: `1.0.1-myTask.0`
+- если вы сделаете еще раз **пререлиз**, то получите версию на 1 больше: `1.0.1-myTask.1`
+- если вы сделаете еще раз **пререлиз** с указанием другого имени `myTaskDocs`, то нумерация пойдет сначала с новым именем: `1.0.1-myTaskDocs.0`
+- master версия обновилась до `1.0.2` и вы ее загрузили в свою ветку
+- при мерже отдайте приоритет версии из мастера: `1.0.2`
+- если вы теперь сделаете **пререлиз** без имени, то получите версию: `1.0.2-0`
+- ваша ветка готова к релизу и ее смержили в master
+- на данном этапе в master могут быть смержены и другие ветки
+- выполнен **релиз**, теперь версия: `1.0.3`

package/README.md

@@ -1,82 +1,60 @@
-# UI kit Topvisor Vue
+[![pipeline](https://gitlab.topvisor.com/topvisor/ui/badges/master/pipeline.svg)](https://ui.topvisor.com/)
+[![npm version](https://badge.fury.io/js/@topvisor%2Fui.svg)](https://badge.fury.io/js/@topvisor%2Fui)
 
-## Vue компоненты
+# Topvisor UI kit, Vue 3
 
-Компоненты поставляются в двух форматах:
+Документация по работе с UI-kit и разработке компонентов см. здесь: https://ui.topvisor.com/.
 
-- amd (requirejs)
-- es
+npm пакет см. здесь: https://www.npmjs.com/package/@topvisor/ui
 
-Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.
+В проекте необходимо использовать самую свежую версию node.js LTS и npm.
 
-Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.
+В проекте используется storybook: https://storybook.js.org/
 
-Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки.
-В этой же папке располагаются стили для асинхронно загружаемых компонентов.
-Все стили грузятся автоматически вместе с загрузкой компонента.
+Storybook настроен для работы с Vite и Vue с поддержкой Hot Module Replacement.
 
-Документация и описание всех компонентов: https://ui.topvisor.com/
+## Установка
 
-## Общие стили UI
+1. Установить node.js (npm входит в состав node.js): https://nodejs.org/ru/download
+2. Склонировать проект: `git clone https://gitlab.topvisor.com/topvisor/ui.git`
+3. Обновить до последней версии npm: `npm i -g npm@latest`
+4. Установить зависимости: `npm i`
+5. Запустить локальный сервер Storybook: `npm run storybook`
 
-- /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
-- /assets/themes/* - стили тем оформления
+## Основные команды Storybook
 
-## Подключение стилей
+Информация о параметрах dev сервера и сборки: https://storybook.js.org/docs/react/api/cli-options
 
-Стили компонентов подгружаются автоматически.
+- обновить Storybook `npx storybook@latest upgrade`
+- запуск локального сервера Storybook: `storybook dev`
+- запуск сборки Storybook: `storybook build`:
 
-Стили UI core.css необходимо подгрузить на страницу вручную.
+## Локальный сервер разработки
 
-```js
-import '@topvisor/ui/assets/core.css';
-```
+- загрузить все зависимости проекта (выполнять один раз): `npm -i`
+- запуск локального сервера Storybook: `npm run storybook`
+- запуск локального сервера Storybook в локальной сети, см. **On your network**: `npm run storybook-net`
 
-```html
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">
-```
+В режиме **On your network** ссылку с этим адресом можно передавать другим пользователям в вашей
+сети и использовать для тестов с мобильного устройства.
+Однако обратите внимание, что не все функции браузера доступны по адресу без **https**, если это не **localhost**.
 
-## Подключение стилей темы
+## Локальная сборка storybook в статический сайт
 
-Стили темы необходимо подгрузить на страницу вручную.
+Не путать со сборкой проекта **@topvisor/ui**.
 
-Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.
+Выполнить сборку: `storybook build` 
 
-```js
-import '@topvisor/ui/assets/themes/light.css';
-```
+## Сборка storybook на сайт
 
-```html
+Сборка storybook производится автоматически через CI/CD и публикуется на сайте. Вам нет необходимости делать сборку самостоятельно.
 
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
-```
+Для запуска сборки нужно поменять версию или любую другую информацию в файле package.json.
+О том. как правильно писать версии читайте в [PUBLISH.md](./PUBLISH.md)
 
-## Внешние зависимсоти
+Адреса сайтов:
 
-Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.
+- Основной дрес сайта storybook c UI: https://ui.topvisor.com/.
+- Dev сайт сайта со storybook c UI: https://{{ имя-ветки }}.ui.topvisor.com
 
-```js
-import '@topvisor/ui/icomoon/style.css';
-```
-
-```html
-
-<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
-```
-
-## Подключение компонентов
-
-Пример подключения библиотеки Forms и компонента Button:
-
-```javascript
-require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
-	console.log(Button);
-});
-
-require(['@topvisor/ui/forms/forms.amd'], Forms => {
-	const { Button } = Forms;
-
-	console.log(Forms);
-	console.log(Button);
-});
-```
+В названии веток могут быть только маленькие латинские буквы, цифры и знак "-". Ветки с некорректным названием в репозитории сохранены не будут.

package/STORYBOOK.md

@@ -0,0 +1,41 @@
+# Пубилкация проекта UI Storybook
+
+https://storybook.js.org/
+
+## Основные команды Storybook
+
+Информация о параметрах dev сервера и сборки: https://storybook.js.org/docs/react/api/cli-options
+
+- `npx storybook@latest upgrade`: обновить Storybook
+- `storybook dev`: запуск локального сервера Storybook
+- `storybook build`: запуск сборки Storybook
+
+## Локальный сервер разработки
+
+- `npm -i`: загрузить все зависимости проекта (выполнять один раз)
+- `npm run storybook`: запуск локального сервера Storybook
+- `npm run storybook-net`: запуск локального сервера Storybook в локальной сети, см. **On your network**
+
+В режиме **On your network** ссылку с этим адресом можно передавать другим пользователям в вашей
+сети и использовать для тестов с мобильного устройства.
+Однако обратите внимание, что не все функции браузера доступны по адресу без **https**, если это не **localhost**.
+
+## Сборка storybook в статический сайт
+
+Не путать со сборкой проекта **@topvisor/ui**.
+
+`storybook build`: выполнить сборку
+
+## Сборка storybook на сайт
+
+Сборка storybook производится автоматически через CI/CD и публикуется на сайте. Вам нет необходимости делать сборку самостоятельно.
+
+Для запуска сборки нужно поменять версию или любую другую информацию в файле package.json.
+О том. как правильно писать версии читайте в [PUBLISH.md](./PUBLISH.md)
+
+Адреса сайтов:
+
+- Основной дрес сайта storybook c UI: https://ui.topvisor.com/.
+- Dev сайт сайта со storybook c UI: https://{{ имя-ветки }}.ui.topvisor.com
+
+В названии веток могут быть только маленькие латинские буквы, цифры и знак "-". Ветки с некорректным названием в репозитории сохранены не будут.

package/USE_IN_PROJECT.md

@@ -0,0 +1,32 @@
+[![pipeline status](https://gitlab.topvisor.com/topvisor/ui/badges/master/pipeline.svg)](https://gitlab.topvisor.com/topvisor/ui/-/commits/master)
+[![npm version](https://badge.fury.io/js/@topvisor%2Fui.svg)](https://badge.fury.io/js/@topvisor%2Fui)
+
+# Использование в других проектах
+
+## Использование @topvisor/ui после публикации, пример с topvisor.com
+
+Опубликованный пакет можно сразу использовать через публичный [CDN](PUBLISH.md#публикация-в-cdn).
+
+Подключение js пактов в topvisor.com настраивается в
+файле [requirejs.json](https://gitlab.topvisor.com/topvisor/topvisor.com/-/tree/master/requirejs.json).
+
+## Тестирование сборки @topvisor/ui без публикации
+
+Для тестирования сборки используется локальный сервер предпросмотра **vite preview** с автосборкой vite build --watch.
+
+Получаемые файлы с этого сервера не кешируются.
+
+Режим автосборки автоматически пересобирает проект и новая сборка доступна на сервере предпросмотра.
+
+Адрес севера предпросмотра по умолчанию: http://localhost:4173
+
+- `npm run preview` - запустить сервер предпросмотра с автосборкой
+- пропишите в importmap: `"@localhost/@topvisor/ui/": "http://localhost:4173"`
+- на сайте **topvisor.dev** настроена автоматическое подключение `@localhost/@topvisor/ui/`, если сервер запущен
+
+Пример изменения в пути при запуске **vite preview**: `https://cdn.jsdelivr.net/npm/@topvisor/ui` => `http://localhost:4173`
+
+## Установка в качестве git submodule в topvisor.dev
+
+- ```git submodule init``` - инициализация подмодуля в проекте
+- ```git submodule update``` - загрузка подмодуля, будет произведен clone репозитория подмодуля

package/package.json

@@ -1,9 +1,23 @@
 {
 	"name": "@topvisor/ui",
 	"private": false,
-	"version": "1.0.42-checkvisibility.3",
+	"version": "1.0.42-dev.1",
 	"type": "module",
 	"description": "Topvisor UI-kit Vue",
+	"scripts": {
+		"storybook": "STORYBOOK_PROJECT_ROOT=$(pwd) npx storybook dev -p 6006 --ci",
+		"storybook-net": "./storybook-dev.sh",
+		"build-storybook": "STORYBOOK_PROJECT_ROOT=$(pwd) storybook build -o storybook-static",
+		"preview": "concurrently \"vite build --mode preview --watch\" \"bash scripts/afterBuild.sh\" \"vite preview --mode preview --port 4173\"",
+		"npm-release": "npm run ci-cd-genDocs & npx standard-version --commit-all --release-as patch",
+		"npm-prerelease": "npx standard-version --commit-all --release-as patch --prerelease",
+		"ci-cd-genDocs": "bash scripts/genDocs.sh",
+		"ci-cd-build": "vite build && bash scripts/afterBuild.sh",
+		"ci-cd-publish-latest": "npm publish ./dist/ --tag latest",
+		"ci-cd-publish-dev": "npm publish ./dist/ --tag dev",
+		"ci-cd-chromatic": "npx chromatic --exit-zero-on-changes",
+		"chromatic": "npx chromatic"
+	},
 	"author": "Topvisor",
 	"keywords": [
 		"topvisor",
@@ -26,9 +40,56 @@
 		"./tabs/tabs.js": "./tabs/tabs.js",
 		"./tabsView/tabsView.js": "./tabsView/tabsView.js"
 	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.0.1",
+		"@faker-js/faker": "^9.9.0",
+		"@rive-app/canvas-lite": "^2.30.4",
+		"@rollup/plugin-babel": "^6.0.4",
+		"@rollup/plugin-commonjs": "^28.0.6",
+		"@rollup/plugin-node-resolve": "^16.0.1",
+		"@rollup/plugin-terser": "^0.4.4",
+		"@storybook/addon-a11y": "9.0.18",
+		"@storybook/addon-designs": "^10.0.2",
+		"@storybook/addon-docs": "9.0.18",
+		"@storybook/addon-links": "9.0.18",
+		"@storybook/global": "^5.0.0",
+		"@storybook/vue3-vite": "9.0.18",
+		"@types/jquery": "^3.5.32",
+		"@types/jqueryui": "^1.12.24",
+		"@types/lodash-es": "^4.17.12",
+		"@vitejs/plugin-vue": "^6.0.0",
+		"@vueuse/core": "^13.5.0",
+		"chromatic": "^13.1.2",
+		"clean-css-cli": "^5.6.3",
+		"concurrently": "^9.2.0",
+		"conventional-changelog-cli": "^5.0.0",
+		"glob": "^11.0.3",
+		"lodash-es": "^4.17.21",
+		"magic-string": "^0.30.17",
+		"mdx-mermaid": "^2.0.3",
+		"picocolors": "^1.1.1",
+		"punycode": "^2.3.1",
+		"remark-gfm": "^4.0.1",
+		"standard-version": "^9.5.0",
+		"storybook": "9.0.18",
+		"storybook-addon-pseudo-states": "9.0.18",
+		"string-hash": "^1.1.3",
+		"topvisor-openapi": "github:topvisor/topvisor-openapi",
+		"transliteration": "^2.3.5",
+		"ts-json-schema-generator": "^2.4.0",
+		"typedoc": "^0.28.7",
+		"typedoc-plugin-markdown": "^4.7.1",
+		"typedoc-plugin-mdn-links": "^5.0.5",
+		"typescript": "^5.8.3",
+		"vite": "^7.0.6",
+		"vite-plugin-checker": "^0.10.1",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-dynamic-import": "^1.6.0",
+		"vite-plugin-webpackchunkname": "^1.0.3"
+	},
 	"peerDependencies": {
 		"pinia": "2.3.1",
-		"vue": "3.5.13"
+		"vue": "3.5.18"
 	},
 	"overrides": {
 		"storybook": "$storybook"

package/public/README.md

@@ -0,0 +1,82 @@
+# UI kit Topvisor Vue
+
+## Vue компоненты
+
+Компоненты поставляются в двух форматах:
+
+- amd (requirejs)
+- es
+
+Компоненты делятся на разные библиотеки и доступны через импорт этих библиотек.
+
+Каждая библиотека находится в отдельной папке, соответствующей имени библиотеки.
+
+Все стили модулей находятся в папке /assets/ в файлах соответствующих имени библиотеки.
+В этой же папке располагаются стили для асинхронно загружаемых компонентов.
+Все стили грузятся автоматически вместе с загрузкой компонента.
+
+Документация и описание всех компонентов: https://ui.topvisor.com/
+
+## Общие стили UI
+
+- /assets/core.css - основная палитра цветов и общие стили и модификаторы компонентов
+- /assets/themes/* - стили тем оформления
+
+## Подключение стилей
+
+Стили компонентов подгружаются автоматически.
+
+Стили UI core.css необходимо подгрузить на страницу вручную.
+
+```js
+import '@topvisor/ui/assets/core.css';
+```
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/core.css" rel="stylesheet">
+```
+
+## Подключение стилей темы
+
+Стили темы необходимо подгрузить на страницу вручную.
+
+Для смены темы необходимо подгрузить файл стилей необходимой темы и отключить стили предыдущей темы.
+
+```js
+import '@topvisor/ui/assets/themes/light.css';
+```
+
+```html
+
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/assets/themes/light.css" rel="stylesheet">
+```
+
+## Внешние зависимсоти
+
+Стили icomoon добавлены в пакет и их необходимо подгрузить на страницу вручную.
+
+```js
+import '@topvisor/ui/icomoon/style.css';
+```
+
+```html
+
+<link href="https://cdn.jsdelivr.net/npm/@topvisor/ui/icomoon/style.css" rel="stylesheet">
+```
+
+## Подключение компонентов
+
+Пример подключения библиотеки Forms и компонента Button:
+
+```javascript
+require(['@topvisor/ui/forms/forms.amd'], ({ Button }) => {
+	console.log(Button);
+});
+
+require(['@topvisor/ui/forms/forms.amd'], Forms => {
+	const { Button } = Forms;
+
+	console.log(Forms);
+	console.log(Button);
+});
+```

package/rollup.config.ts

@@ -0,0 +1,38 @@
+import type { PreRenderedAsset, RollupOptions } from 'rollup';
+
+export default {
+	external: [
+		'vue',
+		'require',
+		'@rive-app/canvas-lite',
+	],
+	output: {
+		globals: {
+			vue: 'Vue',
+			pinia: 'Pinia',
+		},
+
+		exports: 'named',
+
+		manualChunks: {
+			/**
+			 * forms это базовая бибилиотека, которая должна грузиться максмально быстро
+			 *
+			 * Объединить все js и css forms в один файл, необходимо для предзагрузки основных стилей UI на страницу
+			 *
+			 * При такой настройке в forms.js будут добавлены все ее зависимости
+			 */
+			forms: [
+				'./src/components/forms/forms.ts',
+			],
+		},
+		chunkFileNames: '.chunks/[name]-[hash].[format].js',
+		assetFileNames: (_chunkInfo: PreRenderedAsset) => {
+			if (_chunkInfo.originalFileName?.startsWith('src/resources/styles/themes/')) {
+				return `assets/themes/[name][extname]`;
+			}
+
+			return `assets/[name][extname]`;
+		},
+	},
+} satisfies RollupOptions;

package/scripts/afterBuild.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+echo ''
+echo 'run afterBuild...'
+
+echo '- remove /dist/for-delete/'
+rm -rf dist/for-delete/
+
+echo '- make package.json'
+cp package.json dist/
+npm pkg --prefix dist delete scripts devDependencies
+
+cp web-types.json dist/

package/scripts/cssModules.ts

@@ -0,0 +1,39 @@
+import stringHash from 'string-hash';
+
+// https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L36
+function generateScopedNameDefault(name: string, filename: string, css: string) {
+	const i = css.indexOf(`.${name}`);
+	const lineNumber = css.substr(0, i).split(/[\r\n]/).length;
+	const hash = stringHash(css).toString(36).substr(0, 5);
+
+	return `_${name}_${hash}_${lineNumber}`;
+}
+
+export default {
+	/**
+	 * Оставить глобальные классы без преобразования
+	 * С глобальными классами нельзя работать через css module
+	 * С глобальными классами можно работать, определяя их их в интерфесе vue css module
+	 * @param name - имя класса
+	 * @param filename - файл стилей
+	 * @param css - стили
+	 * @returns Имя класса после предкомпиляции
+	 */
+	generateScopedName: (name: string, filename: string, css: string) => {
+		const isGlobalCSS = (name: string, filename: string) => {
+			// классы topvisor-ui
+			if (name.indexOf('top-') === 0) return true;
+
+			return false;
+		};
+
+		if (isGlobalCSS(name, filename)) {
+			return name;
+		}
+
+		return generateScopedNameDefault(name, filename, css);
+	},
+	// globalModulePaths: [],
+	//	scopeBehaviour: 'global',
+	//	exportGlobals: true,
+};

package/scripts/genDocs.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+echo "📚 Генерация документации по js функциям"
+
+git diff --quiet --cached || echo 'В репозитории не должно быть не закомиченных изменений'
+git diff --quiet --cached || exit 1
+
+npx typedoc --entryPoints "src/core/utils/*.ts" --out "src/core/utils/References" --publicPath "?path=/docs/core-utils-references"
+
+echo ''
+echo 'replace file link to storybook path format'
+
+sed -i 's/%5C/\//g' src/core/utils/References/*.mdx
+sed -i 's/%5C/\//g' src/core/utils/References/*/*.mdx
+
+sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3--docs/' src/core/utils/References/*.mdx
+sed -i 's/\(core-utils-references\)\/\(.\{1,99\}\)\/\(\w\{1,99\}\)\/\(\w\{1,99\}\).mdx/\1-\2-\3-\4--docs/' src/core/utils/References/*/*.mdx
+
+git add src/core/utils/References
+git diff --quiet --cached || git commit -m "docs(js utils): Обновлена документация по утилитам"

package/scripts/plugin/amdFix.ts

@@ -0,0 +1,83 @@
+import color from 'picocolors';
+import MagicString from 'magic-string';
+import type { Plugin } from 'vite';
+import type { RenderedChunk } from 'rollup';
+import { addImportCSSCodeAMD } from './autoloadCSS';
+
+/**
+ * Добавить импорт requre в amd модуль, необходимо для переопределения глобального require для относитльной навигации
+ * @param {MagicString} ms - код amd модуля
+ */
+const addLocalRequire = (ms: MagicString): MagicString => {
+	// ничего не делать, если локальный require уже определен
+	if (ms.toString().match(/[\[,]\s?'require'[,\]]/)) {
+		return ms;
+	}
+
+	// работа без define с зависимостями не поддерживается
+	if (!ms.toString().match(/define\(\[/)) {
+		return ms;
+	}
+
+	// полагаемся, что первое определение define() это то, что нам нужно
+	ms.replace('define([', `define(['require', `);
+
+	// полагаемся, что первое определение calback это то, что нам нужно
+	ms.replace(/function\s?\(/, 'function(require, ');
+
+	return ms;
+};
+
+/**
+ * Добавить импорт Vue в amd модуль
+ * @param {MagicString} ms - код amd модуля
+ */
+const fixVue = (ms: MagicString): MagicString => {
+	ms.replace(/'use strict';/g, '\'use strict\'; if(typeof vue === \'undefined\') var vue = window.Vue;');
+
+	return ms;
+};
+
+/**
+ * Удалить вставленные стили из amd модуля, которые долждны загружаться из файла
+ * @param {MagicString} ms - код amd модуля
+ */
+const removeInlineCSS = (ms: MagicString): MagicString => {
+	// amd as legacy: https://github.com/vitejs/vite/issues/2062#issuecomment-782388010
+	ms.replace(/var __vite_style__.*?document\.head\.appendChild\(__vite_style__\);/g, '');
+
+	return ms;
+};
+
+/**
+ * Опеределить значение переменной vue в импорте requriejs
+ *
+ * Vue не предоставляет export для amd
+ */
+export default (): Plugin => {
+	return {
+		name: 'vite:tv-amd-fix',
+		apply: 'build',
+		enforce: 'post',
+
+		renderChunk(code: string, chunk: RenderedChunk) {
+			if (chunk.fileName.includes('.amd.js') && code.includes('define(')) {
+				const ms = new MagicString(code);
+
+				console.log(`amdFix: ${color.yellow(chunk.name)}`);
+
+				// MagicString не должен содержать пересекающихся replace
+				// https://github.com/Rich-Harris/magic-string/issues/208
+				addLocalRequire(ms);
+				fixVue(ms);
+				removeInlineCSS(ms);
+				addImportCSSCodeAMD(ms, chunk.name);
+
+				return {
+					code: ms.toString(),
+					map: ms.generateMap(),
+				};
+			}
+		},
+	};
+}