fix: dynamic properties will be updated before the v-once directive

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

@@ -104,23 +104,21 @@ export function render() {
 `;
 
 exports[`compile > directives > v-once > as root node 1`] = `
-"import { template, children, effect, setAttr } from 'vue/vapor';
+"import { template, children, setAttr } from 'vue/vapor';
 const t0 = template('<div></div>');
 export function render() {
   const n0 = t0();
   const {
     0: [n1],
   } = children(n0);
-  effect(() => {
-    setAttr(n1, 'id', undefined, foo);
-  });
+  setAttr(n1, 'id', undefined, foo);
   return n0;
 }
 "
 `;
 
 exports[`compile > directives > v-once > basic 1`] = `
-"import { template, children, createTextNode, setText, setAttr, prepend } from 'vue/vapor';
+"import { template, children, createTextNode, setText, prepend, effect, setAttr } from 'vue/vapor';
 const t0 = template('<div> <span></span></div>');
 export function render() {
   const n0 = t0();
@@ -134,8 +132,49 @@ export function render() {
   } = children(n0);
   const n1 = createTextNode(msg.value);
   setText(n1, undefined, msg.value);
-  setAttr(n2, 'class', undefined, clz.value);
   prepend(n3, n1);
+  effect(() => {
+    setAttr(n2, 'class', undefined, clz.value);
+  });
+  return n0;
+}
+"
+`;
+
+exports[`compile > directives > v-once > inside v-once 1`] = `
+"import { template, children, setAttr } from 'vue/vapor';
+const t0 = template('<div><div></div></div>');
+export function render() {
+  const n0 = t0();
+  const {
+    0: [
+      n1,
+      {
+        0: [n2],
+      },
+    ],
+  } = children(n0);
+  setAttr(n1, 'id', undefined, foo);
+  setAttr(n2, 'id', undefined, foo);
+  return n0;
+}
+"
+`;
+
+exports[`compile > directives > v-once > on nested plain element 1`] = `
+"import { template, children, setAttr } from 'vue/vapor';
+const t0 = template('<div><div></div></div>');
+export function render() {
+  const n0 = t0();
+  const {
+    0: [
+      ,
+      {
+        0: [n1],
+      },
+    ],
+  } = children(n0);
+  setAttr(n1, 'id', undefined, foo);
   return n0;
 }
 "

packages/compiler-vapor/__tests__/compile.test.ts

@@ -183,11 +183,25 @@ describe('compile', () => {
         expect(code).matchSnapshot()
       })
 
-      test.fails('as root node', async () => {
+      test('as root node', async () => {
         const code = await compile(`<div :id="foo" v-once />`)
         expect(code).toMatchSnapshot()
         expect(code).not.contains('effect')
       })
+
+      test('on nested plain element', async () => {
+        const code = await compile(`<div><div :id="foo" v-once /></div>`)
+        expect(code).toMatchSnapshot()
+        expect(code).not.contains('effect')
+      })
+
+      test('inside v-once', async () => {
+        const code = await compile(
+          `<div v-once :id="foo"><div :id="foo" v-once/></div>`,
+        )
+        expect(code).toMatchSnapshot()
+        expect(code).not.contains('effect')
+      })
     })
 
     describe('v-pre', () => {

packages/compiler-vapor/src/transform.ts

@@ -286,7 +286,7 @@ function transformElement(ctx: TransformContext<ElementNode>) {
   const { tag, props, children } = node
 
   ctx.template += `<${tag}`
-
+  hasVOnceNode(props, ctx)
   props.forEach((prop) => transformProp(prop, ctx))
   ctx.template += `>`
 
@@ -440,10 +440,6 @@ function transformProp(
       })
       break
     }
-    case 'once': {
-      ctx.once = true
-      break
-    }
     case 'cloak': {
       // do nothing
       break
@@ -467,3 +463,17 @@ function processExpression(
   }
   return content
 }
+
+function hasVOnceNode(
+  nodes: Array<DirectiveNode | AttributeNode>,
+  ctx: TransformContext<ElementNode>,
+) {
+  let onceIndex = -1
+  ctx.once = nodes.some((prop, index) => {
+    onceIndex = index
+    return prop.name === 'once'
+  })
+  if (ctx.once && onceIndex !== -1) {
+    nodes.splice(onceIndex, 1)
+  }
+}