fix: prevent handle identifies in v-slot

Author: zhiyuanzmj

src/core/options.ts

@@ -18,6 +18,11 @@ export function resolveOption(options: Options): OptionsResolved {
     include: [REGEX_SUPPORTED_EXT],
     exclude: [REGEX_NODE_MODULES],
     ...options,
-    ignore: [...ignore, ...(options.ignore || []).map((str) => str.slice(1))],
+    ignore: [
+      ...ignore,
+      ...(options.ignore || []).map((str) =>
+        str.replace(/^\$?([^$]+)\$?$/, '$1'),
+      ),
+    ],
   }
 }

src/core/utils.ts

@@ -95,3 +95,15 @@ export async function getOxcParser(browser = typeof window !== 'undefined') {
   }
   return parseSync
 }
+
+export function isInVSlot(node?: Node & { parent?: Node }): boolean {
+  return (
+    (node?.type === 'JSXAttribute' &&
+      (node.name.type === 'JSXIdentifier'
+        ? node.name.name
+        : node.name.type === 'JSXNamespacedName'
+          ? node.name.namespace.name
+          : '') === 'v-slot') ||
+    !!(node?.parent && isInVSlot(node?.parent))
+  )
+}

src/raw.ts

@@ -17,6 +17,7 @@ import {
   getOxcParser,
   getReferences,
   getRequire,
+  isInVSlot,
   transformFunctionReturn,
 } from './core/utils'
 import type { IdentifierName, Node } from 'oxc-parser'
@@ -181,6 +182,7 @@ export async function transformReactivityFunction(
       }
       if (!refs.includes(identifier)) {
         const parent = identifier.parent
+        if (isInVSlot(parent)) continue
         if (parent?.type === 'Property' && parent.shorthand) {
           // { foo } => { foo: foo.value }
           s.appendLeft(identifier.start, `${id.name}: `)

src/volar.ts

@@ -11,6 +11,7 @@ import {
   getOxcParser,
   getReferences,
   getRequire,
+  isInVSlot,
   transformFunctionReturn,
 } from './core/utils'
 import type { IdentifierName, Node } from 'oxc-parser'
@@ -264,6 +265,8 @@ function transformReactivityFunction(options: {
         parent: Node
       }
       if (refs.includes(identifier)) {
+        const parent = identifier.parent
+        if (isInVSlot(parent)) continue
         replaceSourceRange(
           codes,
           source,
@@ -272,7 +275,6 @@ function transformReactivityFunction(options: {
           `(${id.name},${HELPER_PREFIX}refs_${id.name}.`,
         )
         replaceSourceRange(codes, source, identifier.end, identifier.end, ')')
-        const parent = identifier.parent
         if (parent?.type === 'Property' && parent.shorthand) {
           replaceSourceRange(
             codes,

tests/__snapshots__/basic.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`fixtures > tests/fixtures/basic.tsx 1`] = `
 "// basic.js
-import { ref, toRef, createPropsRestProxy, watch, createVNode } from 'vue';
+import { ref, toRef, createPropsRestProxy, watch, withDirectives, createVNode, resolveDirective } from 'vue';
 
 function useApi(defaultName = ref('')) {
   const id = ref(1);
@@ -51,12 +51,14 @@ console.log(title);
 const Comp = ({
   title
 }) => title.value;
-var basic = () => createVNode(Comp, {
+var basic = () => withDirectives(createVNode(Comp, {
   "title": title,
   "foo": title.value
 }, {
   default: () => [title.value]
-});
+}), [[resolveDirective("slot"), {
+  title
+}, "slot"]]);
 
 export { basic as default };
 "

tests/basic.test.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import { rollupBuild, RollupVueJsx, testFixtures } from '@vue-macros/test-utils'
 import { describe } from 'vitest'
-import VueReactivityFunction from '../dist/rollup'
+import VueReactivityFunction from '../src/rollup'
 
 describe('fixtures', async () => {
   await testFixtures(

tests/fixtures/basic.tsx

@@ -47,7 +47,7 @@ const title = $ref<string>('title')
 console.log($$(title))
 const Comp = ({ title }: { title: Ref<string>; foo: string }) => title.value
 export default () => (
-  <Comp title$={title} foo={title}>
+  <Comp title$={title} foo={title} v-slot:slot={{ title }}>
     {title}
   </Comp>
 )

vitest.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vitest/config'
+export default defineConfig({
+  define: {
+    __ESM__: 'true',
+  },
+})