Merge branch 'main' into feature-expose

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

@@ -125,9 +125,10 @@ const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
 const t1 = _template("<div></div>")
 
 export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
   const n0 = t0()
   const n3 = t1()
-  const n1 = _createComponent(_resolveComponent("Comp"))
+  const n1 = _createComponent(_component_Comp)
   const n2 = _createTextNode()
   _insert([n1, n2], n3)
   _renderEffect(() => _setText(n2, _ctx.bar))

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

@@ -4,7 +4,8 @@ exports[`compiler: element transform > component > do not resolve component from
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Example"), null, true)
+  const _component_Example = _resolveComponent("Example")
+  const n0 = _createComponent(_component_Example, null, true)
   return n0
 }"
 `;
@@ -33,7 +34,8 @@ exports[`compiler: element transform > component > import + resolve component 1`
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), null, true)
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, null, true)
   return n0
 }"
 `;
@@ -97,7 +99,8 @@ exports[`compiler: element transform > component > should wrap as function if v-
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [{
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [{
     onBar: () => $event => (_ctx.handleBar($event))
   }], true)
   return n0
@@ -108,7 +111,8 @@ exports[`compiler: element transform > component > static props 1`] = `
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [{
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [{
     id: () => ("foo"), 
     class: () => ("bar")
   }], true)
@@ -120,7 +124,8 @@ exports[`compiler: element transform > component > v-bind="obj" 1`] = `
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj)], true)
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [() => (_ctx.obj)], true)
   return n0
 }"
 `;
@@ -129,7 +134,8 @@ exports[`compiler: element transform > component > v-bind="obj" after static pro
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [{
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [{
     id: () => ("foo")
   }, () => (_ctx.obj)], true)
   return n0
@@ -140,7 +146,8 @@ exports[`compiler: element transform > component > v-bind="obj" before static pr
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [() => (_ctx.obj), {
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [() => (_ctx.obj), {
     id: () => ("foo")
   }], true)
   return n0
@@ -151,7 +158,8 @@ exports[`compiler: element transform > component > v-bind="obj" between static p
 "import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [{
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [{
     id: () => ("foo")
   }, () => (_ctx.obj), {
     class: () => ("bar")
@@ -165,7 +173,8 @@ exports[`compiler: element transform > component > v-on="obj" 1`] = `
 import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
 
 export function render(_ctx) {
-  const n0 = _createComponent(_resolveComponent("Foo"), [() => (_toHandlers(_ctx.obj))], true)
+  const _component_Foo = _resolveComponent("Foo")
+  const n0 = _createComponent(_component_Foo, [() => (_toHandlers(_ctx.obj))], true)
   return n0
 }"
 `;

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

@@ -1,5 +1,92 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`compiler: vModel transform > component > v-model for component should generate modelModifiers 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    modelValue: () => (_ctx.foo),
+    "onUpdate:modelValue": () => $event => (_ctx.foo = $event),
+    modelModifiers: () => ({ trim: true, "bar-baz": true })
+  }], true)
+  return n0
+}"
+`;
+
+exports[`compiler: vModel transform > component > v-model for component should work 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    modelValue: () => (_ctx.foo),
+    "onUpdate:modelValue": () => $event => (_ctx.foo = $event)
+  }], true)
+  return n0
+}"
+`;
+
+exports[`compiler: vModel transform > component > v-model with arguments for component should generate modelModifiers 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    foo: () => (_ctx.foo),
+    "onUpdate:foo": () => $event => (_ctx.foo = $event),
+    fooModifiers: () => ({ trim: true }), 
+    bar: () => (_ctx.bar),
+    "onUpdate:bar": () => $event => (_ctx.bar = $event),
+    barModifiers: () => ({ number: true })
+  }], true)
+  return n0
+}"
+`;
+
+exports[`compiler: vModel transform > component > v-model with arguments for component should work 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    bar: () => (_ctx.foo),
+    "onUpdate:bar": () => $event => (_ctx.foo = $event)
+  }], true)
+  return n0
+}"
+`;
+
+exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should generate modelModifiers  1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    [_ctx.foo]: () => (_ctx.foo),
+    ["onUpdate:" + _ctx.foo]: () => $event => (_ctx.foo = $event),
+    [_ctx.foo + "Modifiers"]: () => ({ trim: true }), 
+    [_ctx.bar]: () => (_ctx.bar),
+    ["onUpdate:" + _ctx.bar]: () => $event => (_ctx.bar = $event),
+    [_ctx.bar + "Modifiers"]: () => ({ number: true })
+  }], true)
+  return n0
+}"
+`;
+
+exports[`compiler: vModel transform > component > v-model with dynamic arguments for component should work 1`] = `
+"import { resolveComponent as _resolveComponent, createComponent as _createComponent } from 'vue/vapor';
+
+export function render(_ctx) {
+  const _component_Comp = _resolveComponent("Comp")
+  const n0 = _createComponent(_component_Comp, [{
+    [_ctx.arg]: () => (_ctx.foo),
+    ["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)
+  }], true)
+  return n0
+}"
+`;
+
 exports[`compiler: vModel transform > modifiers > .lazy 1`] = `
 "import { vModelText as _vModelText, withDirectives as _withDirectives, delegate as _delegate, template as _template } from 'vue/vapor';
 const t0 = _template("<input>")

packages/compiler-vapor/__tests__/transforms/transformElement.spec.ts

@@ -198,7 +198,7 @@ describe('compiler: element transform', () => {
       )
 
       expect(code).toMatchSnapshot()
-      expect(code).contains('_createComponent(_resolveComponent("Foo"), [{')
+      expect(code).contains('_createComponent(_component_Foo, [{')
       expect(code).contains('  id: () => ("foo")')
       expect(code).contains('  class: () => ("bar")')
       expect(code).contains('}], true)')

packages/compiler-vapor/__tests__/transforms/vModel.spec.ts

@@ -1,5 +1,10 @@
 import { makeCompile } from './_utils'
-import { transformChildren, transformElement, transformVModel } from '../../src'
+import {
+  IRNodeTypes,
+  transformChildren,
+  transformElement,
+  transformVModel,
+} from '../../src'
 import { BindingTypes, DOMErrorCodes } from '@vue/compiler-dom'
 
 const compileWithVModel = makeCompile({
@@ -198,4 +203,169 @@ describe('compiler: vModel transform', () => {
 
     expect(code).toMatchSnapshot()
   })
+
+  describe('component', () => {
+    test('v-model for component should work', () => {
+      const { code, ir } = compileWithVModel('<Comp v-model="foo" />')
+      expect(code).toMatchSnapshot()
+      expect(code).contains(
+        `modelValue: () => (_ctx.foo),
+    "onUpdate:modelValue": () => $event => (_ctx.foo = $event)`,
+      )
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'modelValue', isStatic: true },
+                model: true,
+                modelModifiers: [],
+                values: [{ content: 'foo', isStatic: false }],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+
+    test('v-model with arguments for component should work', () => {
+      const { code, ir } = compileWithVModel('<Comp v-model:bar="foo" />')
+      expect(code).toMatchSnapshot()
+      expect(code).contains(
+        `bar: () => (_ctx.foo),
+    "onUpdate:bar": () => $event => (_ctx.foo = $event)`,
+      )
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'bar', isStatic: true },
+                model: true,
+                modelModifiers: [],
+                values: [{ content: 'foo', isStatic: false }],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+
+    test('v-model with dynamic arguments for component should work', () => {
+      const { code, ir } = compileWithVModel('<Comp v-model:[arg]="foo" />')
+      expect(code).toMatchSnapshot()
+      expect(code).contains(
+        `[_ctx.arg]: () => (_ctx.foo),
+    ["onUpdate:" + _ctx.arg]: () => $event => (_ctx.foo = $event)`,
+      )
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'arg', isStatic: false },
+                values: [{ content: 'foo', isStatic: false }],
+                model: true,
+                modelModifiers: [],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+
+    test('v-model for component should generate modelModifiers', () => {
+      const { code, ir } = compileWithVModel(
+        '<Comp v-model.trim.bar-baz="foo" />',
+      )
+      expect(code).toMatchSnapshot()
+      expect(code).contain(
+        `modelModifiers: () => ({ trim: true, "bar-baz": true })`,
+      )
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'modelValue', isStatic: true },
+                values: [{ content: 'foo', isStatic: false }],
+                model: true,
+                modelModifiers: ['trim', 'bar-baz'],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+
+    test('v-model with arguments for component should generate modelModifiers', () => {
+      const { code, ir } = compileWithVModel(
+        '<Comp v-model:foo.trim="foo" v-model:bar.number="bar" />',
+      )
+      expect(code).toMatchSnapshot()
+      expect(code).contain(`fooModifiers: () => ({ trim: true })`)
+      expect(code).contain(`barModifiers: () => ({ number: true })`)
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'foo', isStatic: true },
+                values: [{ content: 'foo', isStatic: false }],
+                model: true,
+                modelModifiers: ['trim'],
+              },
+              {
+                key: { content: 'bar', isStatic: true },
+                values: [{ content: 'bar', isStatic: false }],
+                model: true,
+                modelModifiers: ['number'],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+
+    test('v-model with dynamic arguments for component should generate modelModifiers ', () => {
+      const { code, ir } = compileWithVModel(
+        '<Comp v-model:[foo].trim="foo" v-model:[bar].number="bar" />',
+      )
+      expect(code).toMatchSnapshot()
+      expect(code).contain(`[_ctx.foo + "Modifiers"]: () => ({ trim: true })`)
+      expect(code).contain(`[_ctx.bar + "Modifiers"]: () => ({ number: true })`)
+      expect(ir.block.operation).toMatchObject([
+        {
+          type: IRNodeTypes.CREATE_COMPONENT_NODE,
+          tag: 'Comp',
+          props: [
+            [
+              {
+                key: { content: 'foo', isStatic: false },
+                values: [{ content: 'foo', isStatic: false }],
+                model: true,
+                modelModifiers: ['trim'],
+              },
+              {
+                key: { content: 'bar', isStatic: false },
+                values: [{ content: 'bar', isStatic: false }],
+                model: true,
+                modelModifiers: ['number'],
+              },
+            ],
+          ],
+        },
+      ])
+    })
+  })
 })

packages/compiler-vapor/src/generate.ts

@@ -125,7 +125,7 @@ export function generate(
   }
 
   push(INDENT_START)
-  push(...genBlockContent(ir.block, context))
+  push(...genBlockContent(ir.block, context, true))
   push(INDENT_END, NEWLINE)
 
   if (isSetupInlined) {