feat: handle slots in render functions (#78)

* fix: describe typo

* feat: handle slots in render functions

Author: elevatebart

src/script-handlers/__tests__/eventHandler.ts

@@ -11,7 +11,7 @@ function parse(src: string): NodePath[] {
   return resolveExportedComponent(ast)
 }
 
-describe('displayNameHandler', () => {
+describe('eventHandler', () => {
   let documentation: Documentation
   let mockEventDescriptor: EventDescriptor
 

src/script-handlers/__tests__/slotHandler.ts

@@ -0,0 +1,54 @@
+import { NodePath } from 'ast-types'
+import babylon from '../../babel-parser'
+import { Documentation, SlotDescriptor } from '../../Documentation'
+import resolveExportedComponent from '../../utils/resolveExportedComponent'
+import slotHandler from '../slotHandler'
+
+jest.mock('../../Documentation')
+
+function parse(src: string): NodePath[] {
+  const ast = babylon().parse(src)
+  return resolveExportedComponent(ast)
+}
+
+describe('render function slotHandler', () => {
+  let documentation: Documentation
+  let mockSlotDescriptor: SlotDescriptor
+
+  beforeEach(() => {
+    mockSlotDescriptor = { description: '' }
+    documentation = new (require('../../Documentation')).Documentation()
+    const mockGetSlotDescriptor = documentation.getSlotDescriptor as jest.Mock
+    mockGetSlotDescriptor.mockReturnValue(mockSlotDescriptor)
+  })
+
+  it('should find slots in render function', () => {
+    const src = `
+    export default {
+      render: function (createElement) {
+        return createElement('div', this.$slots.mySlot)
+      }
+    }
+    `
+    const def = parse(src)
+    slotHandler(documentation, def[0])
+    expect(documentation.getSlotDescriptor).toHaveBeenCalledWith('mySlot')
+  })
+
+  it('should find scoped slots in render function', () => {
+    const src = `
+    export default {
+      render: function (createElement) {
+        return createElement('div', [
+          this.$scopedSlots.myScopedSlot({
+            text: this.message
+          })
+        ])
+      }
+    }
+    `
+    const def = parse(src)
+    slotHandler(documentation, def[0])
+    expect(documentation.getSlotDescriptor).toHaveBeenCalledWith('myScopedSlot')
+  })
+})

src/script-handlers/slotHandler.ts

@@ -0,0 +1,53 @@
+import * as bt from '@babel/types'
+import { NodePath } from 'ast-types'
+import { Documentation, ParamTag, ParamType } from '../Documentation'
+
+export interface TypedParamTag extends ParamTag {
+  type: ParamType
+}
+
+// tslint:disable-next-line:no-var-requires
+import recast = require('recast')
+
+export default function eventHandler(documentation: Documentation, path: NodePath) {
+  if (bt.isObjectExpression(path.node)) {
+    const renderPath = path
+      .get('properties')
+      .filter((p: NodePath) => bt.isObjectProperty(p.node) && p.node.key.name === 'render')
+
+    // if no prop return
+    if (!renderPath.length) {
+      return
+    }
+
+    const renderValuePath = renderPath[0].get('value')
+    recast.visit(renderValuePath, {
+      visitCallExpression(pathCall: NodePath<bt.CallExpression>) {
+        if (
+          bt.isMemberExpression(pathCall.node.callee) &&
+          bt.isMemberExpression(pathCall.node.callee.object) &&
+          bt.isThisExpression(pathCall.node.callee.object.object) &&
+          bt.isIdentifier(pathCall.node.callee.property) &&
+          pathCall.node.callee.object.property.name === '$scopedSlots'
+        ) {
+          documentation.getSlotDescriptor(pathCall.node.callee.property.name)
+          return false
+        }
+        this.traverse(pathCall)
+      },
+      visitMemberExpression(pathMember: NodePath<bt.MemberExpression>) {
+        if (
+          bt.isMemberExpression(pathMember.node.object) &&
+          bt.isThisExpression(pathMember.node.object.object) &&
+          bt.isIdentifier(pathMember.node.object.property) &&
+          pathMember.node.object.property.name === '$slots' &&
+          bt.isIdentifier(pathMember.node.property)
+        ) {
+          documentation.getSlotDescriptor(pathMember.node.property.name)
+          return false
+        }
+        this.traverse(pathMember)
+      },
+    })
+  }
+}