refactor: refactor

yangxiuxiu1115 · Feb 1, 2024 · e559a34 · e559a34
1 parent 01af548
commit e559a34
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
@@ -518,10 +518,13 @@ export interface ComponentInternalInstance {
    * For updating css vars on contained teleports
    * @internal
    */
-  ut?: (
-    vars?: Record<string, string>,
-    hydration?: boolean,
-  ) => void | Record<string, string>
+  ut?: (vars?: Record<string, string>) => void
+
+  /**
+   * For getCssVars on hydration
+   * @internal
+   */
+  getCssVars?: () => Record<string, string>
 }
 
 const emptyAppContext = createAppContext()

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -447,10 +447,7 @@ export function createHydrationFunctions(
           !optimized ||
           patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
         ) {
-          const cssVars = parentComponent?.ut?.(undefined, true) as Record<
-            string,
-            string
-          >
+          const cssVars = parentComponent?.getCssVars?.()
           for (const key in props) {
             // check hydration mismatch
             if (

diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts
@@ -26,18 +26,16 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
     return
   }
 
-  const updateTeleports = (instance.ut = (
-    vars = getter(instance.proxy),
-    hydration = false,
-  ) => {
-    if (hydration) {
-      return vars
-    }
+  const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
     Array.from(
       document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
     ).forEach(node => setVarsOnNode(node, vars))
   })
 
+  if (__DEV__ && __SSR__) {
+    instance.getCssVars = () => fommaterVars(getter(instance.proxy))
+  }
+
   const setVars = () => {
     const vars = getter(instance.proxy)
     setVarsOnVNode(instance.subTree, vars)
@@ -94,3 +92,10 @@ function setVarsOnNode(el: Node, vars: Record<string, string>) {
     ;(style as any)[CSS_VAR_TEXT] = cssText
   }
 }
+function fommaterVars(vars: Record<string, string>) {
+  const cssVars: Record<string, string> = {}
+  for (const key in vars) {
+    cssVars[`--${key}`] = vars[key]
+  }
+  return cssVars
+}