feat: add v-for

Author: zhiyuanzmj

playground/App.vue

@@ -11,35 +11,52 @@ export default defineComponent({
         <form onSubmit_prevent>
           <input
             v-bind:value={count.value}
-            onInput={(event: any) => count.value = event.target.value}
+            onInput={count.value = $event.target.value}
           />
 
           <div>
             v-text:
             <span v-text={count.value} />
           </div>
+
           <div>
             v-html:
             <span v-html={count.value} />
           </div>
+
           <div>
             v-once:
             <span v-once>
               {count.value}
             </span>
           </div>
+
           <div>
             v-pre:
             <span v-pre>
               {count.value}
             </span>
           </div>
+
           <div>
             v-cloak:
             <span v-cloak>
               {count.value}
             </span>
           </div>
+
+          <div>
+            v-for:
+            {
+             Array.from({ length: 10 }).map(() => {
+               return (
+                 <span>
+                   1
+                 </span>
+               )
+             })
+            }
+          </div>
         </form>
       </>
     )

src/core/transfrom.ts renamed to src/core/transform.ts

@@ -7,8 +7,9 @@ import {
   parseSFC,
   walkAST,
 } from '@vue-macros/common'
-import type { JSXElement, JSXFragment, Node, Program } from '@babel/types'
+import type { CallExpression, JSXElement, JSXFragment, Node, Program } from '@babel/types'
 import { compile } from 'vue/vapor'
+import { transformVFor } from './v-for'
 
 export function transformVueJsxVapor(code: string, id: string) {
   const lang = getLang(id)
@@ -35,71 +36,91 @@ export function transformVueJsxVapor(code: string, id: string) {
   }
 
   const s = new MagicString(code)
+  const importSet = new Set()
   for (const { ast, offset } of asts) {
     const rootElements: (JSXElement | JSXFragment)[] = []
+    const vForNodes: CallExpression[] = []
     walkAST<Node>(ast, {
       enter(node, parent) {
-        if (node.type === 'JSXElement') {
-          if (
+        if (
+          (node.type === 'JSXElement'
+          && (
             parent?.type === 'VariableDeclarator'
             || parent?.type === 'ArrowFunctionExpression'
             || parent?.type === 'CallExpression'
             || parent?.type === 'ReturnStatement'
-          )
-            rootElements.push(node)
+          ))
+          || node.type === 'JSXFragment'
+        ) {
+          rootElements.push(node)
+          this.skip()
+        }
+      },
+    })
 
+    for (const rootElement of rootElements) {
+      walkAST<Node>(rootElement, {
+        enter(node, parent) {
           if (
-            node.openingElement.attributes.find(
+            node.type === 'JSXElement'
+            && node.openingElement.attributes.find(
               attr =>
                 attr.type === 'JSXAttribute'
                 && s.sliceNode(attr.name, { offset }) === 'v-pre',
             )
-          )
+          ) {
             return this.skip()
-        }
-        else if (node.type === 'JSXFragment') {
-          rootElements.push(node)
-        }
-        else if (node.type === 'JSXAttribute') {
-          let name = s.sliceNode(node.name, { offset })
-          if (/^on[A-Z]/.test(name)) {
-            name = name.replace(
-              /^(on)([A-Z])/,
-              (_, __, str) => `@${str.toLowerCase()}`,
-            )
           }
-          else if (!name.startsWith('v-')) {
-            name = `:${name}`
+          else if (
+            node.type === 'JSXExpressionContainer'
+            && parent?.type === 'JSXElement'
+          ) {
+            if (node.expression.type === 'CallExpression'
+              && node.expression.callee.type === 'MemberExpression'
+              && node.expression.callee.property.type === 'Identifier'
+              && node.expression.callee.property.name === 'map') {
+              vForNodes.push(node.expression)
+              s.remove(node.start! + offset, node.expression.start! + offset)
+              s.remove(node.expression.end! + offset, node.end! + offset)
+            }
+            else {
+              s.appendLeft(node.start! + offset, '{')
+              s.appendRight(node.end! + offset, '}')
+            }
           }
-          s.overwriteNode(node.name, `${name.replaceAll('_', '.')}`, {
-            offset,
-          })
+          else if (node.type === 'JSXAttribute') {
+            let name = s.sliceNode(node.name, { offset })
+            if (/^on[A-Z]/.test(name)) {
+              name = name.replace(
+                /^(on)([A-Z])/,
+                (_, __, str) => `@${str.toLowerCase()}`,
+              )
+            }
+            else if (!name.startsWith('v-')) {
+              name = `:${name}`
+            }
+            s.overwriteNode(node.name, `${name.replaceAll('_', '.')}`, {
+              offset,
+            })
 
-          if (node.value && node.value.type !== 'StringLiteral') {
-            s.overwriteNode(
-              node.value,
+            if (node.value && node.value.type !== 'StringLiteral') {
+              s.overwriteNode(
+                node.value,
               `"${
                 s.slice(
                   node.value.start! + offset + 1,
                   node.value.end! + offset - 1,
                 )
                 }"`,
               { offset },
-            )
+              )
+            }
           }
-        }
-        else if (
-          node.type === 'JSXExpressionContainer'
-          && parent?.type === 'JSXElement'
-        ) {
-          s.appendLeft(node.start! + offset, '{')
-          s.appendRight(node.end! + offset, '}')
-        }
-      },
-    })
+        },
+      })
+
+      transformVFor(vForNodes, s, offset)
 
-    const importSet = new Set()
-    for (const rootElement of rootElements) {
       const { code } = compile(
         s.sliceNode(
           rootElement.type === 'JSXFragment'

src/core/v-for.ts

@@ -0,0 +1,48 @@
+import type { MagicString } from '@vue-macros/common'
+import type { CallExpression, Expression, Node } from '@babel/types'
+
+export function transformVFor(
+  nodes: CallExpression[],
+  s: MagicString,
+  offset: number,
+) {
+  nodes.forEach((node) => {
+    const [argument] = node.arguments
+    if (!argument)
+      return
+
+    let left
+    let returnExpression
+    if (
+      argument.type === 'FunctionExpression'
+      || argument.type === 'ArrowFunctionExpression'
+    ) {
+      left = s.sliceNode(argument.params, { offset })
+      if (argument.body.type !== 'BlockStatement') {
+        returnExpression = argument.body
+      }
+      else {
+        for (const statement of argument.body.body) {
+          if (statement.type === 'ReturnStatement' && statement.argument)
+            returnExpression = statement.argument
+        }
+      }
+    }
+    if (!returnExpression)
+      return
+
+    const right = node.callee.type === 'MemberExpression'
+      ? s.sliceNode(node.callee.object, { offset })
+      : null
+    if (!right)
+      return
+
+    const tagName = returnExpression.type === 'JSXElement' ? returnExpression.openingElement.name : returnExpression.type === 'JSXFragment' ? returnExpression.openingFragment : null
+    if (!tagName)
+      return
+    if (tagName.end)
+      s.appendRight(tagName.end, ` v-for="(${left}) in ${right}"`)
+    s.remove(node.start! + offset, returnExpression.start! + offset - 1)
+    s.remove(returnExpression.end! + offset + 1, node.end! + offset)
+  })
+}

src/index.ts

@@ -2,7 +2,7 @@ import type { UnpluginFactory } from 'unplugin'
 import { createUnplugin } from 'unplugin'
 import { createFilter } from 'vite'
 import type { Options } from './types'
-import { transformVueJsxVapor } from './core/transfrom'
+import { transformVueJsxVapor } from './core/transform'
 
 export const unpluginFactory: UnpluginFactory<Options | undefined> = options => ({
   enforce: 'pre',