feat: allow the rejected slot to be non-scoped (#17)

* support reject slot from $slots I'd like to introduce a rejected slot but without scoped data * unified process of VNode generation * fixed eslint type * updated vNodeData name
posva · Apr 27, 2019 · 0f439f7 · 0f439f7
1 parent 4a50b35
commit 0f439f7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git a/src/index.js b/src/index.js
@@ -41,51 +41,16 @@ export const Promised = {
     }
 
     if (this.error) {
-      assert(
-        this.$scopedSlots.rejected,
-        'No slot "rejected" provided. Cannot display the error'
-      )
-      const node = this.$scopedSlots.rejected(this.error)
-      assert(
-        (Array.isArray(node) && node.length) || node,
-        'Provided slot "rejected" is empty. Cannot display the error'
-      )
-      return Array.isArray(node) ? convertVNodeArray(h, this.tag, node) : node
+      return getSlotVNode(this, h, 'rejected', this.error)
     }
 
     if (this.resolved) {
-      if (this.$scopedSlots.default) {
-        const node = this.$scopedSlots.default(this.data)
-        assert(
-          (Array.isArray(node) && node.length) || node,
-          'Provided default scoped-slot is empty. Cannot display the data'
-        )
-        return Array.isArray(node) ? convertVNodeArray(h, this.tag, node) : node
-      }
-      // NOTE: for Vue < 2.6.0
-      const defaultSlot = this.$slots.default
-      assert(defaultSlot, 'No default slot provided. Cannot display the data')
-      /* istanbul ignore next */
-      assert(
-        defaultSlot.length,
-        'Provided default slot is empty. Cannot display the data'
-      )
-      /* istanbul ignore next */
-      return convertVNodeArray(h, this.tag, defaultSlot)
+      return getSlotVNode(this, h, 'default', this.data)
     }
 
     if (!this.isDelayElapsed) return h()
 
-    const pendingSlot = this.$slots.pending
-    assert(
-      pendingSlot,
-      'No "pending" slot provided. Cannot display pending state'
-    )
-    assert(
-      pendingSlot.length,
-      'Provided "pending" slot is empty. Cannot display pending state'
-    )
-    return convertVNodeArray(h, this.tag, pendingSlot)
+    return getSlotVNode(this, h, 'pending', this.data)
   },
 
   watch: {
@@ -142,3 +107,19 @@ function convertVNodeArray (h, wrapperTag, nodes) {
   if (nodes.length > 1 || !nodes[0].tag) return h(wrapperTag, {}, nodes)
   return nodes[0]
 }
+
+function getSlotVNode (instance, h, slotName, vNodeData) {
+  if (instance.$scopedSlots && instance.$scopedSlots[slotName]) {
+    const node = instance.$scopedSlots[slotName](vNodeData)
+    assert(
+      (Array.isArray(node) && node.length) || node,
+      `Provided "${slotName}" scoped-slot is empty. Cannot display the data`
+    )
+    return Array.isArray(node) ? convertVNodeArray(h, instance.tag, node) : node
+  }
+
+  const slot = instance.$slots && instance.$slots[slotName]
+  assert(slot, `No slot "${slotName}" provided. Cannot display the data`)
+  assert(slot.length, `Provided "${slotName}" slot is empty. Cannot display the data`)
+  return convertVNodeArray(h, instance.tag, slot)
+}
diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -63,6 +63,20 @@ describe('Promised', () => {
       expect(wrapper.text()).toBe('finished')
     })
 
+    it('works with a non error scoped-slot', async () => {
+      [promise, resolve, reject] = fakePromise()
+      wrapper = mount(Promised, {
+        propsData: { promise, pendingDelay: 0 },
+        slots: {
+          ...slots,
+          rejected: `<p>oh no</p>`,
+        },
+      })
+      reject('whatever')
+      await tick()
+      expect(wrapper.text()).toBe('oh no')
+    })
+
     it('displays an error if rejected', async () => {
       reject(new Error('hello'))
       await tick()
@@ -207,7 +221,7 @@ describe('Promised', () => {
         resolve()
         await tick()
         expect(errorSpy.mock.calls[0][0].toString()).toMatch(
-          /No default slot provided/
+          /No slot "default" provided/
         )
       })
 
@@ -216,7 +230,7 @@ describe('Promised', () => {
           wrapper = mount(Promised, {
             propsData: { promise, pendingDelay: 0 },
           })
-        }).toThrowError(/No "pending" slot provided/)
+        }).toThrowError(/No slot "pending" provided/)
       })
     })
   })