refactor: remove ref for el

vuejs · Nov 13, 2024 · 77c648f · 77c648f
1 parent 819125c
commit 77c648f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/packages/runtime-vapor/src/directives.ts b/packages/runtime-vapor/src/directives.ts
@@ -6,7 +6,7 @@ import {
 } from './component'
 import { warn } from './warning'
 import { normalizeBlock } from './dom/element'
-import { type ShallowRef, getCurrentScope, shallowRef } from '@vue/reactivity'
+import { getCurrentScope } from '@vue/reactivity'
 import { VaporErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 
 export type DirectiveModifiers<M extends string = string> = Record<M, boolean>
@@ -22,7 +22,7 @@ export interface DirectiveBinding<T = any, V = any, M extends string = string> {
 export type DirectiveBindingsMap = Map<Node, DirectiveBinding[]>
 
 export type Directive<T = any, V = any, M extends string = string> = (
-  node: ShallowRef<T>,
+  node: T,
   binding: DirectiveBinding<T, V, M>,
 ) => void
 
@@ -82,7 +82,7 @@ export function withDirectives<T extends ComponentInternalInstance | Node>(
     }
 
     callWithAsyncErrorHandling(dir, instance, VaporErrorCodes.DIRECTIVE_HOOK, [
-      shallowRef(node),
+      node,
       binding,
     ])
   }

diff --git a/packages/runtime-vapor/src/directives/vModel.ts b/packages/runtime-vapor/src/directives/vModel.ts
@@ -47,7 +47,7 @@ export const vModelText: Directive<
   HTMLInputElement | HTMLTextAreaElement,
   any,
   'lazy' | 'trim' | 'number'
-> = ({ value: el }, { source, modifiers: { lazy, trim, number } = {} }) => {
+> = (el, { source, modifiers: { lazy, trim, number } = {} }) => {
   onBeforeMount(() => {
     const assigner = getModelAssigner(el)
     assignFnMap.set(el, assigner)
@@ -116,10 +116,7 @@ export const vModelText: Directive<
   })
 }
 
-export const vModelRadio: Directive<HTMLInputElement> = (
-  { value: el },
-  { source },
-) => {
+export const vModelRadio: Directive<HTMLInputElement> = (el, { source }) => {
   onBeforeMount(() => {
     el.checked = looseEqual(source(), getValue(el))
     assignFnMap.set(el, getModelAssigner(el))
@@ -136,7 +133,7 @@ export const vModelRadio: Directive<HTMLInputElement> = (
 }
 
 export const vModelSelect: Directive<HTMLSelectElement, any, 'number'> = (
-  { value: el },
+  el,
   { source, modifiers: { number = false } = {} },
 ) => {
   onBeforeMount(() => {
@@ -235,10 +232,7 @@ function getCheckboxValue(el: HTMLInputElement, checked: boolean) {
   return checked
 }
 
-export const vModelCheckbox: Directive<HTMLInputElement> = (
-  { value: el },
-  { source },
-) => {
+export const vModelCheckbox: Directive<HTMLInputElement> = (el, { source }) => {
   onBeforeMount(() => {
     assignFnMap.set(el, getModelAssigner(el))
 
@@ -294,10 +288,10 @@ export const vModelCheckbox: Directive<HTMLInputElement> = (
 
 export const vModelDynamic: Directive<
   HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
-> = (elRef, binding) => {
-  const type = elRef.value.getAttribute('type')
-  const modelToUse = resolveDynamicModel(elRef.value.tagName, type)
-  modelToUse(elRef, binding)
+> = (el, binding) => {
+  const type = el.getAttribute('type')
+  const modelToUse = resolveDynamicModel(el.tagName, type)
+  modelToUse(el, binding)
 }
 
 function resolveDynamicModel(tagName: string, type: string | null): Directive {

diff --git a/packages/runtime-vapor/src/directives/vShow.ts b/packages/runtime-vapor/src/directives/vShow.ts
@@ -10,7 +10,7 @@ export interface VShowElement extends HTMLElement {
   [vShowHidden]: boolean
 }
 
-export const vShow: Directive<VShowElement> = ({ value: el }, { source }) => {
+export const vShow: Directive<VShowElement> = (el, { source }) => {
   el[vShowOriginalDisplay] = el.style.display === 'none' ? '' : el.style.display
   renderEffect(() => setDisplay(el, source()))
 }