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

Author: Fuzzyma

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: {
@@ -740,6 +741,54 @@ describe('compiler: element transform', () => {
               },
             ],
           },
+          {
+            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.SIMPLE_EXPRESSION,
+                    content: `{dyn:true}`,
+                  },
+                  {
+                    type: NodeTypes.SIMPLE_EXPRESSION,
+                    content: `mid`,
+                  },
+                  {
+                    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/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

packages/compiler-core/src/parser.ts

@@ -274,7 +274,50 @@ const tokenizer = new Tokenizer(stack, {
         setLocEnd(arg.loc, end)
       }
     } else {
-      const exp = createSimpleExpression(mod, true, getLoc(start, end))
+      const isStatic = mod[0] !== `[`
+      const exp = createExp(
+        isStatic ? mod : mod.slice(1, -1),
+        isStatic,
+        getLoc(start, end),
+        isStatic ? ConstantTypes.CAN_STRINGIFY : ConstantTypes.NOT_CONSTANT,
+      )
+
+      if (!exp.ast && !exp.content.trim()) {
+        if (isStatic) {
+          emitError(
+            ErrorCodes.X_MISSING_DIRECTIVE_MODIFIER_NAME,
+            exp.loc.start.offset,
+          )
+        } else {
+          emitError(
+            ErrorCodes.X_MISSING_DYNAMIC_DIRECTIVE_MODIFIER_VALUE,
+            exp.loc.start.offset,
+          )
+        }
+        return
+      }
+
+      const invalidBabelNodeTypes = [
+        'ArrayExpression',
+        'UnaryExpression',
+        'StringLiteral',
+        'NumericLiteral',
+        'TemplateLiteral',
+      ]
+
+      const invalidSimpleValues = ['true', 'false', 'null', 'undefined']
+
+      if (
+        (exp.ast && invalidBabelNodeTypes.includes(exp.ast.type)) ||
+        (!exp.ast && invalidSimpleValues.includes(exp.content))
+      ) {
+        emitError(
+          ErrorCodes.X_INVALID_VALUE_IN_DYNAMIC_DIRECTIVE_MODIFIER,
+          exp.loc.start.offset + 1,
+        )
+        return
+      }
+
       ;(currentProp as DirectiveNode).modifiers.push(exp)
     }
   },
@@ -382,7 +425,7 @@ const tokenizer = new Tokenizer(stack, {
             __COMPAT__ &&
             currentProp.name === 'bind' &&
             (syncIndex = currentProp.modifiers.findIndex(
-              mod => mod.content === 'sync',
+              mod => (mod as SimpleExpressionNode).content === 'sync',
             )) > -1 &&
             checkCompatEnabled(
               CompilerDeprecationTypes.COMPILER_V_BIND_SYNC,