feat: support object slots

Author: zhiyuanzmj

package.json

@@ -124,13 +124,16 @@
   },
   "dependencies": {
     "@vue-macros/common": "^1.10.0",
+    "html-tags": "^3.3.1",
+    "svg-tags": "^1.0.0",
     "unplugin": "^1.5.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.6.2",
     "@nuxt/kit": "^3.8.2",
     "@nuxt/schema": "^3.8.2",
     "@types/node": "^20.10.3",
+    "@types/svg-tags": "^1.0.2",
     "bumpp": "^9.2.0",
     "chalk": "^5.3.0",
     "eslint": "^8.55.0",

playground/virtual-dom/App.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import For from './for.vue'
 import Bind from './bind.vue'
+import Slot from './slot.vue'
 
 const count = ref(1)
 function Comp({ icon, getChildren }: any, { slots }: any) {
@@ -217,6 +218,14 @@ defineRender((
                 : null)
             }
       </div>
+
+      <div>
+        v-slot:
+        <Slot v-slot={scope}>
+          default slot:
+          {scope}
+        </Slot>
+      </div>
     </form>
   </>
 ),

playground/virtual-dom/slot.vue

@@ -0,0 +1,20 @@
+<script setup lang="tsx">
+function Comp(_: any, { slots }: any) {
+  return (
+    <span>
+      <template v-for={(Slot, slotName) in slots} key={slotName}>
+        <slot name={slotName} />
+      </template>
+    </span>
+  )
+}
+
+const getSlots = () => ({ slots: { default: () => <span>default slot</span> } })
+defineRender(
+  () => (
+    <Comp>
+      {getSlots().slots}
+    </Comp>
+  ),
+)
+</script>

pnpm-lock.yaml

@@ -1,5 +1,20 @@
-import type { ArrowFunctionExpression, CallExpression, ConditionalExpression, Expression, FunctionExpression, LogicalExpression, Node } from '@babel/types'
+import type { ArrowFunctionExpression, CallExpression, ConditionalExpression, Expression, FunctionExpression, JSXElement, JSXFragment, JSXOpeningElement, LogicalExpression, Node } from '@babel/types'
 import type { MagicString } from '@vue-macros/common'
+import htmlTags from 'html-tags'
+import svgTags from 'svg-tags'
+
+export function isComponent(node: JSXOpeningElement) {
+  if (node.name.type === 'JSXIdentifier') {
+    const name = node.name.name
+    return (
+      !htmlTags.includes(name as htmlTags.htmlTags)
+      && !svgTags.includes(name)
+    )
+  }
+  else {
+    return node.name.type === 'JSXMemberExpression'
+  }
+}
 
 export function addAttribute(
   node: Node,
@@ -58,7 +73,7 @@ export function isJSXExpression(node?: Node | null): boolean {
   )
 }
 
-export function isJSXElement(node?: Node | null): boolean {
+export function isJSXElement(node?: Node | null): node is JSXElement | JSXFragment {
   return !!node && (
     node.type === 'JSXElement'
     || node.type === 'JSXFragment'

src/core/common.ts

@@ -9,7 +9,7 @@ import type { Node } from '@babel/types'
 import type { Options } from '../types'
 import { transformVIf } from './v-if'
 import { transformVFor } from './v-for'
-import { isConditionalExpression, isFunctionExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
+import { isComponent, isConditionalExpression, isFunctionExpression, isJSXElement, isJSXExpression, isLogicalExpression, isMapCallExpression } from './common'
 
 export type RootNodes = {
   node: Node
@@ -124,8 +124,20 @@ export function transformVueJsxVapor(
             s.removeNode(node),
           )
         }
+        else if (parent?.type === 'JSXElement'
+          && isComponent(parent.openingElement)
+          && parent.children.filter(child => s.sliceNode(child).trim()).length === 1
+        ) {
+          rootNodes.unshift({
+            node: node.expression,
+            isAttributeValue: true,
+          })
+          s.prepend(`const _toSlots = s => (Object.prototype.toString.call(s) === '[object Object]' && !s?.__v_isVNode) ? s : { default: typeof s === 'function' ? s: () => s };`)
+          s.overwrite(node.start!, node.expression.start!, `<template v-for="(slot, slotName) in _toSlots(`)
+          s.overwrite(node.expression.end!, node.end!, `)" v-slot:[slotName]="scope" :key="slotName"><component :is="slot" v-bind="scope" /></template>`)
+        }
         else if (!isJSXExpression(node.expression)) {
-          s.overwrite(node.start!, node.start! + 1, '<component :is="__createTextVNode(')
+          s.overwrite(node.start!, node.start! + 1, '<component :is="_resolveJSXExpression(')
           s.overwrite(node.end! - 1, node.end!, ')" />')
 
           rootNodes.unshift({
@@ -158,7 +170,7 @@ export function transformVueJsxVapor(
         .replace('_cache', '_cache = []')
         .replaceAll(/_ctx\.(?!\$slots)/g, '')
         .replaceAll(/{ "v\d+\-bind": ([\s\S]*) }/g, '$1')
-        .replaceAll(/_resolveComponent\("(.*)"\)/g, ($0, $1) => `(() => { try { return ${$1} } catch { return ${$0} } })()`)
+        .replaceAll(/(?<!const )_component_(\w*)/g, ($0, $1) => `(() => { try { return ${$1.replaceAll(/(?<=\w)46(?=\w)/g, '.')} } catch { return ${$0} } })()`)
       return runtime === '"vue"' ? `(${code})()` : code
     }
     else {
@@ -184,7 +196,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' || (Array.isArray(node) && node[0]?.__v_isVNode) ? node : _createTextVNode(_toDisplayString(node));`,
+     `const _resolveJSXExpression = (node) => node?.__v_isVNode || typeof node === 'function' || (Array.isArray(node) && node[0]?.__v_isVNode) ? node : _createTextVNode(_toDisplayString(node));`,
     )
   }
 

src/core/transform.ts

@@ -28,7 +28,7 @@ export function transformVIf(
         s.remove(start!, consequent.start!)
       }
       else {
-        overwrite(start, consequent.start!, `<template${directive}>${isJSXExpressionConsequent ? '' : '<component :is="__createTextVNode('}`, s)
+        overwrite(start, consequent.start!, `<template${directive}>${isJSXExpressionConsequent ? '' : '<component :is="_resolveJSXExpression('}`, s)
       }
 
       if (isJSXElement(alternate)) {
@@ -51,7 +51,7 @@ export function transformVIf(
             `${isJSXElementConsequent
                 ? ''
                 : `${isJSXExpressionConsequent ? '' : ')" />'
-              }</template>`}<template v-else>${isJSXExpressionAlternate ? '' : '<component :is="__createTextVNode('}`,
+              }</template>`}<template v-else>${isJSXExpressionAlternate ? '' : '<component :is="_resolveJSXExpression('}`,
             s,
         )
         overwrite(alternate.end!, end, `${isJSXExpressionAlternate ? '' : ')" />'}</template>`, s)