Merge remote-tracking branch 'origin/main' into feat/v-bind-modifiers

# Conflicts:
#	packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
#	packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
#	packages/compiler-vapor/__tests__/transforms/vBind.spec.ts

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

@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compile > bindings 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, insert as _insert, effect as _effect, setText as _setText } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, insert as _insert, watchEffect as _watchEffect, setText as _setText } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div>count is <!>.</div>")
   const n0 = t0()
   const { 0: [n3, { 1: [n2],}],} = _children(n0)
   const n1 = _createTextNode(_ctx.count)
   _insert(n1, n3, n2)
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, _ctx.count)
   })
   return n0
@@ -121,45 +121,45 @@ export function render(_ctx) {
 `;
 
 exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, watchEffect as _watchEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div><div><Comp></Comp></div>")
   const n0 = t0()
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode(_ctx.bar)
   _append(n2, n1)
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, _ctx.bar)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n2, "id", undefined, _ctx.foo)
   })
   return n0
 }"
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, watchEffect as _watchEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>")
   const n0 = t0()
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode(_ctx.bar)
   _append(n2, n1)
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, _ctx.bar)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n2, "id", undefined, _ctx.foo)
   })
   return n0
 }"
 `;
 
 exports[`compile > dynamic root 1`] = `
-"import { fragment as _fragment, createTextNode as _createTextNode, append as _append, effect as _effect, setText as _setText } from 'vue/vapor';
+"import { fragment as _fragment, createTextNode as _createTextNode, append as _append, watchEffect as _watchEffect, setText as _setText } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _fragment()
@@ -168,18 +168,18 @@ export function render(_ctx) {
   const n1 = _createTextNode(1)
   const n2 = _createTextNode(2)
   _append(n0, n1, n2)
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, 1)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n2, undefined, 2)
   })
   return n0
 }"
 `;
 
 exports[`compile > dynamic root nodes and interpolation 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, effect as _effect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, watchEffect as _watchEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<button>foo<!>foo</button>")
@@ -192,7 +192,7 @@ export function render(_ctx) {
   _insert(n2, n4, n5)
   _append(n4, n3)
   _on(n4, "click", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, _ctx.count)
     _setText(n2, undefined, _ctx.count)
     _setText(n3, undefined, _ctx.count)
@@ -207,7 +207,7 @@ exports[`compile > expression parsing > interpolation 1`] = `
   const t0 = _fragment()
 
   const n0 = t0()
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n0, undefined, a + b.value)
   })
   return n0
@@ -219,7 +219,7 @@ exports[`compile > expression parsing > v-bind 1`] = `
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, key.value+1, undefined, _unref(foo)[key.value+1]())
   })
   return n0
@@ -237,7 +237,7 @@ export function render(_ctx) {
 `;
 
 exports[`compile > static + dynamic root 1`] = `
-"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, effect as _effect, setText as _setText } from 'vue/vapor';
+"import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, watchEffect as _watchEffect, setText as _setText } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("3<!>6<!>9")
@@ -255,28 +255,28 @@ export function render(_ctx) {
   _insert([n3, n4], n0, n9)
   _insert([n5, n6], n0, n10)
   _append(n0, n7, n8)
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n1, undefined, 1)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n2, undefined, 2)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n3, undefined, 4)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n4, undefined, 5)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n5, undefined, 7)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n6, undefined, 8)
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n7, undefined, 'A')
   })
-  _effect(() => {
+  _watchEffect(() => {
     _setText(n8, undefined, 'B')
   })
   return n0

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

@@ -1,41 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler v-bind > .attr modifier 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "^foo-bar", undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "^foo-bar", undefined, _ctx.fooBar)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .camel modifier 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "fooBar", undefined, _ctx.id)
   })
   return n0
@@ -49,147 +49,147 @@ export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, _camelize(_ctx.foo), undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "fooBar", undefined, _ctx.fooBar)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .prop modifier 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, ".fooBar", undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, \`.\${_ctx.fooBar}\`, undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, ".fooBar", undefined, _ctx.fooBar)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > basic 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "id", undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > dynamic arg 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, _ctx.id, undefined, _ctx.id)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > no expression (shorthand) 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "camel-case", undefined, _ctx.camelCase)
   })
   return n0
 }"
 `;
 
 exports[`compiler v-bind > no expression 1`] = `
-"import { template as _template, children as _children, effect as _effect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
+"import { template as _template, children as _children, watchEffect as _watchEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
 export function render(_ctx) {
   const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
-  _effect(() => {
+  _watchEffect(() => {
     _setDynamicProp(n1, "id", undefined, _ctx.id)
   })
   return n0