feat: q-no-ssr component

Author: rstoenescu

dev/components/components/no-ssr.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="no-ssr-page layout-padding">
+    <div class="q-title">1. Basic</div>
+    <q-no-ssr>
+      <div>This won't be rendered on server</div>
+    </q-no-ssr>
+
+    <div class="q-title">2. Multiple client nodes</div>
+    <q-no-ssr>
+      <div>This won't be rendered on server.</div>
+      <div>This won't either.</div>
+    </q-no-ssr>
+
+    <div class="q-title">3. Multiple client nodes with tag prop</div>
+    <q-no-ssr tag="blockquote">
+      <div>This won't be rendered on server.</div>
+      <div>This won't either.</div>
+    </q-no-ssr>
+
+    <div class="q-title">4. Placeholder prop</div>
+    <q-no-ssr placeholder="Rendered on server">
+      <div>This won't be rendered on server</div>
+    </q-no-ssr>
+
+    <div class="q-title">5. Placeholder slot</div>
+    <q-no-ssr>
+      <div>This won't be rendered on server</div>
+      <div slot="placeholder">Rendered on server</div>
+    </q-no-ssr>
+
+    <div class="q-title">6. Multiple placeholder slot</div>
+    <q-no-ssr>
+      <div>This won't be rendered on server</div>
+      <div slot="placeholder">Rendered on server (1/2)</div>
+      <div slot="placeholder">Rendered on server (2/2)</div>
+    </q-no-ssr>
+
+    <div class="q-title">7. Only placeholder slot</div>
+    <q-no-ssr>
+      <div slot="placeholder">Rendered on server</div>
+    </q-no-ssr>
+  </div>
+</template>
+
+<style lang="stylus">
+.no-ssr-page
+  .q-title
+    margin-top 42px
+</style>

src/components.js

@@ -28,6 +28,7 @@ export * from './components/knob'
 export * from './components/layout'
 export * from './components/list'
 export * from './components/modal'
+export * from './components/no-ssr'
 export * from './components/observables'
 export * from './components/option-group'
 export * from './components/pagination'

src/components/no-ssr/QNoSsr.js

@@ -0,0 +1,34 @@
+import CanRenderMixin from '../../mixins/can-render'
+
+export default {
+  name: 'QNoSsr',
+  mixins: [ CanRenderMixin ],
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    placeholder: String
+  },
+  render (h) {
+    if (this.canRender) {
+      const slot = this.$slots.default
+      return slot && slot.length > 1
+        ? h(this.tag, slot)
+        : (slot ? slot[0] : null)
+    }
+
+    if (this.$slots.placeholder) {
+      const slot = this.$slots.placeholder
+      return slot && slot.length > 1
+        ? h(this.tag, { staticClass: 'q-no-ssr-placeholder' }, slot)
+        : (slot ? slot[0] : null)
+    }
+
+    if (this.placeholder) {
+      return h(this.tag, { staticClass: 'q-no-ssr-placeholder' }, [
+        this.placeholder
+      ])
+    }
+  }
+}

src/components/no-ssr/index.js

@@ -0,0 +1,5 @@
+import QNoSsr from './QNoSsr'
+
+export {
+  QNoSsr
+}