refactor: v-for

Author: zhiyuanzmj

playground/virtual-dom/App.vue

@@ -82,7 +82,6 @@ defineRender((
       <Comp
         v-permission={`"post"`}
         v-model_number={count.value}
-        icon1={`"icon1"`}
         icon={(
           <i id="id">
             {count.value
@@ -95,6 +94,7 @@ defineRender((
             "+"
           </i>
         )}
+        icon1={`"icon1"`}
         getChildren={() => {
           const A = (
             <Comp icon={<i>"-"</i>} />

playground/virtual-dom/for.vue

@@ -12,11 +12,32 @@ function Comp() {
 
 const count = ref(0)
 defineRender(
-  <>
+  <div>
     <button onClick={() => count.value++}>
       {count.value}
     </button>
+    <div>
+      {count.value}
+    </div>
+    {
+      Array.from({ length: 3 }).map((_, index) => (
+        <span>
+          {index}
+        </span>
+      ))
+    }
+    {' '}
+    {
+      Array.from({ length: 3 }).map((_, index) => {
+        const idx = index + 1
+        return (
+          <span>
+            {idx}
+          </span>
+        )
+      })
+    }
     <Comp v-for={i in 3} key={i} ref={() => {}} />
-  </>,
+  </div>,
 )
 </script>

src/core/transform.ts

@@ -9,38 +9,38 @@ import type { Node } from '@babel/types'
 import type { Options } from '../types'
 import { transformVIf } from './v-if'
 import { transformVFor } from './v-for'
-import { getReturnExpression, isConditionalExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
+import { isConditionalExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
+
+export type RootNodes = {
+  node: Node
+  postCallbacks?: ((() => void) | undefined)[]
+  isAttributeValue?: boolean
+}[]
 
 export function transformVueJsxVapor(
   code: string,
   id: string,
   options: Options,
 ) {
   const s = new MagicString(code)
-  const exclude: Node[] = []
   let hasTextNode = false
-  const rootNodes: {
-    node: Node
-    postCallbacks: ((() => void) | undefined)[]
-    isAttributeValue?: boolean
-  }[] = []
+  const rootNodes: RootNodes = []
   let postCallbacks: ((() => void) | undefined)[] = []
   walkAST<Node>(babelParse(code, getLang(id)), {
     enter(node, parent) {
       if (
         parent?.type !== 'JSXExpressionContainer'
         && !isJSXExpression(parent)
         && isJSXExpression(node)
-        && !exclude.includes(node)
       ) {
         rootNodes.unshift({
           node,
           postCallbacks: [],
         })
-        postCallbacks = rootNodes[0].postCallbacks
+        postCallbacks = rootNodes[0].postCallbacks!
       }
       else if (
-        (parent?.type === 'JSXAttribute')
+        parent?.type === 'JSXAttribute'
         && node.type === 'JSXExpressionContainer'
         && /("|<.*?\/.*?>)/.test(s.sliceNode(node.expression))
       ) {
@@ -49,7 +49,7 @@ export function transformVueJsxVapor(
           postCallbacks: [],
           isAttributeValue: true,
         })
-        postCallbacks = rootNodes[0].postCallbacks
+        postCallbacks = rootNodes[0].postCallbacks!
       }
 
       if (
@@ -102,9 +102,8 @@ export function transformVueJsxVapor(
         isMapCallExpression(node)
       ) {
         postCallbacks.unshift(
-          transformVFor(node, parent, s),
+          transformVFor(node, parent, rootNodes, s),
         )
-        exclude.unshift(getReturnExpression(node.arguments[0])!)
       }
       else if (
         isConditionalExpression(node)
@@ -126,12 +125,12 @@ export function transformVueJsxVapor(
         else if (!isJSXExpression(node.expression)) {
           s.overwrite(node.start!, node.start! + 1, '<component :is="__createTextVNode(')
           s.overwrite(node.end! - 1, node.end!, ')" />')
+
           if (
             /("|<.*?\/.*?>)/.test(s.sliceNode(node.expression))
           ) {
             rootNodes.unshift({
               node: node.expression,
-              postCallbacks: [],
               isAttributeValue: true,
             })
           }
@@ -171,9 +170,10 @@ export function transformVueJsxVapor(
       return content
     }
   }
+
   const placeholders: string[] = []
   for (const { node, postCallbacks, isAttributeValue } of rootNodes) {
-    postCallbacks.forEach(callback => callback?.())
+    postCallbacks?.forEach(callback => callback?.())
 
     const result = compile(node)
       .replaceAll(/__PLACEHOLDER_(\d)/g, (_, $1) => placeholders[$1])
@@ -189,7 +189,7 @@ export function transformVueJsxVapor(
     importSet.add('createTextVNode as _createTextVNode')
     importSet.add('toDisplayString as _toDisplayString')
     s.prepend(
-     `const __createTextVNode = (node) => node?.__v_isVNode || typeof node ==='function' ? node: _createTextVNode(_toDisplayString(node));`,
+     `const __createTextVNode = (node) => node?.__v_isVNode || typeof node === 'function' || (Array.isArray(node) && node[0]?.__v_isVNode) ? node : _createTextVNode(_toDisplayString(node));`,
     )
   }
 

src/core/v-for.ts

@@ -1,10 +1,11 @@
 import type { MagicString } from '@vue-macros/common'
 import type { CallExpression, Node } from '@babel/types'
-import { addAttribute, getReturnExpression, isJSXElement, overwrite } from './common'
+import type { RootNodes } from './transform'
 
 export function transformVFor(
   node: CallExpression,
   parent: Node | null | undefined,
+  rootNodes: RootNodes,
   s: MagicString,
 ) {
   const { callee, arguments: [argument] } = node
@@ -23,21 +24,15 @@ export function transformVFor(
     : null
   const directive = ` v-for="(${left}) in ${right}"`
 
-  const returnExpression = getReturnExpression(argument)
-  if (!returnExpression)
-    return
-
-  if (isJSXElement(returnExpression)) {
-    addAttribute(returnExpression, directive, s)
-
-    return () => {
-      s.overwrite(start, returnExpression.start!, '')
-      s.overwrite(returnExpression.end!, end, '')
-    }
-  }
-
+  rootNodes.unshift({
+    node: {
+      ...argument.body,
+      type: 'ReturnStatement',
+    },
+    isAttributeValue: true,
+  })
   return () => {
-    s.overwrite(start, returnExpression.start!, `<template${directive}>`)
-    s.overwrite(returnExpression.end!, end, `</template>`)
+    s.overwrite(start, argument.body.start!, `<template${directive}><component :is="()=>`)
+    s.overwrite(argument.body.end!, end, `"/></template>`)
   }
 }