feat(debug): Add proper render condition and console warnings

apertureless · Apr 5, 2018 · 3afe976 · 3afe976
1 parent 9395fab
commit 3afe976
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/hideAt.vue b/src/components/hideAt.vue
@@ -44,7 +44,7 @@
       }
 
       if (shouldRender) {
-        return this.$slots.default[0]
+        return this.$slots.default ? this.$slots.default[0] : null
       }
       return null
     }

diff --git a/src/components/showAt.vue b/src/components/showAt.vue
@@ -44,7 +44,7 @@
       }
 
       if (shouldRender) {
-        return this.$slots.default[0]
+        return this.$slots.default ? this.$slots.default[0] : null
       }
       return null
     }

diff --git a/src/components/withBreakpoint.vue b/src/components/withBreakpoint.vue
@@ -23,6 +23,11 @@
     mounted () {
       window.addEventListener('resize', this.handleResize)
       this.handleResize()
+      if (this.$slots.default && this.$slots.default.length > 1) {
+        console.warn('[✋ vue-breakpoints] You may only wrap one element in a <showAt> or <hideAt/> component.')
+      } else if (!this.$slots.default || this.$slots.default.length < 1) {
+        console.warn('[✋ vue-breakpoints] You must have one child inside a <showAt> or <hideAt/> component.')
+      }
     },
 
     beforeDestroy () {