fix: vue 2 support for provideLocal and injectLocal

packages/shared/createInjectionState/index.test.ts

@@ -1,48 +1,51 @@
-import { defineComponent, h, ref } from 'vue-demi'
+import { type Ref, defineComponent, h, nextTick, ref } from 'vue-demi'
 import { createInjectionState } from '@vueuse/shared'
 import { describe, expect, it } from 'vitest'
-import { mount } from '../../.test'
+import { mount, useSetup } from '../../.test'
 
 const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
   const count = ref(initialValue)
   return count
 })
 
-const ChildComponent = defineComponent({
-  setup() {
-    const count = useCountState()
-    expect(count?.value).toBe(0)
+describe('createInjectionState simple example', () => {
+  it('should work', async () => {
+    let count: Ref<number> | undefined
 
-    return () => h('div')
-  },
-})
+    const ChildComponent = defineComponent({
+      setup() {
+        count = useCountState()
 
-const RootComponent = defineComponent({
-  setup() {
-    useProvideCountState(0)
+        return () => h('div')
+      },
+    })
 
-    return () => h(ChildComponent)
-  },
-})
+    const RootComponent = defineComponent({
+      setup() {
+        useProvideCountState(114514)
 
-describe('createInjectionState simple example', () => {
-  it('should work', () => {
-    mount(RootComponent)
-  })
-})
+        return () => h(ChildComponent)
+      },
+    })
 
-const CanProvidingStateAndInjectedStateInSameComponent = defineComponent({
-  setup() {
-    useProvideCountState(114514)
-    const count = useCountState()!
-    expect(count.value).toBe(114514)
+    const vm = mount(RootComponent)
+    await nextTick()
 
-    return () => h('div')
-  },
+    expect(count?.value).toBe(114514)
+    vm.unmount()
+  })
 })
 
 describe('allow call useProvidingState and useInjectedState in same component', () => {
-  it('should work', () => {
-    mount(CanProvidingStateAndInjectedStateInSameComponent)
+  it('should work', async () => {
+    const vm = useSetup(() => {
+      useProvideCountState(114514)
+      const count = useCountState()!
+
+      return { count }
+    })
+    await nextTick()
+    expect(vm.count).toBe(114514)
+    vm.unmount()
   })
 })

packages/shared/injectLocal/index.test.ts

@@ -0,0 +1,45 @@
+import { type InjectionKey, defineComponent, h, nextTick } from 'vue-demi'
+import { injectLocal, provideLocal } from '@vueuse/shared'
+import { describe, expect, it } from 'vitest'
+import { mount, useSetup } from '../../.test'
+
+describe('provideLocal injectLocal cross component example', () => {
+  it('should work', async () => {
+    const CountKey: InjectionKey<number> | string = Symbol('count')
+    let count: number | undefined
+    const ChildComponent = defineComponent({
+      setup() {
+        count = injectLocal(CountKey)
+
+        return () => h('div')
+      },
+    })
+
+    const RootComponent = defineComponent({
+      setup() {
+        provideLocal(CountKey, 2333)
+
+        return () => h(ChildComponent)
+      },
+    })
+    const vm = mount(RootComponent)
+    await nextTick()
+
+    expect(count).toBe(2333)
+    vm.unmount()
+  })
+})
+
+describe('provideLocal injectLocal same component example', () => {
+  it('should work', async () => {
+    const CountKey: InjectionKey<number> | string = Symbol('count')
+    const vm = useSetup(() => {
+      provideLocal(CountKey, 2333)
+      const count = injectLocal(CountKey)!
+      return { count }
+    })
+    await nextTick()
+    expect(vm.count).toBe(2333)
+    vm.unmount()
+  })
+})

packages/shared/injectLocal/index.ts

@@ -13,9 +13,9 @@ import { localProvidedStateMap } from '../provideLocal/map'
 // @ts-expect-error overloads are not compatible
 export const injectLocal: typeof inject = (...args) => {
   const key = args[0] as string | symbol
-  const instance = getCurrentInstance()
+  const instance = getCurrentInstance()?.proxy
   if (instance == null)
-    throw new Error('injectEnhancedAllowanceOfCallsFromTheSameComponent must be called in setup')
+    throw new Error('injectLocal must be called in setup')
 
   if (localProvidedStateMap.has(instance) && key in localProvidedStateMap.get(instance)!)
     return localProvidedStateMap.get(instance)![key]

packages/shared/provideLocal/index.ts

@@ -11,7 +11,7 @@ import { localProvidedStateMap } from './map'
  * ```
  */
 export const provideLocal: typeof provide = (key, value) => {
-  const instance = getCurrentInstance()
+  const instance = getCurrentInstance()?.proxy
   if (instance == null)
     throw new Error('provideLocal must be called in setup')
 

packages/shared/provideLocal/map.ts

@@ -1,3 +1,3 @@
 import type { getCurrentInstance } from 'vue-demi'
 
-export const localProvidedStateMap = new WeakMap<NonNullable<ReturnType<typeof getCurrentInstance>>, Record<string | symbol, any>>()
+export const localProvidedStateMap = new WeakMap<NonNullable<NonNullable<ReturnType<typeof getCurrentInstance>>['proxy']>, Record<string | symbol, any>>()