Having a unique function called iwAddClassAndRemoveInSiblings within the lib\iw-browser.ts file:
"use strict";
/* This function adds a specified CSS class to a given element and removes this class from its siblings.
Equivalent to jQuery: $(element1).addClass(CSSClass).siblings().removeClass(CSSClass) */
function iwAddClassAndRemoveInSiblings(element: Element, CSSClass: string): void {
for (const sibling of element.parentNode.children)
sibling.classList.remove(CSSClass)
element.classList.add(CSSClass)
}
The utilization of this function is found in the lib\iw-carousel\iw-carousel.ts file:
document.addEventListener('click', (event) => {
const target = <HTMLElement>event.target
if (target.matches('.iw-carousel__indicators li'))
iwCarouselShowSlide(target.closest('.iw-carousel'), Number(target.dataset.slideTo))
})
/* Aiding in showing the i-th slide of an iw-carousel. */
const iwCarouselShowSlide = (carousel: HTMLElement, slideIndex: number) => {
const slides = carousel.querySelectorAll('.iw-carousel__item')
iwAddClassAndRemoveInSiblings(slides[slideIndex], 'active')
}
References to the compiled iw-browser.js and iw-carousel.js can be located in the iw-carousel.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="lib/iw-carousel/iw-carousel.js"></script>
<script src="lib/iw-browser.js"></script>
</head>
<body>
<!-- irrelevant html content -->
</body>
</html>
An issue arises with Typescript ESLint falsely flagging the iwAddClassAndRemoveInSiblings function as unused, despite functioning correctly within Visual Studio Code and when executed through the command line:
'iwAddClassAndRemoveInSiblings' is defined but never used. eslint(@typescript-eslint/no-unused-vars)
This matter seems specific to ESLint, as Visual Studio Code validates the function's usage appropriately.
A correct configuration may be necessary for ESLint or TypeScript. The installation procedures for TypeScript and ESLint are outlined at: How to use ESLint TypeScript Airbnb configuration?
Below are the TypeScript and ESLint configuration files:
.eslintrc.js:
module.exports = {
root: true,
parser: '@typescript-eslint/parser', // enables understanding of TypeScript syntax by ESLint
parserOptions: {
project: ['./tsconfig.json'], // essential for "type-aware linting"
},
plugins: [
'@typescript-eslint', // allows usage of rules within the codebase
],
extends: [
'airbnb-typescript/base', //utilize Airbnb config
],
rules: { }
};
tsconfig.json:
{
"compilerOptions": {
"target": "ES2016",
"module": "commonjs",
"sourceMap": true
}
}
package.json:
{
"name": "iw-components",
"version": "0.1.0",
"description": "...",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iwis/iw-components.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/iwis/iw-components/issues"
},
"homepage": "https://github.com/iwis/iw-components#readme",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-typescript": "^7.2.1",
"eslint-config-standard-with-typescript": "^16.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"typescript": "~3.7.5"
}
}