fix(compiler): correct execution order of operations

Author: zhiyuanzmj

docs/introduction/getting-started.md

@@ -25,7 +25,7 @@ We assume you are already familiar with the basic usages of Vue before you conti
 pnpm add vue-jsx-vapor
 
 # runtime
-pnpm add https://pkg.pr.new/vue@72d63f1
+pnpm add https://pkg.pr.new/vue@9e2eea9
 ```
 
 The Vue Vapor runtime is not release, so we use [pkg.pr.new](https://github.com/stackblitz-labs/pkg.pr.new) to install.

packages/compiler/src/compile.ts

@@ -122,8 +122,8 @@ export function getBaseTransformPreset(): TransformPreset {
       transformVIf,
       transformVFor,
       transformTemplateRef,
-      transformText,
       transformElement,
+      transformText,
       transformVSlot,
       transformChildren,
     ],

packages/compiler/src/ir/index.ts

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

packages/compiler/src/transform.ts

@@ -161,41 +161,31 @@ export class TransformContext<
 
   registerEffect(
     expressions: SimpleExpressionNode[],
-    ...operations: OperationNode[]
+    operation: OperationNode | OperationNode[],
+    getEffectIndex = (): number => this.block.effect.length,
+    getOperationIndex = (): number => this.block.operation.length,
   ) {
+    const operations = [operation].flat()
     expressions = expressions.filter((exp) => !isConstantExpression(exp))
     if (
       this.inVOnce ||
       expressions.length === 0 ||
       expressions.every((e) => e.ast && isConstantNode(e.ast, {}))
     ) {
-      return this.registerOperation(...operations)
+      return this.registerOperation(operations, getOperationIndex)
     }
 
-    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(getEffectIndex(), 0, {
+      expressions,
+      operations,
+    })
   }
 
-  registerOperation(...node: OperationNode[]) {
-    this.block.operation.push(...node)
+  registerOperation(
+    operation: OperationNode | OperationNode[],
+    getOperationIndex = (): number => this.block.operation.length,
+  ) {
+    this.block.operation.splice(getOperationIndex(), 0, ...[operation].flat())
   }
 
   create<E extends T>(node: E, index: number): TransformContext<E> {

packages/compiler/src/transforms/transformElement.ts

@@ -35,6 +35,10 @@ const isEventRegex = /^on[A-Z]/
 const isDirectiveRegex = /^v-[a-z]/
 
 export const transformElement: NodeTransform = (node, context) => {
+  let effectIndex = context.block.effect.length
+  const getEffectIndex = () => effectIndex++
+  let operationIndex = context.block.operation.length
+  const getOperationIndex = () => operationIndex++
   return function postTransformElement() {
     ;({ node } = context)
     if (node.type !== 'JSXElement' || isTemplate(node)) return
@@ -71,6 +75,8 @@ export const transformElement: NodeTransform = (node, context) => {
       propsResult,
       singleRoot,
       context as TransformContext<JSXElement>,
+      getEffectIndex,
+      getOperationIndex,
     )
   }
 }
@@ -120,6 +126,8 @@ function transformNativeElement(
   propsResult: PropsResult,
   singleRoot: boolean,
   context: TransformContext<JSXElement>,
+  getEffectIndex: () => number,
+  getOperationIndex: () => number,
 ) {
   const { scopeId } = context.options
 
@@ -131,12 +139,17 @@ 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,
+      getOperationIndex,
+    )
   } else {
     for (const prop of propsResult[1]) {
       const { key, values } = prop
@@ -145,13 +158,18 @@ 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,
-          tag,
-          root: singleRoot,
-        })
+        context.registerEffect(
+          values,
+          {
+            type: IRNodeTypes.SET_PROP,
+            element: context.reference(),
+            prop,
+            tag,
+            root: singleRoot,
+          },
+          getEffectIndex,
+          getOperationIndex,
+        )
       }
     }
   }

packages/compiler/src/transforms/utils.ts

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

packages/compiler/test/__snapshots__/compile.spec.ts.snap

@@ -16,6 +16,30 @@ exports[`compile > dynamic root 2`] = `
 "
 `;
 
+exports[`compile > execution order > basic 1`] = `
+"
+  const n0 = t0()
+  _setProp(n0, "foo", true)
+  const x0 = _child(n0)
+  _setNodes(x0, () => (foo))
+  return n0
+"
+`;
+
+exports[`compile > execution order > with v-once 1`] = `
+"
+  const n3 = t0()
+  const n0 = _child(n3)
+  const n1 = _next(n0)
+  const n2 = _nthChild(n3, 3)
+  const x0 = _child(n0)
+  _setNodes(x0, foo)
+  _setNodes(n1, () => (bar))
+  _setNodes(n2, () => (baz))
+  return n3
+"
+`;
+
 exports[`compile > expression parsing > interpolation 1`] = `
 "
   const n0 = _createNodes(() => (a + b))

packages/compiler/test/compile.spec.ts

@@ -49,4 +49,30 @@ describe('compile', () => {
       expect(code).toMatchSnapshot()
     })
   })
+
+  describe('execution order', () => {
+    test('basic', () => {
+      const { code } = compile(`<div foo={true}>{foo}</div>`)
+      expect(code).matchSnapshot()
+      expect(code).contains(
+        `_setProp(n0, "foo", true)
+  const x0 = _child(n0)
+  _setNodes(x0, () => (foo))`,
+      )
+    })
+    test('with v-once', () => {
+      const { code } = compile(
+        `<div>
+          <span v-once>{ foo }</span>
+          { bar }<br/>
+          { baz }
+        </div>`,
+      )
+      expect(code).matchSnapshot()
+      expect(code).contains(
+        `_setNodes(n1, () => (bar))
+  _setNodes(n2, () => (baz))`,
+      )
+    })
+  })
 })

packages/compiler/test/transforms/expression.spec.ts

@@ -13,8 +13,8 @@ import { makeCompile } from './_utils'
 const compileWithVIf = makeCompile({
   nodeTransforms: [
     transformVOnce,
-    transformText,
     transformElement,
+    transformText,
     transformChildren,
   ],
 })

packages/compiler/test/transforms/transformElement.spec.ts

@@ -13,8 +13,8 @@ const compileWithElementTransform = makeCompile({
   nodeTransforms: [
     transformVFor,
     transformElement,
-    transformChildren,
     transformText,
+    transformChildren,
   ],
   directiveTransforms: {
     bind: transformVBind,