profinansy-ui-lib 4.0.78 → 4.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "profinansy-ui-lib",
-  "version": "4.0.78",
+  "version": "4.0.80",
   "main": "./dist/profinansy-ui-lib.cjs",
   "module": "./dist/profinansy-ui-lib.es.js",
   "types": "./dist/index.d.ts",

package/readme.md

@@ -63,11 +63,12 @@ yarn chromatic
 ### Как смотреть изменения
 1. Надо расшарить локально репу общих компонентов, для этого в терминале в корневой директории проекта **profinansy-react-components** запустить команду **yarn link**
 2. В своем проекте, в котором используется эта репа (profinansy, к примеру), надо выполнить команду **yarn remove profinansy-ui-lib**, затем **yarn link profinansy-ui-lib**
-3. **Одноразовая настройка:** В `next.config.js` потребителя в существующую функцию `webpack(config)` нужно добавить алиасы. Это заставит webpack резолвить `react`, `react-dom` и `styled-components` из `node_modules` потребителя, а не из симлинкнутой библиотеки. Без этого при `yarn link` будет два экземпляра React и ошибки типа "cannot be used as a JSX component" / "Invalid hook call". Алиасы безвредны без `yarn link` (указывают туда же, куда webpack резолвит по умолчанию), поэтому их можно оставить навсегда:
+3. **Одноразовая настройка:** В конфиге сборщика потребителя нужно добавить алиасы для `react`, `react-dom` и `styled-components`. Это заставит сборщик резолвить эти пакеты из `node_modules` потребителя, а не из симлинкнутой библиотеки. Без этого при `yarn link` будет два экземпляра React и ошибки типа "cannot be used as a JSX component" / "Invalid hook call". Алиасы безвредны без `yarn link` (указывают туда же, куда сборщик резолвит по умолчанию), поэтому их можно оставить навсегда:
+
+**Next.js** — в `next.config.js`, внутрь существующей функции `webpack(config) { ... }` добавить:
 ```javascript
 const path = require('path')
 
-// в next.config.js, внутрь существующей функции webpack(config) { ... } добавить:
 config.resolve.alias = {
   ...config.resolve.alias,
   react: path.resolve(__dirname, 'node_modules/react'),
@@ -75,6 +76,36 @@ config.resolve.alias = {
   'styled-components': path.resolve(__dirname, 'node_modules/styled-components'),
 }
 ```
+
+**Vite** — в `vite.config.ts` добавить в `resolve`:
+```javascript
+import path from 'path'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      'styled-components': path.resolve(__dirname, 'node_modules/styled-components'),
+    }
+  }
+})
+```
+
+**Webpack** — в `webpack.config.js` добавить в `resolve`:
+```javascript
+const path = require('path')
+
+module.exports = {
+  resolve: {
+    alias: {
+      react: path.resolve(__dirname, 'node_modules/react'),
+      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      'styled-components': path.resolve(__dirname, 'node_modules/styled-components'),
+    }
+  }
+}
+```
 4. Запустите проект-потребитель как обычно (например, **yarn dev** в profinansy frontend). Storybook в библиотеке запускать не нужно — он нужен только для изолированной разработки компонентов
 5. Для применения изменений после правок в библиотеке выполняйте команду **yarn build** в репозитории **profinansy-react-components** — потребитель подхватит новый билд через симлинк автоматически
 6. После завершения работы над компонентами, надо отвязать привязку: **yarn unlink profinansy-ui-lib**, затем **yarn add --force profinansy-ui-lib**