ci: build docs on test step (#1105)

docs(infinite-scroll): fix SSR
docs(pagination): bind a boolean not a string
ci: build docs on test workflow
ci: install docs deps in same step

.github/workflows/test.yml

@@ -29,10 +29,16 @@ jobs:
           node-version: 12
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: |
+          yarn install --frozen-lockfile
+          cd docs
+          yarn install --frozen-lockfile
 
-      - name: Build
+      - name: Build Dist
         run: yarn build
 
       - name: Bundlewatch
         run: npx bundlewatch
+
+      - name: Build Docs
+        run: yarn build:docs

docs/.vuepress/components/InfiniteScroll.vue

@@ -19,12 +19,18 @@ import countries from '../data/countries';
 
 export default {
   name: "InfiniteScroll",
-  data () {
-    return {
-      observer: new IntersectionObserver(this.infiniteScroll),
-      limit: 10,
-      search: ''
-    }
+  data: () => ({
+    observer: null,
+    limit: 10,
+    search: ''
+  }),
+  mounted () {
+    /**
+     * You could do this directly in data(), but since these docs
+     * are server side rendered, IntersectionObserver doesn't exist
+     * in that environment, so we need to do it in mounted() instead.
+     */
+    this.observer = new IntersectionObserver(this.infiniteScroll);
   },
   computed: {
     filtered () {

docs/.vuepress/components/Paginated.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-select :options="paginated" @search="query => search = query" filterable="false">
+  <v-select :options="paginated" @search="query => search = query" :filterable="false">
     <li slot="list-footer" class="pagination">
       <button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
       <button @click="offset += 10" :disabled="!hasNextPage">Next</button>