feat(compiler-core): allow directive modifiers to be dynamic (fix #8281)

packages/compiler-core/__tests__/parse.spec.ts

@@ -1446,6 +1446,202 @@ describe('compiler: parse', () => {
       })
     })
 
+    test('directive with dynamic modifiers', () => {
+      const ast = baseParse('<div v-on.enter.[a]/>')
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        rawName: 'v-on.enter.[a]',
+        arg: undefined,
+        modifiers: [
+          {
+            constType: 3,
+            content: 'enter',
+            isStatic: true,
+            loc: {
+              end: {
+                column: 16,
+                line: 1,
+                offset: 15,
+              },
+              source: 'enter',
+              start: {
+                column: 11,
+                line: 1,
+                offset: 10,
+              },
+            },
+            type: 4,
+          },
+          {
+            constType: 0,
+            content: 'a',
+            isStatic: false,
+            loc: {
+              end: {
+                column: 20,
+                line: 1,
+                offset: 19,
+              },
+              source: '[a]',
+              start: {
+                column: 17,
+                line: 1,
+                offset: 16,
+              },
+            },
+            type: 4,
+          },
+        ],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { column: 20, line: 1, offset: 19 },
+          source: 'v-on.enter.[a]',
+        },
+      })
+    })
+
+    test('directive with empty modifier name', () => {
+      let errorCode = -1
+      const ast = baseParse('<div v-on./>', {
+        onError: err => {
+          errorCode = err.code as number
+        },
+      })
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(errorCode).toBe(ErrorCodes.X_MISSING_DIRECTIVE_MODIFIER_NAME)
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        rawName: 'v-on.',
+        arg: undefined,
+        modifiers: [],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { column: 11, line: 1, offset: 10 },
+          source: 'v-on.',
+        },
+      })
+    })
+
+    test('directive with empty modifier name and value', () => {
+      let errorCode = -1
+      const ast = baseParse('<div v-on.="a"/>', {
+        onError: err => {
+          errorCode = err.code as number
+        },
+      })
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(errorCode).toBe(ErrorCodes.X_MISSING_DIRECTIVE_MODIFIER_NAME)
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        rawName: 'v-on.',
+        arg: undefined,
+        modifiers: [],
+        exp: {
+          constType: 0,
+          content: 'a',
+          isStatic: false,
+          loc: {
+            end: {
+              column: 14,
+              line: 1,
+              offset: 13,
+            },
+            source: 'a',
+            start: {
+              column: 13,
+              line: 1,
+              offset: 12,
+            },
+          },
+          type: 4,
+        },
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { column: 15, line: 1, offset: 14 },
+          source: 'v-on.="a"',
+        },
+      })
+    })
+
+    test('directive with missing dynamic modifier value', () => {
+      let errorCode = -1
+      const ast = baseParse('<div v-on.[] />', {
+        onError: err => {
+          errorCode = err.code as number
+        },
+      })
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(errorCode).toBe(
+        ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_VALUE,
+      )
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        rawName: 'v-on.[]',
+        arg: undefined,
+        modifiers: [],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { column: 13, line: 1, offset: 12 },
+          source: 'v-on.[]',
+        },
+      })
+    })
+
+    test('directive with invalid dynamic modifier value', () => {
+      const possibleWrongValues = [
+        '[]',
+        'null',
+        '123',
+        '"foo"',
+        '`foo`',
+        '!false',
+      ]
+
+      possibleWrongValues.forEach(val => {
+        let errorCode = -1
+        const ast = baseParse(`<div v-on.[${val}] />`, {
+          onError: err => {
+            errorCode = err.code as number
+          },
+          prefixIdentifiers: true,
+        })
+        const directive = (ast.children[0] as ElementNode).props[0]
+
+        expect(errorCode).toBe(
+          ErrorCodes.X_INVALID_VALUE_IN_DYNAMIC_DIRECTIVE_MODIFIER,
+        )
+
+        expect(directive).toStrictEqual({
+          type: NodeTypes.DIRECTIVE,
+          name: 'on',
+          rawName: `v-on.[${val}]`,
+          arg: undefined,
+          modifiers: [],
+          exp: undefined,
+          loc: {
+            end: { column: 13 + val.length, line: 1, offset: 12 + val.length },
+            source: `v-on.[${val}]`,
+            start: { column: 6, line: 1, offset: 5 },
+          },
+        })
+      })
+    })
+
     test('directive with argument and modifiers', () => {
       const ast = baseParse('<div v-on:click.enter.exact/>')
       const directive = (ast.children[0] as ElementNode).props[0]

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

@@ -664,12 +664,13 @@ describe('compiler: element transform', () => {
 
   test('runtime directives', () => {
     const { root, node } = parseWithElementTransform(
-      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" />`,
+      `<div v-foo v-bar="x" v-baz:[arg].mod.mad="y" v-baa.[{dyn:true}].[mid].boo="z" />`,
     )
     expect(root.helpers).toContain(RESOLVE_DIRECTIVE)
     expect(root.directives).toContain(`foo`)
     expect(root.directives).toContain(`bar`)
     expect(root.directives).toContain(`baz`)
+    expect(root.directives).toContain(`baa`)
 
     expect(node).toMatchObject({
       directives: {
@@ -708,33 +709,54 @@ describe('compiler: element transform', () => {
               },
               // modifiers
               {
-                type: NodeTypes.JS_OBJECT_EXPRESSION,
-                properties: [
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: '{ mod: true, mad: true }',
+              },
+            ],
+          },
+          {
+            type: NodeTypes.JS_ARRAY_EXPRESSION,
+            elements: [
+              `_directive_baa`,
+              // exp
+              {
+                type: NodeTypes.SIMPLE_EXPRESSION,
+                content: `z`,
+                isStatic: false,
+              },
+              //arg
+              'void 0',
+              // modifiers
+              {
+                type: NodeTypes.JS_CALL_EXPRESSION,
+                callee: 'Object.assign',
+                arguments: [
+                  createObjectMatcher({}),
                   {
-                    type: NodeTypes.JS_PROPERTY,
-                    key: {
-                      type: NodeTypes.SIMPLE_EXPRESSION,
-                      content: `mod`,
-                      isStatic: true,
-                    },
-                    value: {
-                      type: NodeTypes.SIMPLE_EXPRESSION,
-                      content: `true`,
-                      isStatic: false,
-                    },
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `{dyn:true}`,
+                  },
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `mid`,
                   },
                   {
-                    type: NodeTypes.JS_PROPERTY,
-                    key: {
-                      type: NodeTypes.SIMPLE_EXPRESSION,
-                      content: `mad`,
-                      isStatic: true,
-                    },
-                    value: {
-                      type: NodeTypes.SIMPLE_EXPRESSION,
-                      content: `true`,
-                      isStatic: false,
-                    },
+                    type: NodeTypes.JS_OBJECT_EXPRESSION,
+                    properties: [
+                      {
+                        type: NodeTypes.JS_PROPERTY,
+                        key: {
+                          type: NodeTypes.SIMPLE_EXPRESSION,
+                          content: `boo`,
+                          isStatic: true,
+                        },
+                        value: {
+                          type: NodeTypes.SIMPLE_EXPRESSION,
+                          content: `true`,
+                          isStatic: false,
+                        },
+                      },
+                    ],
                   },
                 ],
               },

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

@@ -507,6 +507,42 @@ describe('compiler: transform v-model', () => {
     )
   })
 
+  test('should generate modelModifiers for component v-model with dynamic modifiers', () => {
+    const root = parseWithVModel('<Comp v-model.trim.[bar]="foo" />', {
+      prefixIdentifiers: true,
+    })
+    const vnodeCall = (root.children[0] as ComponentNode)
+      .codegenNode as VNodeCall
+    // props
+    expect(vnodeCall.props).toMatchObject({
+      properties: [
+        { key: { content: `modelValue` } },
+        { key: { content: `onUpdate:modelValue` } },
+        {
+          key: { content: 'modelModifiers' },
+          value: {
+            arguments: [
+              {
+                properties: [
+                  {
+                    key: { content: 'trim' },
+                    value: { content: 'true', isStatic: false },
+                  },
+                ],
+              },
+              { content: '_ctx.bar', isStatic: false },
+            ],
+          },
+        },
+      ],
+    })
+    // should now include modelModifiers in dynamicPropNames because it's
+    // gonna change
+    expect(vnodeCall.dynamicProps).toBe(
+      `["modelValue", "onUpdate:modelValue", "modelModifiers"]`,
+    )
+  })
+
   describe('errors', () => {
     test('missing expression', () => {
       const onError = vi.fn()

packages/compiler-core/src/ast.ts

@@ -203,7 +203,7 @@ export interface DirectiveNode extends Node {
   rawName?: string
   exp: ExpressionNode | undefined
   arg: ExpressionNode | undefined
-  modifiers: SimpleExpressionNode[]
+  modifiers: ExpressionNode[]
   /**
    * optional property to cache the expression parse result for v-for
    */

packages/compiler-core/src/errors.ts

@@ -69,6 +69,10 @@ export enum ErrorCodes {
   X_MISSING_INTERPOLATION_END,
   X_MISSING_DIRECTIVE_NAME,
   X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END,
+  X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_END,
+  X_MISSING_DIRECTIVE_MODIFIER_NAME,
+  X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_VALUE,
+  X_INVALID_VALUE_IN_DYNAMIC_DIRECTIVE_MODIFIER,
 
   // transform errors
   X_V_IF_NO_EXPRESSION,
@@ -150,6 +154,16 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_ARGUMENT_END]:
     'End bracket for dynamic directive argument was not found. ' +
     'Note that dynamic directive argument cannot contain spaces.',
+  [ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_END]:
+    'End bracket for dynamic directive modifier was not found. ' +
+    'Note that dynamic directive modifier cannot contain spaces.',
+  [ErrorCodes.X_MISSING_DIRECTIVE_MODIFIER_NAME]:
+    'Directive modifier name cannot be empty. ',
+  [ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_VALUE]:
+    'Dynamic directive modifier value cannot be empty. ',
+  [ErrorCodes.X_INVALID_VALUE_IN_DYNAMIC_DIRECTIVE_MODIFIER]:
+    'Invalid value in dynamic directive modifier. ' +
+    'Note that dynamic directive modifier can only be objects or arrays.',
   [ErrorCodes.X_MISSING_DIRECTIVE_NAME]: 'Legal directive name was expected.',
 
   // transform errors