From: daiwei Date: Mon, 10 Nov 2025 07:00:08 +0000 (+0800) Subject: refactor(vapor): rename vaporUseCssVars to useVaporCssVars and update related references X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=ecd9caef6367b15c3516c1ed0a816272d2eab215;p=thirdparty%2Fvuejs%2Fcore.git refactor(vapor): rename vaporUseCssVars to useVaporCssVars and update related references --- diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts index 2a0c53305a..b626663b51 100644 --- a/packages/compiler-sfc/src/style/cssVars.ts +++ b/packages/compiler-sfc/src/style/cssVars.ts @@ -10,12 +10,12 @@ import { import type { SFCDescriptor } from '../parse' import type { PluginCreator } from 'postcss' import hash from 'hash-sum' -import { capitalize, getEscapedCssVarName } from '@vue/shared' +import { getEscapedCssVarName } from '@vue/shared' export const CSS_VARS_HELPER = `useCssVars` export function getCssVarsHelper(vapor: boolean | undefined): string { - return vapor ? `vapor${capitalize(CSS_VARS_HELPER)}` : CSS_VARS_HELPER + return vapor ? `useVaporCssVars` : CSS_VARS_HELPER } export function genCssVarsFromList( diff --git a/packages/runtime-dom/src/helpers/useCssVars.ts b/packages/runtime-dom/src/helpers/useCssVars.ts index 64ac46ae48..a569e688a7 100644 --- a/packages/runtime-dom/src/helpers/useCssVars.ts +++ b/packages/runtime-dom/src/helpers/useCssVars.ts @@ -71,6 +71,10 @@ function setVarsOnVNode(vnode: VNode, vars: Record) { } } +/** + * @internal + * shared between vdom and vapor + */ export function baseUseCssVars( instance: GenericComponentInstance | null, getParentNode: () => Node, @@ -86,7 +90,7 @@ export function baseUseCssVars( /* v8 ignore stop */ if (__DEV__) { - instance.getCssVars = () => getVars() + instance.getCssVars = getVars } const updateTeleports = (instance.ut = (vars = getVars()) => { @@ -116,6 +120,10 @@ export function baseUseCssVars( }) } +/** + * @internal + * shared between vdom and vapor + */ export function setVarsOnNode(el: Node, vars: Record): void { if (el.nodeType === 1) { const style = (el as HTMLElement).style diff --git a/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts b/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts index a82091495a..1352760d13 100644 --- a/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts +++ b/packages/runtime-vapor/__tests__/helpers/useCssVars.spec.ts @@ -5,7 +5,7 @@ import { renderEffect, setStyle, template, - vaporUseCssVars, + useVaporCssVars, } from '@vue/runtime-vapor' import { nextTick, onMounted, reactive, ref } from '@vue/runtime-core' import { makeRender } from '../_utils' @@ -13,7 +13,7 @@ import type { VaporComponent } from '../../src/component' const define = makeRender() -describe('vaporUseCssVars', () => { +describe('useVaporCssVars', () => { async function assertCssVars(getApp: (state: any) => VaporComponent) { const state = reactive({ color: 'red' }) const App = getApp(state) @@ -35,7 +35,7 @@ describe('vaporUseCssVars', () => { const t0 = template('
') await assertCssVars(state => ({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) const n0 = t0() return n0 }, @@ -46,7 +46,7 @@ describe('vaporUseCssVars', () => { const t0 = template('
') await assertCssVars(state => ({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) const n0 = t0() const n1 = t0() return [n0, n1] @@ -64,7 +64,7 @@ describe('vaporUseCssVars', () => { }) await assertCssVars(state => ({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) return createComponent(Child) }, })) @@ -82,7 +82,7 @@ describe('vaporUseCssVars', () => { define({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) const n0 = createIf( () => value.value, () => { @@ -125,7 +125,7 @@ describe('vaporUseCssVars', () => { const t0 = template('
') define({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) return createComponent(Child, null, { default: () => { return createIf( @@ -174,7 +174,7 @@ describe('vaporUseCssVars', () => { define({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) const n0 = t0() as any renderEffect(() => setStyle(n0, state.color ? 'pointer-events: none' : undefined), @@ -214,7 +214,7 @@ describe('vaporUseCssVars', () => { define({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) return createIf( () => value.value, () => createComponent(Child), @@ -246,7 +246,7 @@ describe('vaporUseCssVars', () => { define({ setup() { - vaporUseCssVars(() => state) + useVaporCssVars(() => state) onMounted(() => { colorInOnMount = ( root.children[0] as HTMLElement diff --git a/packages/runtime-vapor/src/helpers/useCssVars.ts b/packages/runtime-vapor/src/helpers/useCssVars.ts index 0f5fa2b040..9a67ae6bfd 100644 --- a/packages/runtime-vapor/src/helpers/useCssVars.ts +++ b/packages/runtime-vapor/src/helpers/useCssVars.ts @@ -7,14 +7,13 @@ import { type VaporComponentInstance, isVaporComponent } from '../component' import { isArray } from '@vue/shared' import type { Block } from '../block' -export function vaporUseCssVars(getter: () => Record): void { +export function useVaporCssVars(getter: () => Record): void { if (!__BROWSER__ && !__TEST__) return - const instance = currentInstance as VaporComponentInstance baseUseCssVars( instance, () => resolveParentNode(instance.block), - () => getter(), + getter, vars => setVarsOnBlock(instance.block, vars), ) } diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts index e6d0eacaf2..ed2c63812c 100644 --- a/packages/runtime-vapor/src/index.ts +++ b/packages/runtime-vapor/src/index.ts @@ -54,7 +54,7 @@ export { getDefaultValue, } from './apiCreateFor' export { createTemplateRefSetter } from './apiTemplateRef' -export { vaporUseCssVars } from './helpers/useCssVars' +export { useVaporCssVars } from './helpers/useCssVars' export { createDynamicComponent } from './apiCreateDynamicComponent' export { applyVShow } from './directives/vShow' export {