add bare min eslint style guide

Author: smastrom

.eslintrc.json

@@ -0,0 +1,24 @@
+{
+	"env": {
+		"browser": true,
+		"es2021": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:vue/vue3-essential",
+		"plugin:@typescript-eslint/recommended"
+	],
+	"overrides": [],
+	"parser": "@typescript-eslint/parser",
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"sourceType": "module"
+	},
+	"plugins": ["vue", "@typescript-eslint"],
+	"rules": {
+		"curly": ["error", "all"],
+		"no-useless-return": "error",
+		"no-else-return": "error",
+		"nonblock-statement-body-position": ["error", "below"]
+	}
+}

package.json

@@ -17,9 +17,13 @@
 	"devDependencies": {
 		"@rollup/plugin-terser": "^0.3.0",
 		"@types/node": "^18.11.18",
+		"@typescript-eslint/eslint-plugin": "^5.48.2",
+		"@typescript-eslint/parser": "^5.48.2",
 		"@vitejs/plugin-vue": "^4.0.0",
 		"animated-scroll-to": "^2.3.0",
 		"cypress": "^12.3.0",
+		"eslint": "^8.32.0",
+		"eslint-plugin-vue": "^9.9.0",
 		"prettier": "^2.8.2",
 		"rimraf": "^4.1.0",
 		"typescript": "^4.9.4",

src/useActive.ts

@@ -11,7 +11,7 @@ import {
 	type Ref,
 } from 'vue';
 import { useScroll } from './useScroll';
-import { getEdges, useMediaRef, isSSR, FIXED_OFFSET } from './utils';
+import { getEdges, useMediaRef, isSSR, FIXED_OFFSET, type DeepNonNullable } from './utils';
 
 type UseActiveTitleOptions = {
 	jumpToFirst?: boolean;
@@ -33,9 +33,6 @@ type UseActiveTitleReturn = {
 	activeIndex: Ref<number>;
 };
 
-// https://github.com/microsoft/TypeScript/issues/28374#issuecomment-538052842
-type DeepNonNullable<T> = { [P in keyof T]-?: NonNullable<T[P]> } & NonNullable<T>;
-
 const defaultOpts: DeepNonNullable<UseActiveTitleOptions> = {
 	jumpToFirst: true,
 	jumpToLast: true,
@@ -46,6 +43,7 @@ const defaultOpts: DeepNonNullable<UseActiveTitleOptions> = {
 		toTop: 0,
 		toBottom: 0,
 	},
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-ignore
 	rootId: null,
 };
@@ -76,20 +74,23 @@ export function useActive(
 		bottom: new Map<string, number>(),
 	});
 
-	const isHTML = computed(() => typeof rootId !== 'string');
+	const isWindow = computed(() => root.value === document.documentElement);
 	const ids = computed(() => targets.elements.map(({ id }) => id));
 
 	// Returned values
 	const activeId = useMediaRef(matchMedia, '');
 	const activeIndex = computed(() => ids.value.indexOf(activeId.value));
 
 	function getTop() {
-		return root.value!.getBoundingClientRect().top - (isHTML.value ? 0 : root.value!.scrollTop);
+		if (root.value) {
+			return root.value.getBoundingClientRect().top - (isWindow.value ? 0 : root.value.scrollTop);
+		}
+		return 0;
 	}
 
 	// Runs onMount, onResize and whenever the user array changes
 	function setTargets() {
-		let _targets = <HTMLElement[]>[];
+		const _targets = <HTMLElement[]>[];
 
 		unref(userIds).forEach((id) => {
 			const target = document.getElementById(id);
@@ -110,7 +111,7 @@ export function useActive(
 	}
 
 	function jumpToEdges() {
-		const { isBottom, isTop } = getEdges(root.value!);
+		const { isBottom, isTop } = getEdges(root.value as HTMLElement);
 
 		if (jumpToFirst && isTop) {
 			return (activeId.value = ids.value[0]), true;
@@ -121,7 +122,7 @@ export function useActive(
 	}
 
 	function _setActive(prevY: number, { isCancel } = { isCancel: false }) {
-		const nextY = isHTML.value ? window.scrollY : root.value!.scrollTop;
+		const nextY = isWindow.value ? window.scrollY : (root.value as HTMLElement).scrollTop;
 
 		if (nextY === prevY) {
 			return;
@@ -139,15 +140,15 @@ export function useActive(
 	}
 
 	function getSentinel() {
-		return isHTML.value ? getTop() : -root.value!.scrollTop;
+		return isWindow.value ? getTop() : -(root.value as HTMLElement).scrollTop;
 	}
 
 	// Sets first target that LEFT the top
 	function onScrollDown({ isCancel } = { isCancel: false }) {
 		let firstOut = jumpToFirst ? ids.value[0] : '';
 
 		const sentinel = getSentinel();
-		const offset = FIXED_OFFSET + overlayHeight + toBottom!;
+		const offset = FIXED_OFFSET + overlayHeight + toBottom;
 
 		Array.from(targets.top).some(([id, top]) => {
 			if (sentinel + top < offset) {
@@ -172,7 +173,7 @@ export function useActive(
 		let firstIn = '';
 
 		const sentinel = getSentinel();
-		const offset = FIXED_OFFSET + overlayHeight + toTop!;
+		const offset = FIXED_OFFSET + overlayHeight + toTop;
 
 		Array.from(targets.bottom).some(([id, bottom]) => {
 			if (sentinel + bottom > offset) {
@@ -197,9 +198,9 @@ export function useActive(
 	}
 
 	onMounted(async () => {
-		root.value = isHTML.value
-			? document.documentElement
-			: document.getElementById(rootId as string);
+		root.value = rootId
+			? document.getElementById(rootId) ?? document.documentElement
+			: document.documentElement;
 
 		// https://github.com/nuxt/content/issues/1799
 		await new Promise((resolve) => setTimeout(resolve));
@@ -225,7 +226,7 @@ export function useActive(
 	});
 
 	const isClick = useScroll({
-		isHTML,
+		isWindow,
 		root,
 		matchMedia,
 		_setActive,

src/useScroll.ts

@@ -1,46 +1,44 @@
-import { watch, onMounted, ref, Ref, ComputedRef, computed } from 'vue';
+import { watch, onMounted, ref, computed, type Ref, type ComputedRef } from 'vue';
 import { isSSR, useMediaRef } from './utils';
 
 type UseListenersOptions = {
-	isHTML: ComputedRef<boolean>;
+	isWindow: ComputedRef<boolean>;
 	root: Ref<HTMLElement | null>;
 	matchMedia: Ref<boolean>;
 	_setActive: (prevY: number, isCancel?: { isCancel: boolean }) => void;
 };
 
 const ONCE = { once: true };
 
-export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListenersOptions) {
+export function useScroll({ isWindow, root, _setActive, matchMedia }: UseListenersOptions) {
 	const isClick = useMediaRef(matchMedia, false);
 	const isReady = ref(false);
 	const clickY = computed(() => (isClick.value ? getNextY() : 0));
 
 	let prevY: number;
 
 	function getNextY() {
-		return isHTML.value ? window.scrollY : root.value!.scrollTop;
+		return isWindow.value ? window.scrollY : root.value?.scrollTop || 0;
 	}
 
 	function setReady(maxFrames: number) {
+		let rafId: DOMHighResTimeStamp | undefined = undefined;
 		let rafPrevY: number;
-		let rafId: DOMHighResTimeStamp;
 		let frameCount = 0;
 
 		function scrollEnd() {
 			const rafNextY = getNextY();
 			if (typeof rafPrevY === 'undefined' || rafPrevY !== rafNextY) {
 				frameCount = 0;
 				rafPrevY = rafNextY;
-				// console.log('Scrolling...');
 				return requestAnimationFrame(scrollEnd);
 			}
 			// When equal, wait for n frames after scroll to make sure is idle
 			frameCount++;
 			if (frameCount === maxFrames) {
 				isReady.value = true;
 				isClick.value = false;
-				console.log('Scroll end.');
-				cancelAnimationFrame(rafId);
+				cancelAnimationFrame(rafId as DOMHighResTimeStamp);
 			} else {
 				requestAnimationFrame(scrollEnd);
 			}
@@ -78,7 +76,7 @@ export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListeners
 		if (!isLink && !hasLink) {
 			reScroll();
 			// ...and force set if canceling scroll
-			_setActive(clickY.value!, { isCancel: true });
+			_setActive(clickY.value, { isCancel: true });
 		}
 	}
 
@@ -93,24 +91,22 @@ export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListeners
 
 	watch(
 		[isReady, matchMedia, root],
-		([_isReady, _matchMedia, _root], [], onCleanup) => {
+		([_isReady, _matchMedia, _root], _, onCleanup) => {
 			if (isSSR) {
 				return;
 			}
 
-			const rootEl = isHTML.value ? document : _root;
+			const rootEl = isWindow.value ? document : _root;
 			const isActive = rootEl && _isReady && _matchMedia;
 
 			if (isActive) {
-				console.log('Adding main listener...');
 				rootEl.addEventListener('scroll', onScroll, {
 					passive: true,
 				});
 			}
 
 			onCleanup(() => {
 				if (isActive) {
-					console.log('Removing main listener...');
 					rootEl.removeEventListener('scroll', onScroll);
 				}
 			});
@@ -125,10 +121,9 @@ export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListeners
 	watch(
 		isClick,
 		(_isClick, _, onCleanup) => {
-			const rootEl = isHTML.value ? document : root.value!;
+			const rootEl = isWindow.value ? document : root.value;
 
-			if (_isClick) {
-				console.log('Adding additional listeners...');
+			if (_isClick && rootEl) {
 				rootEl.addEventListener('scroll', resetReady, ONCE);
 				rootEl.addEventListener('wheel', reScroll, ONCE);
 				rootEl.addEventListener('keydown', onSpaceBar as EventListener, ONCE);
@@ -137,8 +132,7 @@ export function useScroll({ isHTML, root, _setActive, matchMedia }: UseListeners
 			}
 
 			onCleanup(() => {
-				if (_isClick) {
-					console.log('Removing additional listeners...');
+				if (_isClick && rootEl) {
 					rootEl.removeEventListener('scroll', resetReady);
 					rootEl.removeEventListener('wheel', reScroll);
 					rootEl.removeEventListener('keydown', onSpaceBar as EventListener);

src/utils.ts

@@ -38,3 +38,18 @@ export function getEdges(root: HTMLElement) {
 		isBottom: isBottomReached || isOverscrollBottom,
 	};
 }
+
+// https://github.com/esamattis/utils/blob/master/src/DeepRequired.ts
+type NotNull<T> = T extends null | undefined ? never : T;
+type Primitive = undefined | null | boolean | string | number;
+
+export type DeepNonNullable<T> = T extends Primitive
+	? NotNull<T>
+	: {
+			[P in keyof T]-?: T[P] extends Array<infer U>
+				? Array<DeepNonNullable<U>>
+				: T[P] extends ReadonlyArray<infer U2>
+				? DeepNonNullable<U2>
+				: DeepNonNullable<T[P]>;
+			// eslint-disable-next-line no-mixed-spaces-and-tabs
+	  };

tests/App.cy.ts

@@ -1,4 +1,3 @@
-// @ts-ignore
 import App from './App.vue';
 import { getIntRange, getRandomSequence } from '../cypress/support/component';