From 77c648fbe9e602eb08169324a8044c12b0a9e2d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Tue, 24 Sep 2024 04:07:59 +0800
Subject: [PATCH] refactor: remove ref for el

---
 packages/runtime-vapor/src/directives.ts      |  6 ++---
 .../runtime-vapor/src/directives/vModel.ts    | 22 +++++++------------
 .../runtime-vapor/src/directives/vShow.ts     |  2 +-
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/runtime-vapor/src/directives.ts b/packages/runtime-vapor/src/directives.ts
index 114513280..58eeb7a04 100644
--- 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
index a1b893064..1c8ad5adf 100644
--- 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
index 1797fa6f7..e320b74f0 100644
--- 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()))
 }