refactor(select-menu, grid): remove provide reactive

src/_internal/select-menu/src/SelectMenu.tsx

@@ -9,7 +9,6 @@ import {
   toRef,
   renderSlot,
   provide,
-  reactive,
   Ref,
   UnwrapRef,
   InjectionKey
@@ -45,10 +44,10 @@ export interface InternalSelectMenuInjection {
     tmNode: TreeNode<SelectBaseOption>
   ) => void
   handleOptionClick: (e: MouseEvent, tmNode: TreeNode<SelectBaseOption>) => void
-  valueSet: Set<number | string>
-  pendingTmNode: TreeNode<SelectBaseOption> | null
-  multiple: boolean
-  value: string | number | Array<string | number> | null
+  valueSetRef: Ref<Set<number | string>>
+  pendingTmNodeRef: Ref<TreeNode<SelectBaseOption> | null>
+  multipleRef: Ref<boolean>
+  valueRef: Ref<string | number | Array<string | number> | null>
 }
 
 export const internalSelectionMenuInjectionKey: InjectionKey<InternalSelectMenuInjection> = Symbol(
@@ -257,17 +256,14 @@ export default defineComponent({
         props.onBlur?.(e)
       }
     }
-    provide(
-      internalSelectionMenuInjectionKey,
-      reactive({
-        handleOptionMouseEnter,
-        handleOptionClick,
-        valueSet: valueSetRef,
-        multiple: toRef(props, 'multiple'),
-        value: toRef(props, 'value'),
-        pendingTmNode: pendingNodeRef
-      })
-    )
+    provide(internalSelectionMenuInjectionKey, {
+      handleOptionMouseEnter,
+      handleOptionClick,
+      valueSetRef,
+      multipleRef: toRef(props, 'multiple'),
+      valueRef: toRef(props, 'value'),
+      pendingTmNodeRef: pendingNodeRef
+    })
     onMounted(() => {
       const { value } = scrollbarRef
       if (value) value.sync()

src/_internal/select-menu/src/SelectOption.tsx

@@ -49,32 +49,39 @@ export default defineComponent({
     }
   },
   setup (props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NInternalSelectMenu = inject(internalSelectionMenuInjectionKey)!
+    const {
+      valueRef,
+      pendingTmNodeRef,
+      multipleRef,
+      valueSetRef,
+      handleOptionClick,
+      handleOptionMouseEnter
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(internalSelectionMenuInjectionKey)!
     const rawNodeRef = toRef(props.tmNode, 'rawNode')
     const isPendingRef = useMemo(() => {
-      const { pendingTmNode } = NInternalSelectMenu
+      const { value: pendingTmNode } = pendingTmNodeRef
       if (!pendingTmNode) return false
       return props.tmNode.key === pendingTmNode.key
     })
     function handleClick (e: MouseEvent): void {
       const { tmNode } = props
       if (tmNode.disabled) return
-      NInternalSelectMenu.handleOptionClick(e, tmNode)
+      handleOptionClick(e, tmNode)
     }
     function handleMouseEnter (e: MouseEvent): void {
       const { tmNode } = props
       if (tmNode.disabled) return
-      NInternalSelectMenu.handleOptionMouseEnter(e, tmNode)
+      handleOptionMouseEnter(e, tmNode)
     }
     function handleMouseMove (e: MouseEvent): void {
       const { tmNode } = props
       const { value: isPending } = isPendingRef
       if (tmNode.disabled || isPending) return
-      NInternalSelectMenu.handleOptionMouseEnter(e, tmNode)
+      handleOptionMouseEnter(e, tmNode)
     }
     return {
-      NInternalSelectMenu,
+      multiple: multipleRef,
       rawNode: rawNodeRef,
       isGrouped: useMemo(() => {
         const { tmNode } = props
@@ -83,11 +90,12 @@ export default defineComponent({
       }),
       isPending: isPendingRef,
       isSelected: useMemo(() => {
-        const { multiple, value } = NInternalSelectMenu
+        const { value } = valueRef
+        const { value: multiple } = multipleRef
         if (value === null) return false
         const optionValue = rawNodeRef.value.value
         if (multiple) {
-          const { valueSet } = NInternalSelectMenu
+          const { value: valueSet } = valueSetRef
           return valueSet.has(optionValue)
         } else {
           return value === optionValue
@@ -105,10 +113,10 @@ export default defineComponent({
       isSelected,
       isPending,
       isGrouped,
+      multiple,
       handleClick,
       handleMouseEnter,
-      handleMouseMove,
-      NInternalSelectMenu: { multiple }
+      handleMouseMove
     } = this
     const showCheckMark = multiple && isSelected
     const children = rawNode.render

src/grid/src/Grid.tsx

@@ -7,10 +7,10 @@ import {
   PropType,
   provide,
   toRef,
-  reactive,
   mergeProps,
   ref,
-  VNode
+  VNode,
+  Ref
 } from 'vue'
 import { useBreakpoint, useMemo } from 'vooks'
 import { VResizeObserver, VResizeObserverOnResize } from 'vueuc'
@@ -48,10 +48,9 @@ const gridProps = {
 } as const
 
 export interface NGridInjection {
-  itemStyle: CSSProperties | string | undefined
-  xGap: string | undefined
-  yGap: string | undefined
-  overflow: boolean
+  itemStyleRef: Ref<CSSProperties | string | undefined>
+  xGapRef: Ref<string | undefined>
+  overflowRef: Ref<boolean>
 }
 
 export const gridInjectionKey: InjectionKey<NGridInjection> = Symbol('grid')
@@ -108,15 +107,11 @@ export default defineComponent({
         return undefined
       }
     )
-    provide(
-      gridInjectionKey,
-      reactive({
-        itemStyle: toRef(props, 'itemStyle'),
-        xGap: responsiveXGapRef,
-        yGap: responsiveYGapRef,
-        overflow: overflowRef
-      })
-    )
+    provide(gridInjectionKey, {
+      itemStyleRef: toRef(props, 'itemStyle'),
+      xGapRef: responsiveXGapRef,
+      overflowRef
+    })
     return {
       cPrefix: mergedClsPrefix,
       style: computed<CSSProperties>(() => {

src/grid/src/GridItem.tsx

@@ -51,11 +51,16 @@ export default defineComponent({
   alias: ['Gi'],
   props: gridItemProps,
   setup (props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NGrid = inject(gridInjectionKey)!
+    const {
+      xGapRef,
+      itemStyleRef,
+      overflowRef
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(gridInjectionKey)!
     const self = getCurrentInstance()
     return {
-      NGrid,
+      overflow: overflowRef,
+      itemStyle: itemStyleRef,
       deriveStyle: () => {
         // Here is quite a hack, I hope there is a better way to solve it
         const {
@@ -65,7 +70,7 @@ export default defineComponent({
           privateOffset = 0
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         } = self!.vnode.props as GridItemVNodeProps
-        const { xGap } = NGrid
+        const { value: xGap } = xGapRef
         const mergedXGap = pxfy(xGap || 0)
         return {
           display: !privateShow ? 'none' : '',
@@ -83,13 +88,10 @@ export default defineComponent({
     return (
       <div
         style={
-          ([
-            this.NGrid?.itemStyle,
-            this.deriveStyle()
-          ] as unknown) as CSSProperties
+          ([this.itemStyle, this.deriveStyle()] as unknown) as CSSProperties
         }
       >
-        {renderSlot(this.$slots, 'default', { overflow: this.NGrid.overflow })}
+        {renderSlot(this.$slots, 'default', { overflow: this.overflow })}
       </div>
     )
   }