Revert Vue in DevDependencies, improve CSR\SSR support

Author: CyberAP

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-component-media-queries",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "Component-based media query matcher for Vue",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -33,7 +33,8 @@
     "rollup-plugin-terser": "^5.1.3",
     "rollup-plugin-typescript2": "^0.25.3",
     "tslib": "^1.10.0",
-    "typescript": "^3.7.4"
+    "typescript": "^3.7.4",
+    "vue": "^2.6.0"
   },
   "peerDependencies": {
     "vue": "^2.6.0"

src/MatchMedia.ts

@@ -1,12 +1,13 @@
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, VNode } from 'vue';
 import { MediaQueriesProvision } from './MediaQueryProvider'
 import { renderWrappedNodes } from "./utils";
 
 type SlotProps = { matches: boolean } | MediaQueriesProvision
 type Data = {
   matches: boolean,
   matcher: null | MediaQueryList,
-  mediaQueries?: null | MediaQueriesProvision
+  mediaQueries?: null | MediaQueriesProvision,
+  $nuxt?: any
 }
 
 export const MatchMedia = Vue.extend({
@@ -26,6 +27,9 @@ export const MatchMedia = Vue.extend({
     wrapperTag: {
       type: String as PropType<string>,
       default: 'span'
+    },
+    ssr: {
+      type: Boolean as PropType<boolean>,
     }
   },
   data(): Data {
@@ -34,11 +38,14 @@ export const MatchMedia = Vue.extend({
       matches: this.fallback,
     };
   },
+  beforeMount() {
+    if (!this.ssr && !this.$nuxt) {
+      this.bootstrap();
+    }
+  },
   mounted() {
-    if (this.query) {
-      const matcher = this.matcher = window.matchMedia(this.query);
-      matcher.addListener(this.onMedia);
-      this.matches = matcher.matches;
+    if (this.ssr || this.$nuxt) {
+      this.bootstrap();
     }
   },
   beforeDestroy() {
@@ -48,6 +55,13 @@ export const MatchMedia = Vue.extend({
     }
   },
   methods: {
+    bootstrap() {
+      if (this.query) {
+        const matcher = this.matcher = window.matchMedia(this.query);
+        matcher.addListener(this.onMedia);
+        this.matches = matcher.matches;
+      }
+    },
     onMedia(event: MediaQueryListEvent) {
       this.matches = event.matches;
     },
@@ -66,7 +80,7 @@ export const MatchMedia = Vue.extend({
       return this.mediaQueries as MediaQueriesProvision;
     },
   },
-  render(h): any {
+  render(h): VNode {
     return renderWrappedNodes(h, this.$scopedSlots.default!(this.slotProps)!, this.wrapperTag);
   },
 });

src/MediaQueryProvider.ts

@@ -1,12 +1,13 @@
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, VNode } from 'vue';
 import { renderWrappedNodes } from "./utils";
 
 type MediaQueriesConfig = Record<string, string>;
 type MediaEventListener = () => void;
 type Fallback = string | string[];
 type Data = {
   mediaQueries: MediaQueriesProvision,
-  matchers: [MediaQueryList, MediaEventListener][]
+  matchers: [MediaQueryList, MediaEventListener][],
+  $nuxt?: any
 }
 
 export type MediaQueriesProvision = Record<string, boolean>;
@@ -23,6 +24,9 @@ export const MediaQueryProvider = Vue.extend({
       type: String as PropType<string>,
       default: 'span'
     },
+    ssr: {
+      type: Boolean as PropType<boolean>,
+    },
   },
   provide(): { mediaQueries: MediaQueriesProvision } {
     return { mediaQueries: this.mediaQueries };
@@ -43,21 +47,14 @@ export const MediaQueryProvider = Vue.extend({
 
     return { mediaQueries, matchers: [] };
   },
-  // Matching on mounted to avoid hydration errors
+  beforeMount() {
+    if (!this.ssr && !this.$nuxt) {
+      this.bootstrap();
+    }
+  },
   mounted() {
-    const { queries, mediaQueries } = this;
-
-    for (const key in queries) {
-      const query = queries[key];
-
-      const matcher = window.matchMedia(query);
-      const handler = (event: MediaQueryListEvent) => {
-        Vue.set(mediaQueries, key, event.matches);
-      };
-      // using deprecated method because of Safari's poor support for addEventListener
-      matcher.addListener(handler);
-      Vue.set(mediaQueries, key, matcher.matches);
-      this.matchers.push([matcher, handler as MediaEventListener]);
+    if (this.ssr || this.$nuxt) {
+      this.bootstrap();
     }
   },
   beforeDestroy() {
@@ -66,7 +63,25 @@ export const MediaQueryProvider = Vue.extend({
     });
     delete this.matchers;
   },
-  render(h): any {
+  methods: {
+    bootstrap() {
+      const { queries, mediaQueries } = this;
+
+      for (const key in queries) {
+        const query = queries[key];
+
+        const matcher = window.matchMedia(query);
+        const handler = (event: MediaQueryListEvent) => {
+          Vue.set(mediaQueries, key, event.matches);
+        };
+        // using deprecated method because of Safari's poor support for addEventListener
+        matcher.addListener(handler);
+        Vue.set(mediaQueries, key, matcher.matches);
+        this.matchers.push([matcher, handler as MediaEventListener]);
+      }
+    },
+  },
+  render(h): VNode {
     return renderWrappedNodes(h, this.$slots.default!, this.wrapperTag);
   }
 });