support simple v-for destructure

Author: yyx990803

demos/for.html

@@ -24,9 +24,9 @@
   <button @click="list.pop()">pop</button>
   <button @click="splice">splice</button>
   <ul>
-    <li v-for="(item, index) in list" :key="item.id">
-      <div>{{ index }} {{ item }}</div>
-      <input v-model="item.text" />
+    <li v-for="({ id, text }, index) in list" :key="id">
+      <div>{{ index }} {{ { id, text } }}</div>
+      <input v-model="text" />
     </li>
   </ul>
 </div>

src/directives/for.ts

@@ -7,6 +7,7 @@ import { createScopedContext } from './scope'
 const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
+const destructureRE = /^[{[]\s*((?:[\w_$]+\s*,?\s*)+)[\]}]$/
 
 interface ChildScope {
   ctx: Context
@@ -31,6 +32,8 @@ export const _for = (el: Element, exp: string, ctx: Context) => {
 
   const sourceExp = inMatch[2].trim()
   let valueExp = inMatch[1].trim().replace(stripParensRE, '').trim()
+  let destructureBindings: string[] | undefined
+  let isArrayDestructure = false
   let indexExp: string | undefined
   let objIndexExp: string | undefined
 
@@ -44,15 +47,20 @@ export const _for = (el: Element, exp: string, ctx: Context) => {
     if (keyAttr === 'key') keyExp = JSON.stringify(keyExp)
   }
 
-  const iteratorMatch = valueExp.match(forIteratorRE)
-  if (iteratorMatch) {
+  let match
+  if ((match = valueExp.match(forIteratorRE))) {
     valueExp = valueExp.replace(forIteratorRE, '').trim()
-    indexExp = iteratorMatch[1].trim()
-    if (iteratorMatch[2]) {
-      objIndexExp = iteratorMatch[2].trim()
+    indexExp = match[1].trim()
+    if (match[2]) {
+      objIndexExp = match[2].trim()
     }
   }
 
+  if ((match = valueExp.match(destructureRE))) {
+    destructureBindings = match[1].split(',').map((s) => s.trim())
+    isArrayDestructure = valueExp[0] === '['
+  }
+
   let mounted = false
   let blocks: Block[]
   let scopes: ChildScope[]
@@ -69,8 +77,14 @@ export const _for = (el: Element, exp: string, ctx: Context) => {
       index: number,
       objKey?: string
     ): ChildScope => {
-      // TODO destructure
-      const data = { [valueExp]: value }
+      const data: any = {}
+      if (destructureBindings) {
+        destructureBindings.forEach(
+          (b, i) => (data[b] = value[isArrayDestructure ? i : b])
+        )
+      } else {
+        data[valueExp] = value
+      }
       if (objKey) {
         indexExp && (data[indexExp] = objKey)
         objIndexExp && (data[objIndexExp] = index)

src/directives/on.ts

@@ -57,7 +57,7 @@ export const on: Directive = ({ el, get, exp, arg, modifiers }) => {
     }
 
     listen(el, arg, handler, modifiers)
-  } else {
-    // TODO warn
+  } else if (import.meta.env.DEV) {
+    console.error(`v-on="obj" syntax is not supported in petite-vue.`)
   }
 }