fix(compiler-vapor): correct execution order of operations

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -149,7 +149,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 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>")
 
@@ -161,8 +161,8 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = _createComponentWithFallback(_component_Comp)
   const n2 = _child(n3)
   _renderEffect(() => {
-    _setText(n2, _toDisplayString(_ctx.bar))
     _setProp(n3, "id", _ctx.foo)
+    _setText(n2, _toDisplayString(_ctx.bar))
   })
   return [n0, n3]
 }"

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -67,7 +67,6 @@ export function render(_ctx) {
   const x2 = _child(n2)
   _renderEffect(() => {
     const _msg = _ctx.msg
-
     _setText(x0, _toDisplayString(_msg))
     _setText(x1, _toDisplayString(_msg))
     _setText(x2, _toDisplayString(_msg))

packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap

@@ -55,7 +55,6 @@ export function render(_ctx) {
     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)
@@ -96,7 +95,6 @@ export function render(_ctx) {
   _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)
   })
@@ -115,7 +113,6 @@ export function render(_ctx) {
   _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)
@@ -133,7 +130,6 @@ export function render(_ctx) {
   const n1 = t0()
   _renderEffect(() => {
     const _foo_bar = _ctx.foo + _ctx.bar
-
     _setProp(n0, "id", _foo_bar)
     _setProp(n1, "id", _foo_bar)
   })
@@ -166,7 +162,6 @@ export function render(_ctx) {
   const n1 = t0()
   _renderEffect(() => {
     const _foo = _ctx.foo
-
     _setClass(n0, _foo)
     _setClass(n1, _foo)
   })
@@ -487,15 +482,13 @@ export function render(_ctx) {
     _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]

packages/compiler-vapor/src/generators/operation.ts

@@ -99,10 +99,8 @@ export function genEffects(
   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(

packages/compiler-vapor/src/ir/index.ts

@@ -52,7 +52,6 @@ export interface BlockIRNode extends BaseIRNode {
   tempId: number
   effect: IREffect[]
   operation: OperationNode[]
-  expressions: SimpleExpressionNode[]
   returns: number[]
 }
 

packages/compiler-vapor/src/transform.ts

@@ -137,8 +137,10 @@ export class TransformContext<T extends AllNode = AllNode> {
 
   registerEffect(
     expressions: SimpleExpressionNode[],
-    ...operations: OperationNode[]
+    operation: OperationNode | OperationNode[],
+    index: number = this.block.effect.length,
   ): void {
+    const operations = [operation].flat()
     expressions = expressions.filter(exp => !isConstantExpression(exp))
     if (
       this.inVOnce ||
@@ -150,26 +152,10 @@ export class TransformContext<T extends AllNode = AllNode> {
       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(index, 0, {
+      expressions,
+      operations,
+    })
   }
 
   registerOperation(...node: OperationNode[]): void {

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -44,6 +44,8 @@ export const isReservedProp: (key: string) => boolean = /*#__PURE__*/ makeMap(
 )
 
 export const transformElement: NodeTransform = (node, context) => {
+  let effectIndex = context.block.effect.length
+  const getEffectIndex = () => effectIndex++
   return function postTransformElement() {
     ;({ node } = context)
     if (
@@ -62,6 +64,7 @@ export const transformElement: NodeTransform = (node, context) => {
       context as TransformContext<ElementNode>,
       isComponent,
       isDynamicComponent,
+      getEffectIndex,
     )
 
     let { parent } = context
@@ -78,13 +81,23 @@ export const transformElement: NodeTransform = (node, 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,
+      )
+    }
   }
 }
 
@@ -176,7 +189,8 @@ function transformNativeElement(
   node: PlainElementNode,
   propsResult: PropsResult,
   singleRoot: boolean,
-  context: TransformContext<ElementNode>,
+  context: TransformContext,
+  getEffectIndex: () => number,
 ) {
   const { tag } = node
   const { scopeId } = context.options
@@ -189,12 +203,16 @@ function transformNativeElement(
   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
@@ -203,13 +221,17 @@ function transformNativeElement(
         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(),
+        )
       }
     }
   }
@@ -246,6 +268,7 @@ export function buildProps(
   context: TransformContext<ElementNode>,
   isComponent: boolean,
   isDynamicComponent?: boolean,
+  getEffectIndex?: () => number,
 ): PropsResult {
   const props = node.props as (VaporDirectiveNode | AttributeNode)[]
   if (props.length === 0) return [false, []]
@@ -292,12 +315,12 @@ export function buildProps(
           } else {
             context.registerEffect(
               [prop.exp],
-
               {
                 type: IRNodeTypes.SET_DYNAMIC_EVENTS,
                 element: context.reference(),
                 event: prop.exp,
               },
+              getEffectIndex && getEffectIndex(),
             )
           }
         } else {

packages/compiler-vapor/src/transforms/utils.ts

@@ -29,7 +29,6 @@ export const newBlock = (node: BlockIRNode['node']): BlockIRNode => ({
   effect: [],
   operation: [],
   returns: [],
-  expressions: [],
   tempId: 0,
 })