Fix reactivity, externalize Vue

package.json

@@ -1,12 +1,13 @@
 {
   "name": "vue-component-media-queries",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "description": "Component-based media query matcher for Vue",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "types": "dist/src/index.d.ts",
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w"
   },
   "repository": {
     "type": "git",
@@ -32,8 +33,7 @@
     "rollup-plugin-terser": "^5.1.3",
     "rollup-plugin-typescript2": "^0.25.3",
     "tslib": "^1.10.0",
-    "typescript": "^3.7.4",
-    "vue": "^2.6.0"
+    "typescript": "^3.7.4"
   },
   "peerDependencies": {
     "vue": "^2.6.0"

src/MatchMedia.ts

@@ -10,6 +10,7 @@ type Data = {
 }
 
 export const MatchMedia = Vue.extend({
+  name: 'MatchMedia',
   inject: {
     mediaQueries: {
       default: null
@@ -66,7 +67,6 @@ export const MatchMedia = Vue.extend({
     },
   },
   render(h): any {
-    const nodes = this.$scopedSlots.default!(this.slotProps);
-    return renderWrappedNodes(h, nodes, this.wrapperTag);
+    return renderWrappedNodes(h, this.$scopedSlots.default!(this.slotProps)!, this.wrapperTag);
   },
 });

src/MediaQueryProvider.ts

@@ -3,12 +3,16 @@ import { renderWrappedNodes } from "./utils";
 
 type MediaQueriesConfig = Record<string, string>;
 type MediaEventListener = () => void;
-type Matchers = [MediaQueryList, MediaEventListener][] | null;
 type Fallback = string | string[];
+type Data = {
+  mediaQueries: MediaQueriesProvision,
+  matchers: [MediaQueryList, MediaEventListener][]
+}
 
 export type MediaQueriesProvision = Record<string, boolean>;
 
 export const MediaQueryProvider = Vue.extend({
+  name: 'MediaQueryProvider',
   props: {
     queries: {
       type: Object as PropType<MediaQueriesConfig>,
@@ -20,20 +24,22 @@ export const MediaQueryProvider = Vue.extend({
       default: 'span'
     },
   },
-  provide(this: { mediaQueries: MediaQueriesProvision }) {
+  provide(): { mediaQueries: MediaQueriesProvision } {
     return { mediaQueries: this.mediaQueries };
   },
-  data() {
+  data(): Data {
     const mediaQueries = {} as MediaQueriesProvision;
     const { fallback } = this;
+
     if (fallback) {
       if (Array.isArray(fallback)) {
-        Object.keys(fallback).forEach(key => mediaQueries[key] = true);
+        fallback.forEach(key => { mediaQueries[key] = true; });
       } else {
         mediaQueries[fallback] = true;
       }
     }
-    return { mediaQueries, matchers: [] as Matchers };
+
+    return { mediaQueries, matchers: [] };
   },
   beforeMount() {
     const { queries, mediaQueries } = this;
@@ -43,21 +49,21 @@ export const MediaQueryProvider = Vue.extend({
 
       const matcher = window.matchMedia(query);
       const handler = (event: MediaQueryListEvent) => {
-        mediaQueries[key] = event.matches;
+        Vue.set(mediaQueries, key, event.matches);
       };
       // using deprecated method because of Safari's poor support for addEventListener
       matcher.addListener(handler);
-      mediaQueries[key] = matcher.matches;
-      this.matchers!.push([matcher, handler as MediaEventListener]);
+      Vue.set(mediaQueries, key, matcher.matches);
+      this.matchers.push([matcher, handler as MediaEventListener]);
     }
   },
   beforeDestroy() {
-    this.matchers!.forEach(([matcher, listener]) => {
+    this.matchers.forEach(([matcher, listener]) => {
       matcher.removeListener(listener);
     });
-    this.matchers = null;
+    delete this.matchers;
   },
   render(h): any {
-    return renderWrappedNodes(h, this.$slots.default, this.wrapperTag);
+    return renderWrappedNodes(h, this.$slots.default!, this.wrapperTag);
   }
 });

src/utils.ts

@@ -1,7 +1,6 @@
 import { CreateElement, VNode } from 'Vue';
 
-export const renderWrappedNodes = (h: CreateElement, nodes: undefined | VNode | VNode[], wrapperTag: string) => {
-  if (!nodes) return null;
+export const renderWrappedNodes = (h: CreateElement, nodes: VNode | VNode[], wrapperTag: string) => {
   if (Array.isArray(nodes)) {
     if (nodes.length !== 1 || !nodes[0].tag) return h(wrapperTag, {}, nodes);
     else return nodes[0];