fix: compatibility with vue 2.7 provide

package.json

@@ -38,7 +38,7 @@
 	"lint-staged": {
 		"*.{js,ts,vue}": [
 			"eslint --cache",
-			"pnpm test"
+			"vitest related --run"
 		]
 	},
 	"devDependencies": {

src/utils.js

@@ -9,12 +9,28 @@ const camelizeRE = /-(\w)/g;
 export const camelize = string => string.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''));
 
 export const initProvide = (parent, key, object) => {
-	if (!parent._provided) {
+	/**
+	 * New behavior introduced in 2.7.0 to always use the parent provide
+	 * if not specified by the component.
+	 * https://github.com/vuejs/vue/blob/v2.7.0/src/v3/apiInject.ts#L26
+	 */
+	if (parent._provided) {
+		const provides = parent._provided;
+		const parentProvides = parent.$parent && parent.$parent._provided;
+		if (provides === parentProvides) {
+			parent._provided = Object.create(parentProvides);
+		}
+	} else {
 		parent._provided = {};
 	}
 
-	if (parent._provided[key]) {
-		Object.assign(parent._provided[key], object);
+	const providedEntry = parent._provided[key];
+	if (providedEntry) {
+		for (const prop in object) {
+			if (hasOwn(object, prop)) {
+				Vue.set(providedEntry, prop, object[prop]);
+			}
+		}
 	} else {
 		parent._provided[key] = Vue.observable(object);
 	}

test/proxi.unit.test.js

@@ -6,7 +6,7 @@ import {
 } from 'vitest';
 import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import Proxi, { ProxiInject } from '..';
+import Proxi, { ProxiInject } from '../src/index.js';
 
 describe('Error handling - Proxi', () => {
 	test('No key - empty', () => {
@@ -580,4 +580,58 @@ describe('Proxi', () => {
 		expect(child2.attributes('some-attr')).toBe('321');
 		expect(child2.text()).toBe('Child 100');
 	});
+
+	test('Shared parent Vue 2.7 bug', async () => {
+		const key = Symbol('key');
+
+		const Child = {
+			mixins: [
+				ProxiInject({
+					from: key,
+				}),
+			],
+			template: '<div v-bind="$$.attrs"></div>',
+		};
+
+		const Parent = {
+			template: `
+			<proxi
+				:proxi-key="key"
+				v-bind="$attrs"
+			>
+				<slot />
+			</proxi>
+			`,
+			components: {
+				Proxi,
+			},
+			data() {
+				return { key };
+			},
+		};
+
+		const usage = {
+			template: `
+				<div>
+					<parent data="123">
+						<child />
+					</parent>
+					<parent data="321">
+						<child />
+					</parent>
+				</div>
+			`,
+			components: {
+				Parent,
+				Child,
+			},
+		};
+
+		const wrapper = mount(usage);
+
+		await Vue.nextTick();
+
+		const html = wrapper.html().replaceAll(/\n|\s{2,}/g, '');
+		expect(html).toBe('<div><div data="123"></div><div data="321"></div></div>');
+	});
 });