fix: add scoped flag to slot descriptor (#118)

closes #31

Author: elevatebart

src/Documentation.ts

@@ -67,6 +67,7 @@ export interface MethodDescriptor {
 export interface SlotDescriptor {
   description?: string
   bindings?: Record<string, any>
+  scoped?: boolean
 }
 
 export interface ComponentDoc {

src/template-handlers/__tests__/slotHandler.ts

@@ -68,4 +68,25 @@ describe('slotHandler', () => {
       fail()
     }
   })
+
+  it('should detect scoped slots', () => {
+    const ast = compile(
+      [
+        '<div title="a list of item with a scope" >',
+        '  <!-- @slot a slot named oeuf -->',
+        '  <slot name="oeuf" v-for="item in items" :item="item"/>',
+        '</div>',
+      ].join('\n'),
+      { comments: true },
+    ).ast
+    if (ast) {
+      traverse(ast, doc, [slotHandler], { functional: false, rootLeadingComment: '' })
+      expect(doc.toObject().slots.oeuf).toMatchObject({
+        scoped: true,
+        description: 'a slot named oeuf',
+      })
+    } else {
+      fail()
+    }
+  })
 })

src/template-handlers/slotHandler.ts

@@ -17,6 +17,10 @@ export default function slotHandler(
 
     const slotDescriptor = documentation.getSlotDescriptor(name)
 
+    if (bindings && Object.keys(bindings).length) {
+      slotDescriptor.scoped = true
+    }
+
     slotDescriptor.bindings = bindings
     let comment = ''
     if (templateAst.parent) {
@@ -34,7 +38,7 @@ export default function slotHandler(
       const slotSiblingsBeforeSlot = slotSiblings.slice(0, currentSlotIndex).reverse()
 
       for (const potentialComment of slotSiblingsBeforeSlot) {
-        // if there is text between the slot and the comment ignore
+        // if there is text between the slot and the comment, ignore
         if (
           potentialComment.type !== 3 ||
           (!potentialComment.isComment && potentialComment.text.trim())

tests/components/scoped-slot/Wrapper.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="modal-footer">
+    <!-- @slot Modal footer here -->
+    <slot name="footer" v-bind:item="item"/>
+  </div>
+</template>

tests/components/scoped-slot/__snapshots__/scoped-slot.test.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tests wrapper with root slot should match the reference for the footer slot 1`] = `
+Object {
+  "bindings": Object {
+    ":item": "item",
+  },
+  "description": "Modal footer here",
+  "scoped": true,
+}
+`;

tests/components/scoped-slot/scoped-slot.test.ts

@@ -0,0 +1,29 @@
+import * as path from 'path'
+import { ComponentDoc } from '../../../src/Documentation'
+import { parse } from '../../../src/main'
+
+const button = path.join(__dirname, './Wrapper.vue')
+let docButton: ComponentDoc
+
+describe('tests wrapper with root slot', () => {
+  beforeEach(done => {
+    docButton = parse(button)
+    done()
+  })
+
+  it('should have a slot.', () => {
+    expect(Object.keys(docButton.slots).length).toEqual(1)
+  })
+
+  it('should have a wrapper slot.', () => {
+    expect(docButton.slots.footer.description).toBe('Modal footer here')
+  })
+
+  it('should show the slot as scoped', () => {
+    expect(docButton.slots.footer.scoped).toBeTruthy()
+  })
+
+  it('should match the reference for the footer slot', () => {
+    expect(docButton.slots.footer).toMatchSnapshot()
+  })
+})