fix: transform useSlots usages into dummy <slot /> in templates (#64)

Author: farnabaz

playground/components/content/UseSlots.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    Dummy component to test useSlots
+  </div>
+</template>
+
+<script setup lang="ts">
+const slots = useSlots()
+
+const defaultSlot = computed(() => slots.default?.())
+
+</script>

playground/components/content/UseSlotsDestructuring.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    Dummy component to test useSlots
+  </div>
+</template>
+
+<script setup lang="ts">
+const { title, default: dd } = useSlots()
+</script>

src/module.ts

@@ -52,6 +52,27 @@ export default defineNuxtModule<ModuleOptions>({
             return `<slot ${slotName === 'default' ? '' : `name="${slotName}"`} />`
           }
         )
+        // Handle `(const|let|var) slots = useSlots()`
+        const name = code.match(/(const|let|var) ([a-zA-Z][a-zA-Z-_0-9]*) = useSlots\(\)/)?.[2] || '$slots'
+        const _slots = code.match(new RegExp(`${name}\\.[a-zA-Z]+`, 'gm'))
+        if (_slots) {
+          const slots = _slots
+            .map(s => s.replace(name + '.', ''))
+            .map(s => `<slot name="${s}" />`)
+          code = code.replace(/<template>/, `<template>\n${slots.join('\n')}\n`)
+        }
+
+        // Handle `(const|let|var) { title, default: defaultSlot } = useSlots()`
+        const slotNames = code.match(/(const|let|var) {([^}]+)}\s*=\s*useSlots\(\)/)?.[2]
+        // \s*(([a-zA-Z][a-zA-Z-_0-9]*(\s*:\s*[a-zA-Z][a-zA-Z-_0-9]*)?\s*,?\s*)+)\s*
+        if (slotNames) {
+          const slots = slotNames
+            .trim()
+            .split(',')
+            .map(s => s.trim().split(':')[0].trim())
+            .map(s => `<slot name="${s}" />`)
+          code = code.replace(/<template>/, `<template>\n${slots.join('\n')}\n`)
+        }
 
         return { component, code }
       }