fix(compiler-core): fix parsing for directive with dynamic argument containing dots

Author: yyx990803

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

@@ -1015,6 +1015,43 @@ describe('compiler: parse', () => {
       })
     })
 
+    test('directive with dynamic argument', () => {
+      const ast = baseParse('<div v-on:[event]/>')
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        arg: {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: 'event',
+          isStatic: false,
+          isConstant: false,
+
+          loc: {
+            source: '[event]',
+            start: {
+              column: 11,
+              line: 1,
+              offset: 10
+            },
+            end: {
+              column: 18,
+              line: 1,
+              offset: 17
+            }
+          }
+        },
+        modifiers: [],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 17, line: 1, column: 18 },
+          source: 'v-on:[event]'
+        }
+      })
+    })
+
     test('directive with a modifier', () => {
       const ast = baseParse('<div v-on.enter/>')
       const directive = (ast.children[0] as ElementNode).props[0]
@@ -1088,6 +1125,43 @@ describe('compiler: parse', () => {
       })
     })
 
+    test('directive with dynamic argument and modifiers', () => {
+      const ast = baseParse('<div v-on:[a.b].camel/>')
+      const directive = (ast.children[0] as ElementNode).props[0]
+
+      expect(directive).toStrictEqual({
+        type: NodeTypes.DIRECTIVE,
+        name: 'on',
+        arg: {
+          type: NodeTypes.SIMPLE_EXPRESSION,
+          content: 'a.b',
+          isStatic: false,
+          isConstant: false,
+
+          loc: {
+            source: '[a.b]',
+            start: {
+              column: 11,
+              line: 1,
+              offset: 10
+            },
+            end: {
+              column: 16,
+              line: 1,
+              offset: 15
+            }
+          }
+        },
+        modifiers: ['camel'],
+        exp: undefined,
+        loc: {
+          start: { offset: 5, line: 1, column: 6 },
+          end: { offset: 21, line: 1, column: 22 },
+          source: 'v-on:[a.b].camel'
+        }
+      })
+    })
+
     test('v-bind shorthand', () => {
       const ast = baseParse('<div :a=b />')
       const directive = (ast.children[0] as ElementNode).props[0]

packages/compiler-core/src/parse.ts

@@ -599,7 +599,7 @@ function parseAttribute(
   const loc = getSelection(context, start)
 
   if (!context.inVPre && /^(v-|:|@|#)/.test(name)) {
-    const match = /(?:^v-([a-z0-9-]+))?(?:(?::|^@|^#)([^\.]+))?(.+)?$/i.exec(
+    const match = /(?:^v-([a-z0-9-]+))?(?:(?::|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i.exec(
       name
     )!