Vue 3 Attribute Priority Patch

Этот проект демонстрирует решение проблемы приоритета атрибутов (Props vs Fallthrough Attributes) в Vue 3 с использованием patch-package.

🚩 Проблема

В стандартном поведении Vue 3 атрибуты, передаваемые через $attrs ("сквозные атрибуты"), имеют приоритет над явно заданными пропсами при слиянии вложенных компонентов.

Сценарий:

1. Parent передает атрибут disabled в MiddleComponent.
2. Атрибут не объявлен в props промежуточного компонента, поэтому попадает в $attrs.
3. MiddleComponent явно передает :disabled="false" в ChildComponent.

Ожидаемое поведение: ChildComponent получает false. Фактическое поведение (без патча): ChildComponent получает true (значение из $attrs перезаписывает явный проп).

Пример кода:

<!-- App.vue -->
<Comp1 disabled /> <!-- Передаем true -->

<!-- Comp1.vue -->
<Comp2 :disabled="false" /> <!-- Пытаемся передать false, но Vue игнорирует это -->

🛠 Решение (Патч)

В проект внедрен патч для пакета @vue/runtime-core. Он изменяет логику функции mergeProps, меняя стратегию слияния с "последний побеждает" на "первый побеждает" для атрибутов.

Если атрибут уже был задан явно (существует в результирующем объекте), значение из $attrs игнорируется.

Файл патча: /patches/@vue+runtime-core+3.x.x.patch

---

🚀 Установка и запуск

1. Установка зависимостей:

   npm install

   После установки автоматически запустится скрипт postinstall, который применит патч к node_modules.

2. Запуск проекта:

   npm run dev

✅ Как проверить

1. Откройте приложение в браузере.
2. Найдите тестовый компонент (кнопку или инпут), который принимает disabled.
3. Результат: Кнопка должна быть активна (не заблокирована), несмотря на то, что родитель передал атрибут блокировки. Это подтверждает, что явный проп :disabled="false" победил.

---

⚠️ Инструкция при обновлении Vue

Патчи привязаны к конкретной версии пакета. Если вы обновите версию Vue (например, через npm update или npm install vue@latest), patch-package выдаст предупреждение, и патч может не примениться.

Алгоритм действий при обновлении библиотеки:

1. Удалите старый патч: Удалите файл .patch из папки patches/, относящийся к @vue/runtime-core.

2. Внесите изменения вручную: Откройте файл: node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js

   Найдите функцию function mergeProps(...args).

   Найдите блок:

   } else if (key !== "") {
     ret[key] = toMerge[key]; // Statement expected
   }

   Замените его на:

   } else if (key !== "") {
     // Patch: Приоритет явных пропсов. Не перезаписывать, если ключ уже есть.
     if (ret[key] === undefined) {
       ret[key] = toMerge[key];
     }
   }

3. Сгенерируйте новый патч: Выполните команду в терминале:

   npx patch-package @vue/runtime-core

4. Зафиксируйте изменения: В папке patches/ появится новый файл с актуальной версией. Закоммитьте его в git.