fix: dynamic v-bind and v-on

Author: xiaoxiangmoe

src/core/parseSFC.ts

@@ -14,6 +14,12 @@ const SIMPLE_EXPRESSION: NodeTypes.SIMPLE_EXPRESSION = 4
 const multilineCommentsRE = /\/\*\s(.|[\r\n])*?\*\//gm
 const singlelineCommentsRE = /\/\/\s.*/g
 
+const BUILD_IN_DIRECTIVES_WIRH_ARGUMENT = new Set([
+  'on',
+  'bind',
+  'slot',
+])
+
 const BUILD_IN_DIRECTIVES = new Set([
   'if',
   'else',
@@ -36,6 +42,17 @@ const BUILD_IN_DIRECTIVES = new Set([
   // 'ref',
 ])
 
+function maybeHasDirectiveArgument(nameWithPrefixV: string) {
+  const directiveName = nameWithPrefixV.replace(/^v-/, '')
+  if (BUILD_IN_DIRECTIVES_WIRH_ARGUMENT.has(directiveName))
+    return true
+
+  else if (BUILD_IN_DIRECTIVES.has(directiveName))
+    return false
+
+  return true
+}
+
 function parseDirective(comp: string, attr: string, body: string) {
   const elementNode = baseCompile(`<${comp} ${attr}="${body}" />`).ast.children[0]
   if (elementNode?.type !== ELEMENT) return undefined
@@ -122,7 +139,10 @@ export function parseSFC(code: string, id?: string, options?: ScriptSetupTransfo
           expressions.add(`(${value})`)
       }
 
-      if (key.startsWith('v-')) {
+      if (
+        ['v-', '@[', ':['].some(prefix => key.startsWith(prefix))
+        && maybeHasDirectiveArgument(key)
+      ) {
         const parsedDirective = parseDirective(name, key, value)
         if (parsedDirective && !BUILD_IN_DIRECTIVES.has(parsedDirective.name))
           directives.add(camelize(parsedDirective.name))

test/__snapshots__/transform.test.ts.snap

@@ -184,6 +184,7 @@ exports[`transform fixtures test/fixtures/ComponentsDirectives.vue 1`] = `
 "<template>
   <div>
     <FooView
+      v-if=\\"now > 0\\"
       ref=\\"fooView\\"
       v-foo-bar=\\"message0\\"
       v-d0-demo:foo.a.b=\\"message1\\"
@@ -195,7 +196,8 @@ exports[`transform fixtures test/fixtures/ComponentsDirectives.vue 1`] = `
       v-d6-arg-dynamic-no-value:[direction3]
       v-d6-arg-dynamic-no-value:shouldNotUsed
     ></FooView>
-    <router-view></router-view>
+    <button v-else-if=\\"now === 0\\" :[propNamePrefix+propName]=\\"1\\" @[eventPrefix.value+eventName]=\\"console.log($event)\\"></button>
+    <router-view v-else></router-view>
   </div>
 </template>
 
@@ -216,6 +218,14 @@ __sfc_main.setup = (__props, __ctx) => {
   const direction2 = ref('top');
   const direction3 = ref('top');
   const shouldNotUsed = ref('');
+  const propNamePrefix = 'vue-';
+  const propName = 'color';
+  const eventPrefix = {
+    value: 'vue-'
+  };
+  const eventName = '';
+  const console = globalThis.console;
+  const now = Date.now();
   return {
     fooView,
     message0,
@@ -225,7 +235,13 @@ __sfc_main.setup = (__props, __ctx) => {
     message4,
     direction1,
     direction2,
-    direction3
+    direction3,
+    propNamePrefix,
+    propName,
+    eventPrefix,
+    eventName,
+    console,
+    now
   };
 };
 

test/fixtures/ComponentsDirectives.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <FooView
+      v-if="now > 0"
       ref="fooView"
       v-foo-bar="message0"
       v-d0-demo:foo.a.b="message1"
@@ -12,7 +13,8 @@
       v-d6-arg-dynamic-no-value:[direction3]
       v-d6-arg-dynamic-no-value:shouldNotUsed
     ></FooView>
-    <router-view></router-view>
+    <button v-else-if="now === 0" :[propNamePrefix+propName]="1" @[eventPrefix.value+eventName]="console.log($event)"></button>
+    <router-view v-else></router-view>
   </div>
 </template>
 
@@ -31,4 +33,12 @@ const direction1 = ref('top')
 const direction2 = ref('top')
 const direction3 = ref('top')
 const shouldNotUsed = ref('')
+
+const propNamePrefix = 'vue-'
+const propName = 'color'
+const eventPrefix = { value: 'vue-' }
+const eventName = ''
+
+const console = globalThis.console
+const now = Date.now()
 </script>