fix: for vue2.7 (#431)

* fix: for vue 2.7

* fix: format

index.d.ts

@@ -1,4 +1,4 @@
-import * as vue from 'vue-demi';
+import * as vue from 'vue';
 
 declare const useWindowSize: () => {
   width: vue.ComputedRef<number>;

option-api.d.ts

@@ -26,7 +26,7 @@ declare function install(
 declare const VueWindowSizePlugin: {
   install: typeof install;
 };
-declare module '@vue/runtime-core' {
+declare module 'vue/types/vue' {
   interface ComponentCustomProperties {
     $windowWidth: number;
     $windowHeight: number;

package.json

@@ -22,12 +22,11 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "vue-demi": "^0.9.0",
     "window-resize-subject": "^1.5.0"
   },
   "devDependencies": {
     "@types/jest": "^26.0.7",
-    "@vue/test-utils": "^2.0.0-beta.5",
+    "@vue/test-utils": "^1.3.0",
     "husky": "^6.0.0",
     "jest": "^26.2.1",
     "lint-staged": "^11.0.0",
@@ -41,7 +40,7 @@
     "rollup-plugin-typescript2": "^0.30.0",
     "ts-jest": "^26.1.4",
     "typescript": "^4.0.2",
-    "vue": "^3.0.0",
+    "vue": "^2.7.10",
     "vue-jest": "^3.0.6",
     "vue-template-compiler": "^2.6.11"
   },

src/composition-api.ts

@@ -1,4 +1,4 @@
-import { reactive, computed, onUnmounted } from 'vue-demi';
+import { reactive, computed, onUnmounted } from 'vue';
 import { createInitailSize } from './shared';
 import type {
   WindowResizeSubject,

src/mixin.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue-demi';
+import { reactive } from 'vue';
 import { createInitailSize } from './shared';
 import type {
   WindowResizeObserver,

src/option-api.ts

@@ -29,7 +29,7 @@ export const VueWindowSizePlugin = { install };
 
 /** types */
 // vue 3
-declare module '@vue/runtime-core' {
+declare module 'vue/types/vue' {
   export interface ComponentCustomProperties {
     $windowWidth: number;
     $windowHeight: number;

tests/fixtures/CompositionComponent.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 import { useWindowSize } from '~/index';
 
 export default defineComponent({

tests/fixtures/OptionComponent.ts

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue-demi';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   template: `

tests/integration/client.spec.ts

@@ -1,12 +1,12 @@
-import { shallowMount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 
-import { VueWindowSizePlugin, vueWindowSizeMixin } from '~/option-api';
+import { vueWindowSizeMixin, VueWindowSizePlugin } from '~/option-api';
 import OptionComponent from '~fixtures/OptionComponent';
 import CompositionComponent from '~fixtures/CompositionComponent';
 import { resizeWindow } from '~fixtures/shared';
 
-declare module '@vue/runtime-core' {
+declare module 'vue/types/vue' {
   export interface ComponentCustomProperties {
     windowWidth: number;
     windowHeight: number;
@@ -20,6 +20,9 @@ const WINDOW_SIZE = {
   HEIGHT: 800,
 };
 
+const localVue = createLocalVue();
+localVue.use(VueWindowSizePlugin);
+
 beforeEach(() => {
   resizeWindow(WINDOW_SIZE.WIDTH, WINDOW_SIZE.HEIGHT);
   jest.runAllTimers();
@@ -28,21 +31,17 @@ beforeEach(() => {
 describe('Plugin', () => {
   describe('mounted', () => {
     it('has property', () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          plugins: [VueWindowSizePlugin],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       expect(wrapper.vm.$windowWidth).toBe(WINDOW_SIZE.WIDTH);
       expect(wrapper.vm.$windowHeight).toBe(WINDOW_SIZE.HEIGHT);
     });
 
     it('shown values', () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          plugins: [VueWindowSizePlugin],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       expect(wrapper.get('#width').text()).toBe(String(WINDOW_SIZE.WIDTH));
@@ -52,10 +51,8 @@ describe('Plugin', () => {
 
   describe('resize event', () => {
     it('reactivity', async () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          plugins: [VueWindowSizePlugin],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       resizeWindow(400, 300);
@@ -70,21 +67,17 @@ describe('Plugin', () => {
 describe('Mixin', () => {
   describe('mounted', () => {
     it('has property', () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          mixins: [vueWindowSizeMixin()],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       expect(wrapper.vm.$windowWidth).toBe(WINDOW_SIZE.WIDTH);
       expect(wrapper.vm.$windowHeight).toBe(WINDOW_SIZE.HEIGHT);
     });
 
     it('shown values', () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          mixins: [vueWindowSizeMixin()],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       expect(wrapper.get('#width').text()).toBe(String(WINDOW_SIZE.WIDTH));
@@ -94,10 +87,8 @@ describe('Mixin', () => {
 
   describe('resize event', () => {
     it('reactivity', async () => {
-      const wrapper = shallowMount(OptionComponent, {
-        global: {
-          plugins: [VueWindowSizePlugin],
-        },
+      const wrapper = shallowMount(OptionComponent as any, {
+        localVue,
       });
 
       resizeWindow(400, 300);

tests/unit/composition-api.spec.ts

@@ -23,11 +23,11 @@ const createTestComponent = (
   });
 
 const createSubject = (): WindowResizeSubject =>
-  (({
+  ({
     addObserver: mocks.addObserver,
     subscribe: mocks.subscribe,
     unsubscribe: mocks.unsubscribe,
-  } as unknown) as WindowResizeSubject);
+  } as unknown as WindowResizeSubject);
 
 describe('composition api', () => {
   beforeEach(() => {
@@ -73,14 +73,14 @@ describe('composition api', () => {
 
     it('unsubscribe is called when unmounting the component', () => {
       const wrapper = shallowMount(TestComponent);
-      wrapper.unmount();
+      wrapper.destroy();
       expect(mocks.unsubscribe).toBeCalledTimes(1);
     });
 
     it('unsubscribe is not called when at least one component is mounted', () => {
       const wrapper = shallowMount(TestComponent);
       shallowMount(TestComponent);
-      wrapper.unmount();
+      wrapper.destroy();
       expect(mocks.unsubscribe).not.toBeCalled();
     });
   });

tests/unit/mixin.spec.ts

@@ -9,10 +9,10 @@ const mocks = {
 mocks.addObserver.mockReturnValue(mocks);
 
 const createSubject = (): WindowResizeSubject =>
-  (({
+  ({
     addObserver: mocks.addObserver,
     subscribe: mocks.subscribe,
-  } as unknown) as WindowResizeSubject);
+  } as unknown as WindowResizeSubject);
 
 describe('mixin', () => {
   beforeEach(() => {

tests/unit/public-api.spec.ts

@@ -8,11 +8,11 @@ const mocks = {
 };
 
 const createSubject = (): WindowResizeSubject =>
-  (({
+  ({
     setDelay: mocks.setDelay,
     subscribe: mocks.subscribe,
     unsubscribe: mocks.unsubscribe,
-  } as unknown) as WindowResizeSubject);
+  } as unknown as WindowResizeSubject);
 
 describe('public API', () => {
   let api: ReturnType<typeof createPublicAPI>;