Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

refactor(templateRef): simplify template ref handling and remove old ref declarations #13842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edison1105 wants to merge 1 commit into minor
base: minor
Choose a base branch
Loading
from edison/refactor/setRef
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
const n0 = t0()
let r0
_renderEffect(() => r0 = _setTemplateRef(n0, _ctx.foo, r0))
_renderEffect(() => _setTemplateRef(n0, _ctx.foo))
return n0
}"
`;
Expand All @@ -20,14 +19,13 @@ const t0 = _template("<div></div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
const n0 = t0()
let r0
_renderEffect(() => {
const _foo = _ctx.foo
r0 = _setTemplateRef(n0, bar => {
_setTemplateRef(n0, bar => {
_foo.value = bar
;({ baz: _ctx.baz } = bar)
console.log(_foo.value, _ctx.baz)
}, r0)
})
})
return n0
}"
Expand All @@ -41,7 +39,7 @@ export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
const n0 = _createFor(() => ([1,2,3]), (_for_item0) => {
const n2 = t0()
_setTemplateRef(n2, "foo", void 0, true)
_setTemplateRef(n2, "foo", true)
return n2
}, undefined, 4)
return n0
Expand Down
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,12 +67,6 @@ describe('compiler: template ref transform', () => {
flags: DynamicFlag.REFERENCED,
})
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.DECLARE_OLD_REF,
id: 0,
},
])
expect(ir.block.effect).toMatchObject([
{
operations: [
Expand All @@ -89,7 +83,7 @@ describe('compiler: template ref transform', () => {
])
expect(code).matchSnapshot()
expect(code).contains('const _setTemplateRef = _createTemplateRefSetter()')
expect(code).contains('_setTemplateRef(n0, _ctx.foo, r0)')
expect(code).contains('_setTemplateRef(n0, _ctx.foo)')
})

test('function ref', () => {
Expand All @@ -105,12 +99,6 @@ describe('compiler: template ref transform', () => {
flags: DynamicFlag.REFERENCED,
})
expect(ir.template).toEqual(['<div></div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.DECLARE_OLD_REF,
id: 0,
},
])
expect(ir.block.effect).toMatchObject([
{
operations: [
Expand All @@ -130,7 +118,7 @@ describe('compiler: template ref transform', () => {
_foo.value = bar
;({ baz: _ctx.baz } = bar)
console.log(_foo.value, _ctx.baz)
}, r0)`)
})`)
})

test('ref + v-if', () => {
Expand Down Expand Up @@ -178,6 +166,6 @@ describe('compiler: template ref transform', () => {
])
expect(code).matchSnapshot()
expect(code).contains('const _setTemplateRef = _createTemplateRefSetter()')
expect(code).contains('_setTemplateRef(n2, "foo", void 0, true)')
expect(code).contains('_setTemplateRef(n2, "foo", true)')
})
})
4 changes: 1 addition & 3 deletions packages/compiler-vapor/src/generators/operation.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { genFor } from './for'
import { genSetHtml } from './html'
import { genIf } from './if'
import { genDynamicProps, genSetProp } from './prop'
import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
import { genSetTemplateRef } from './templateRef'
import { genGetTextChild, genSetText } from './text'
import {
type CodeFragment,
Expand Down Expand Up @@ -79,8 +79,6 @@ export function genOperation(
return genFor(oper, context)
case IRNodeTypes.CREATE_COMPONENT_NODE:
return genCreateComponent(oper, context)
case IRNodeTypes.DECLARE_OLD_REF:
return genDeclareOldRef(oper)
case IRNodeTypes.SLOT_OUTLET_NODE:
return genSlotOutlet(oper, context)
case IRNodeTypes.DIRECTIVE:
Expand Down
8 changes: 1 addition & 7 deletions packages/compiler-vapor/src/generators/templateRef.ts
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { genExpression } from './expression'
import type { CodegenContext } from '../generate'
import type { DeclareOldRefIRNode, SetTemplateRefIRNode } from '../ir'
import type { SetTemplateRefIRNode } from '../ir'
import { type CodeFragment, NEWLINE, genCall } from './utils'
import { BindingTypes, type SimpleExpressionNode } from '@vue/compiler-dom'

Expand All @@ -12,21 +12,15 @@ export function genSetTemplateRef(
): CodeFragment[] {
return [
NEWLINE,
oper.effect && `r${oper.element} = `,
...genCall(
setTemplateRefIdent, // will be generated in root scope
`n${oper.element}`,
genRefValue(oper.value, context),
oper.effect ? `r${oper.element}` : oper.refFor ? 'void 0' : undefined,
oper.refFor && 'true',
),
]
}

export function genDeclareOldRef(oper: DeclareOldRefIRNode): CodeFragment[] {
return [NEWLINE, `let r${oper.id}`]
}

function genRefValue(value: SimpleExpressionNode, context: CodegenContext) {
// in inline mode there is no setupState object, so we can't use string
// keys to set the ref. Instead, we need to transform it to pass the
Expand Down
7 changes: 0 additions & 7 deletions packages/compiler-vapor/src/ir/index.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export enum IRNodeTypes {
SLOT_OUTLET_NODE,

DIRECTIVE,
DECLARE_OLD_REF, // consider make it more general

IF,
FOR,
Expand Down Expand Up @@ -197,11 +196,6 @@ export interface CreateComponentIRNode extends BaseIRNode {
anchor?: number
}

export interface DeclareOldRefIRNode extends BaseIRNode {
type: IRNodeTypes.DECLARE_OLD_REF
id: number
}

export interface SlotOutletIRNode extends BaseIRNode {
type: IRNodeTypes.SLOT_OUTLET_NODE
id: number
Expand Down Expand Up @@ -232,7 +226,6 @@ export type OperationNode =
| IfIRNode
| ForIRNode
| CreateComponentIRNode
| DeclareOldRefIRNode
| SlotOutletIRNode
| GetTextChildIRNode

Expand Down
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,6 @@ export const transformTemplateRef: NodeTransform = (node, context) => {
return () => {
const id = context.reference()
const effect = !isConstantExpression(value)
effect &&
context.registerOperation({
type: IRNodeTypes.DECLARE_OLD_REF,
id,
})
context.registerEffect([value], {
type: IRNodeTypes.SET_TEMPLATE_REF,
element: id,
Expand Down
55 changes: 17 additions & 38 deletions packages/runtime-vapor/__tests__/dom/templateRef.spec.ts
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import type { NodeRef } from '../../src/apiTemplateRef'
import {
child,
createComponent,
Expand Down Expand Up @@ -64,9 +63,9 @@ describe('api: template ref', () => {
},
render() {
const n0 = t0()
let r0: NodeRef | undefined
const setRef = createTemplateRefSetter()
renderEffect(() => {
r0 = createTemplateRefSetter()(n0 as Element, refKey.value, r0)
setRef(n0 as Element, refKey.value)
})
return n0
},
Expand Down Expand Up @@ -137,9 +136,9 @@ describe('api: template ref', () => {
const { render } = define({
render() {
const n0 = t0()
let r0: NodeRef | undefined
const setRef = createTemplateRefSetter()
renderEffect(() => {
r0 = createTemplateRefSetter()(n0 as Element, fn.value, r0)
setRef(n0 as Element, fn.value)
})
return n0
},
Expand All @@ -165,11 +164,12 @@ describe('api: template ref', () => {
const t0 = template('<div></div>')
const { render } = define({
render() {
const setRef = createTemplateRefSetter()
const n0 = createIf(
() => toggle.value,
() => {
const n1 = t0()
createTemplateRefSetter()(n1 as Element, fn)
setRef(n1 as Element, fn)
return n1
},
)
Expand Down Expand Up @@ -217,9 +217,9 @@ describe('api: template ref', () => {
fooEl = useTemplateRef('foo')
barEl = useTemplateRef('bar')
const n0 = t0()
let r0: NodeRef | undefined
const setRef = createTemplateRefSetter()
renderEffect(() => {
r0 = createTemplateRefSetter()(n0 as Element, refKey.value, r0)
setRef(n0 as Element, refKey.value)
})
return n0
},
Expand Down Expand Up @@ -324,21 +324,12 @@ describe('api: template ref', () => {
const instance = currentInstance!
const n0 = t0()
const n1 = t1()
let r0: NodeRef | undefined
let r1: NodeRef | undefined
const setRef = createTemplateRefSetter()
renderEffect(() => {
r0 = createTemplateRefSetter()(
n0 as Element,
refToggle.value ? 'foo' : 'bar',
r0,
)
setRef(n0 as Element, refToggle.value ? 'foo' : 'bar')
})
renderEffect(() => {
r1 = createTemplateRefSetter()(
n1 as Element,
refToggle.value ? 'bar' : 'foo',
r1,
)
setRef(n1 as Element, refToggle.value ? 'bar' : 'foo')
})
watchEffect(
() => {
Expand Down Expand Up @@ -422,6 +413,7 @@ describe('api: template ref', () => {
const t1 = template('<li></li>')
const { render } = define({
render() {
const setRef = createTemplateRefSetter()
const n0 = createIf(
() => show.value,
() => {
Expand All @@ -430,12 +422,7 @@ describe('api: template ref', () => {
() => list,
item => {
const n1 = t1()
createTemplateRefSetter()(
n1 as Element,
listRefs,
undefined,
true,
)
setRef(n1 as Element, listRefs, true)
renderEffect(() => {
setElementText(n1, item)
})
Expand Down Expand Up @@ -484,6 +471,7 @@ describe('api: template ref', () => {
return { listRefs }
},
render() {
const setRef = createTemplateRefSetter()
const n0 = createIf(
() => show.value,
() => {
Expand All @@ -492,12 +480,7 @@ describe('api: template ref', () => {
() => list,
item => {
const n1 = t1()
createTemplateRefSetter()(
n1 as Element,
'listRefs',
undefined,
true,
)
setRef(n1 as Element, 'listRefs', true)
renderEffect(() => {
setElementText(n1, item)
})
Expand Down Expand Up @@ -548,16 +531,12 @@ describe('api: template ref', () => {
const n0 = t0()
const n1 = n0.firstChild
const n2 = n1!.nextSibling!
const setRef = createTemplateRefSetter()
const n3 = createFor(
() => list.value,
item => {
const n4 = t1()
createTemplateRefSetter()(
n4 as Element,
'listRefs',
undefined,
true,
)
setRef(n4 as Element, 'listRefs', true)
renderEffect(() => {
setElementText(n4, item)
})
Expand Down
8 changes: 6 additions & 2 deletions packages/runtime-vapor/src/apiTemplateRef.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,17 @@ export type RefEl = Element | VaporComponentInstance
export type setRefFn = (
el: RefEl,
ref: NodeRef,
oldRef?: NodeRef,
refFor?: boolean,
) => NodeRef | undefined

export function createTemplateRefSetter(): setRefFn {
const instance = currentInstance as VaporComponentInstance
return (...args) => setRef(instance, ...args)
const oldRefMap = new WeakMap<RefEl, NodeRef | undefined>()
return (el, ref, refFor) => {
const oldRef = setRef(instance, el, ref, oldRefMap.get(el), refFor)
oldRefMap.set(el, oldRef)
return oldRef
}
}

/**
Expand Down
Loading

AltStyle によって変換されたページ (->オリジナル) /