`;
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, child as _child, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
const t1 = _template("<div> </div>")
_setInsertionState(n3, 0)
const n1 = _createComponentWithFallback(_component_Comp)
_renderEffect(() => {
- _setText(n2, _toDisplayString(_ctx.bar))
_setProp(n3, "id", _ctx.foo)
+ _setText(n2, _toDisplayString(_ctx.bar))
})
return [n0, n3]
}"
`;
exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { child as _child, toDisplayString as _toDisplayString, setText as _setText, setProp as _setProp, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
+"import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
const t0 = _template("<button> </button>", true)
_delegateEvents("click")
n0.$evtclick = e => _ctx.handleClick(e)
_renderEffect(() => {
const _count = _ctx.count
- _setText(x0, _toDisplayString(_count) + "foo" + _toDisplayString(_count) + "foo" + _toDisplayString(_count))
_setProp(n0, "id", _count)
+ _setText(x0, _toDisplayString(_count) + "foo" + _toDisplayString(_count) + "foo" + _toDisplayString(_count))
})
return n0
}"
`;
+exports[`compile > execution order > basic 1`] = `
+"import { child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div> </div>", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ const x0 = _child(n0)
+ _renderEffect(() => {
+ _setProp(n0, "id", _ctx.foo)
+ _setText(x0, _toDisplayString(_ctx.bar))
+ })
+ return n0
+}"
+`;
+
+exports[`compile > execution order > with v-once 1`] = `
+"import { child as _child, next as _next, nthChild as _nthChild, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div><span> </span> <br> </div>", true)
+
+export function render(_ctx) {
+ const n3 = t0()
+ const n0 = _child(n3)
+ const n1 = _next(n0)
+ const n2 = _nthChild(n3, 3)
+ const x0 = _child(n0)
+ _setText(x0, _toDisplayString(_ctx.foo))
+ _renderEffect(() => {
+ _setText(n1, " " + _toDisplayString(_ctx.bar))
+ _setText(n2, " " + _toDisplayString(_ctx.baz))
+ })
+ return n3
+}"
+`;
+
exports[`compile > expression parsing > interpolation 1`] = `
"
const n0 = t0()
expect(code).toMatchSnapshot()
})
})
+
+ describe('execution order', () => {
+ test('basic', () => {
+ const code = compile(`<div :id="foo">{{ bar }}</div>`)
+ expect(code).matchSnapshot()
+ expect(code).contains(
+ `_setProp(n0, "id", _ctx.foo)
+ _setText(x0, _toDisplayString(_ctx.bar))`,
+ )
+ })
+ test('with v-once', () => {
+ const code = compile(
+ `<div>
+ <span v-once>{{ foo }}</span>
+ {{ bar }}<br>
+ {{ baz }}
+ </div>`,
+ )
+ expect(code).matchSnapshot()
+ expect(code).contains(
+ `_setText(n1, " " + _toDisplayString(_ctx.bar))
+ _setText(n2, " " + _toDisplayString(_ctx.baz))`,
+ )
+ })
+ })
})
const x2 = _child(n2)
_renderEffect(() => {
const _msg = _ctx.msg
-
_setText(x0, _toDisplayString(_msg))
_setText(x1, _toDisplayString(_msg))
_setText(x2, _toDisplayString(_msg))
const _foo = _ctx.foo
const _bar = _ctx.bar
const _foo_bar_baz = _foo[_bar(_ctx.baz)]
-
_setProp(n0, "id", _foo_bar_baz)
_setProp(n1, "id", _foo_bar_baz)
_setProp(n2, "id", _bar() + _foo)
_renderEffect(() => {
const _obj = _ctx.obj
const _obj_foo_baz_obj_bar = _obj['foo']['baz'] + _obj.bar
-
_setProp(n0, "id", _obj_foo_baz_obj_bar)
_setProp(n1, "id", _obj_foo_baz_obj_bar)
})
_renderEffect(() => {
const _foo = _ctx.foo
const _foo_bar = _foo + _ctx.bar
-
_setProp(n0, "id", _foo_bar)
_setProp(n1, "id", _foo_bar)
_setProp(n2, "id", _foo + _foo_bar)
const n1 = t0()
_renderEffect(() => {
const _foo_bar = _ctx.foo + _ctx.bar
-
_setProp(n0, "id", _foo_bar)
_setProp(n1, "id", _foo_bar)
})
const n1 = t0()
_renderEffect(() => {
const _foo = _ctx.foo
-
_setClass(n0, _foo)
_setClass(n1, _foo)
})
_setAttr(n0, "form", _ctx.form)
_setAttr(n1, "list", _ctx.list)
_setAttr(n2, "type", _ctx.type)
-
_setAttr(n3, "width", _width)
- _setAttr(n4, "width", _width)
- _setAttr(n5, "width", _width)
- _setAttr(n6, "width", _width)
-
_setAttr(n3, "height", _height)
+ _setAttr(n4, "width", _width)
_setAttr(n4, "height", _height)
+ _setAttr(n5, "width", _width)
_setAttr(n5, "height", _height)
+ _setAttr(n6, "width", _width)
_setAttr(n6, "height", _height)
})
return [n0, n1, n2, n3, n4, n5, n6]
transformVFor,
transformSlotOutlet,
transformTemplateRef,
- transformText,
transformElement,
+ transformText,
transformVSlot,
transformComment,
transformChildren,
effects: IREffect[],
context: CodegenContext,
): CodeFragment[] {
- const {
- helper,
- block: { expressions },
- } = context
+ const { helper } = context
+ const expressions = effects.flatMap(effect => effect.expressions)
const [frag, push, unshift] = buildCodeFragment()
let operationsCount = 0
const { ids, frag: declarationFrags } = processExpressions(
tempId: number
effect: IREffect[]
operation: OperationNode[]
- expressions: SimpleExpressionNode[]
returns: number[]
}
registerEffect(
expressions: SimpleExpressionNode[],
- ...operations: OperationNode[]
+ operation: OperationNode | OperationNode[],
+ getIndex = (): number => this.block.effect.length,
): void {
+ const operations = [operation].flat()
expressions = expressions.filter(exp => !isConstantExpression(exp))
if (
this.inVOnce ||
return this.registerOperation(...operations)
}
- this.block.expressions.push(...expressions)
- const existing = this.block.effect.find(e =>
- isSameExpression(e.expressions, expressions),
- )
- if (existing) {
- existing.operations.push(...operations)
- } else {
- this.block.effect.push({
- expressions,
- operations,
- })
- }
-
- function isSameExpression(
- a: SimpleExpressionNode[],
- b: SimpleExpressionNode[],
- ) {
- if (a.length !== b.length) return false
- return a.every((exp, i) => exp.content === b[i].content)
- }
+ this.block.effect.splice(getIndex(), 0, {
+ expressions,
+ operations,
+ })
}
registerOperation(...node: OperationNode[]): void {
)
export const transformElement: NodeTransform = (node, context) => {
+ let effectIndex = context.block.effect.length
+ const getEffectIndex = () => effectIndex++
return function postTransformElement() {
;({ node } = context)
if (
context as TransformContext<ElementNode>,
isComponent,
isDynamicComponent,
+ getEffectIndex,
)
let { parent } = context
parent.node.children.filter(child => child.type !== NodeTypes.COMMENT)
.length === 1
- ;(isComponent ? transformComponentElement : transformNativeElement)(
- node as any,
- propsResult,
- singleRoot,
- context as TransformContext<ElementNode>,
- isDynamicComponent,
- )
+ if (isComponent) {
+ transformComponentElement(
+ node as ComponentNode,
+ propsResult,
+ singleRoot,
+ context,
+ isDynamicComponent,
+ )
+ } else {
+ transformNativeElement(
+ node as PlainElementNode,
+ propsResult,
+ singleRoot,
+ context,
+ getEffectIndex,
+ )
+ }
}
}
node: PlainElementNode,
propsResult: PropsResult,
singleRoot: boolean,
- context: TransformContext<ElementNode>,
+ context: TransformContext,
+ getEffectIndex: () => number,
) {
const { tag } = node
const { scopeId } = context.options
const dynamicProps: string[] = []
if (propsResult[0] /* dynamic props */) {
const [, dynamicArgs, expressions] = propsResult
- context.registerEffect(expressions, {
- type: IRNodeTypes.SET_DYNAMIC_PROPS,
- element: context.reference(),
- props: dynamicArgs,
- root: singleRoot,
- })
+ context.registerEffect(
+ expressions,
+ {
+ type: IRNodeTypes.SET_DYNAMIC_PROPS,
+ element: context.reference(),
+ props: dynamicArgs,
+ root: singleRoot,
+ },
+ getEffectIndex,
+ )
} else {
for (const prop of propsResult[1]) {
const { key, values } = prop
if (values[0].content) template += `="${values[0].content}"`
} else {
dynamicProps.push(key.content)
- context.registerEffect(values, {
- type: IRNodeTypes.SET_PROP,
- element: context.reference(),
- prop,
- root: singleRoot,
- tag,
- })
+ context.registerEffect(
+ values,
+ {
+ type: IRNodeTypes.SET_PROP,
+ element: context.reference(),
+ prop,
+ root: singleRoot,
+ tag,
+ },
+ getEffectIndex,
+ )
}
}
}
context: TransformContext<ElementNode>,
isComponent: boolean,
isDynamicComponent?: boolean,
+ getEffectIndex?: () => number,
): PropsResult {
const props = node.props as (VaporDirectiveNode | AttributeNode)[]
if (props.length === 0) return [false, []]
} else {
context.registerEffect(
[prop.exp],
-
{
type: IRNodeTypes.SET_DYNAMIC_EVENTS,
element: context.reference(),
event: prop.exp,
},
+ getEffectIndex,
)
}
} else {
effect: [],
operation: [],
returns: [],
- expressions: [],
tempId: 0,
})
projects / thirdparty / vuejs / core.git / commitdiff
