Migrate existing (finished) base components

src/compositions/event-listener.test.ts

@@ -0,0 +1,54 @@
+import VueCompositionAPI, { ref } from '@vue/composition-api';
+import useEventListener from './event-listener';
+import mountComposition from '../../.jest/mount-composition';
+
+describe('Compositions / Event Listener', () => {
+	it('Adds passed event listener onMounted', () => {
+		const map: any = {};
+
+		window.addEventListener = jest.fn((event, cb) => {
+			map[event] = cb;
+		});
+
+		window.removeEventListener = jest.fn((event, cb) => {
+			delete map[event];
+		});
+
+		const handler = () => {};
+
+		const component = mountComposition(() => {
+			useEventListener(window, 'keydown', handler);
+		});
+
+		expect(map.keydown).toBe(handler);
+
+		component.destroy();
+
+		expect(map.keydown).toBe(undefined);
+	});
+
+	it('Uses the value if the target is a ref', () => {
+		const target = ref(window);
+		const map: any = {};
+
+		window.addEventListener = jest.fn((event, cb) => {
+			map[event] = cb;
+		});
+
+		window.removeEventListener = jest.fn((event, cb) => {
+			delete map[event];
+		});
+
+		const handler = () => {};
+
+		const component = mountComposition(() => {
+			useEventListener(target, 'keydown', handler);
+		});
+
+		expect(map.keydown).toBe(handler);
+
+		component.destroy();
+
+		expect(map.keydown).toBe(undefined);
+	});
+});

src/compositions/event-listener.ts

@@ -0,0 +1,18 @@
+import { onMounted, onBeforeUnmount, Ref, isRef } from '@vue/composition-api';
+
+export default function useEventListener<T extends EventTarget, E extends Event>(
+	target: T | Ref<T>,
+	type: string,
+	handler: (this: T, evt: E) => void,
+	options?: AddEventListenerOptions
+) {
+	onMounted(() => {
+		const t = isRef(target) ? target.value : target;
+		t.addEventListener(type, handler as (evt: Event) => void, options);
+	});
+
+	onBeforeUnmount(() => {
+		const t = isRef(target) ? target.value : target;
+		t.removeEventListener(type, handler as (evt: Event) => void, options);
+	});
+}

src/compositions/window-size.test.ts

@@ -0,0 +1,47 @@
+import VueCompositionAPI, { watch } from '@vue/composition-api';
+import useWindowSize from './window-size';
+import mountComposition from '../../.jest/mount-composition';
+
+describe('Compositions / Window Size', () => {
+	it('Adds passed event listener onMounted', async () => {
+		let testWidth: number = 0;
+
+		const component = mountComposition(() => {
+			const { width } = useWindowSize();
+
+			watch(width, (val: number) => (testWidth = val));
+		});
+
+		expect(testWidth).toBe(0);
+
+		// @ts-ignore
+		window.innerWidth = 1024;
+		window.dispatchEvent(new Event('resize'));
+
+		await component.vm.$nextTick();
+
+		expect(testWidth).toBe(1024);
+	});
+
+	it('Adds / removes resize event handler on mount / unmount', async () => {
+		const map: any = {};
+
+		window.addEventListener = jest.fn((event, cb) => {
+			map[event] = cb;
+		});
+
+		window.removeEventListener = jest.fn((event, cb) => {
+			delete map[event];
+		});
+
+		const component = mountComposition(() => {
+			const { width } = useWindowSize();
+		});
+
+		expect(map.resize).toBeTruthy();
+
+		component.destroy();
+
+		expect(map.keydown).toBe(undefined);
+	});
+});

src/compositions/window-size.ts

@@ -0,0 +1,30 @@
+import { onMounted, onUnmounted, ref, onBeforeMount, onBeforeUnmount } from '@vue/composition-api';
+import { throttle } from 'lodash';
+
+type WindowSizeOptions = {
+	throttle: number;
+};
+
+export default function useWindowSize(options: WindowSizeOptions = { throttle: 100 }) {
+	const width = ref(0);
+	const height = ref(0);
+
+	function setSize() {
+		width.value = window.innerWidth;
+		height.value = window.innerHeight;
+	}
+
+	const onResize = throttle(setSize, options.throttle);
+
+	onBeforeMount(setSize);
+
+	onMounted(() => {
+		window.addEventListener('resize', onResize, { passive: true });
+	});
+
+	onUnmounted(() => {
+		window.removeEventListener('resize', onResize);
+	});
+
+	return { width, height };
+}