feat(jsx-directive): support $event in v-on

Author: zhiyuanzmj

playground/src/App.vue

@@ -4,13 +4,13 @@ import Comp from './components/Comp.vue'
 const list = [{ id: 1 }]
 const bind = { }
 const on = { submit: () => {} }
-const select = $ref<{ id: number }>()
+const select = $ref<{ id: number }>(list[0])
 </script>
 
 <template>
   <Comp
     v-for="i in list"
-    v-if="list"
+    v-if="select"
     :key="i.id"
     v-bind="bind"
     v-model:id="i.id"
@@ -19,6 +19,7 @@ const select = $ref<{ id: number }>()
     v-on="on"
     @click.once="select = i"
     @submit="alert"
+    @update="select.id = $event"
   >
     <template v-slot:default="{ id }">
       <div>{{ id }}</div>

playground/src/components/Comp.vue

@@ -1,13 +1,17 @@
 <template>
-  <div>
-    <slot :id="`${id}`" />
+  <div @click="()=> $emit('update', 2)">
+    <slot :id="`${id}`"/>
     <slot name="bottom" v-bind="{ foo: id }" />
   </div>
 </template>
 
 <script setup lang="ts">
 const { id } = defineProps<{ id: number }>()
 
+defineEmits<{
+  update: [id: number]
+}>()
+
 defineSlots<{
   default: (props: { id: string }) => any
   bottom: (props: { foo: number }) => any

src/index.ts

@@ -80,7 +80,10 @@ async function useTsx(cb = () => {}, action = 'clean') {
 if (['jsx-directive', 'setup-sfc'].includes(macro)) {
   await $`${sg} scan -c ${config}.yml -U --filter '^v-' ${target}`
   await $`${sg} scan -c ${config}.yml -U --filter '^${macro === 'setup-sfc' ? 'export-render' : render}' ${target}`
-  await useTsx(() => $`${sg} scan -c ${config}-tsx.yml -U --filter '^v-' ${target}`, macro === 'setup-sfc' ? 'delete' : 'clean')
+  await useTsx(async () => {
+    await $`${sg} scan -c ${config}-tsx.yml -U --filter '^v-' ${target}`
+    await $`${sg} scan -c ${config}-tsx.yml -U --filter '^define-emits' ${target}`
+  }, macro === 'setup-sfc' ? 'delete' : 'clean')
 
   if (macro === 'setup-sfc')
     toSetupSFC()

src/rules/define-emits.yml

@@ -0,0 +1,25 @@
+id: define-emits add emit
+language: tsx
+rule:
+  kind: expression_statement
+  pattern: $A
+  has:
+    kind: call_expression
+    has:
+      kind: identifier
+      regex: ^defineEmits$
+  inside:
+    kind: program
+fix: |-
+  const emit = $A
+
+---
+
+id: define-emits to emit
+language: tsx
+rule:
+  kind: identifier
+  regex: ^\$emit$
+  inside:
+    kind: call_expression
+fix: emit

src/rules/jsx-directive/v-on.yml

@@ -46,21 +46,21 @@ fix:
 
 ---
 
-id: v-on
+id: v-on no $event
 language: tsx
 rule:
-  kind: jsx_expression
-  not:
-    has:
-      any:
-        - kind: member_expression
-        - kind: identifier
-        - kind: function
-        - kind: arrow_function
-    pattern: $A
-  follows:
-    kind: property_identifier
-    regex: ^on[A-Z_]
-    stopBy: end
+  matches: is-event
+  pattern: $A
 fix: |-
   {() => $A}
+
+---
+
+id: v-on has $event
+language: tsx
+rule:
+  matches: is-event
+  pattern: $A
+  regex: '\$event'
+fix: |-
+  {($event) => $A}

src/utils/is-event.yml

@@ -0,0 +1,15 @@
+id: is-event
+language: tsx
+rule:
+  kind: jsx_expression
+  not:
+    has:
+      any:
+        - kind: member_expression
+        - kind: identifier
+        - kind: function
+        - kind: arrow_function
+  follows:
+    kind: property_identifier
+    regex: ^on[A-Z_]
+    stopBy: end