chore: add eslint and fixes it wanted (its a start)

.eslintrc.js

@@ -0,0 +1,24 @@
+const path = require('path');
+module.exports = {
+    parser: '@typescript-eslint/parser',
+    extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+    parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: 'module',
+        project: './tsconfig.eslint.json',
+        tsconfigRootDir: './',
+        warnOnUnsupportedTypeScriptVersion: false
+    },
+    rules: {
+        '@typescript-eslint/interface-name-prefix': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/no-inferrable-types': 'off',
+        'prettier/prettier': [
+            'error',
+            {
+                endOfLine: 'auto'
+            }
+        ]
+    }
+};

package.json

@@ -1,54 +1,62 @@
 {
-  "name": "custom-elements-hmr-polyfill",
-  "version": "1.0.0",
-  "description": "Custom Elements HMR polyfill",
-  "main": "dist/CommonJS/index.js",
-  "module": "dist/ES6/index.js",
-  "typings": "dist/CommonJS/index.d.ts",
-  "scripts": {
-    "prebootstrap": "npx st-rm-rf ./node_modules package-lock.json",
-    "bootstrap": "npm i",
-    "start": "node fuse",
-    "watch": "node fuse",
-    "build": "node fuse build && npm run rollup",
-    "rollup": "./node_modules/.bin/rollup -c",
-    "prettier:run": "node ./node_modules/prettier/bin-prettier --write \"src/**/*.{json,md,ts}\" ",
-    "test": "todo"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/vegarringdal/custom-elements-hmr-polyfill.git"
-  },
-  "author": "Vegar Ringdal<[email protected]> & Aron Homberg<[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/vegarringdal/custom-elements-hmr-polyfill/issues"
-  },
-  "homepage": "https://github.com/vegarringdal/custom-elements-hmr-polyfill#readme",
-  "devDependencies": {
-    "fuse-box": "4.0.0-next.425",
-    "fuse-box-typechecker": "^3.0.0-next.31",
-    "husky": "^4.2.5",
-    "lint-staged": "^10.1.3",
-    "prettier": "^2.0.4",
-    "rollup": "^2.6.1",
-    "rollup-plugin-terser": "^5.3.0",
-    "tslib": "^1.11.1",
-    "typescript": "^3.8.3",
-    "@commitlint/cli": "^8.3.5",
-    "@commitlint/config-conventional": "^8.3.4"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{json,md,ts}": [
-      "prettier --write",
-      "git add"
-    ]
-  },
-  "dependencies": {}
+    "name": "custom-elements-hmr-polyfill",
+    "version": "1.0.0",
+    "description": "Custom Elements HMR polyfill",
+    "main": "dist/CommonJS/index.js",
+    "module": "dist/ES6/index.js",
+    "typings": "dist/CommonJS/index.d.ts",
+    "scripts": {
+        "prebootstrap": "npx st-rm-rf ./node_modules package-lock.json",
+        "bootstrap": "npm i",
+        "start": "node fuse",
+        "watch": "node fuse",
+        "build": "node fuse build && npm run rollup",
+        "rollup": "./node_modules/.bin/rollup -c",
+        "prettier:run": "node ./node_modules/prettier/bin-prettier --write \"src/**/*.{json,md,ts}\" ",
+        "eslint": "npm run eslint:run:package && npm run eslint:run:sample",
+        "eslint:run:package": "./node_modules/.bin/eslint --fix ./src/package/**/*.ts",
+        "eslint:run:sample": "./node_modules/.bin/eslint --fix ./src/sample/**/*.ts",
+        "test": "todo"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/vegarringdal/custom-elements-hmr-polyfill.git"
+    },
+    "author": "Vegar Ringdal<[email protected]> & Aron Homberg<[email protected]>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/vegarringdal/custom-elements-hmr-polyfill/issues"
+    },
+    "homepage": "https://github.com/vegarringdal/custom-elements-hmr-polyfill#readme",
+    "devDependencies": {
+        "fuse-box": "4.0.0-next.425",
+        "fuse-box-typechecker": "^3.0.0-next.31",
+        "husky": "^4.2.5",
+        "lint-staged": "^10.1.3",
+        "prettier": "^2.0.4",
+        "rollup": "^2.6.1",
+        "rollup-plugin-terser": "^5.3.0",
+        "tslib": "^1.11.1",
+        "typescript": "^3.8.3",
+        "@commitlint/cli": "^8.3.5",
+        "@commitlint/config-conventional": "^8.3.4",
+        "@typescript-eslint/eslint-plugin": "^2.27.0",
+        "@typescript-eslint/parser": "^2.27.0",
+        "eslint": "^6.8.0",
+        "eslint-config-prettier": "^6.10.1",
+        "eslint-plugin-prettier": "^3.1.2"
+    },
+    "husky": {
+        "hooks": {
+            "pre-commit": "lint-staged",
+            "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+        }
+    },
+    "lint-staged": {
+        "src/**/*.{json,md,ts}": [
+            "prettier --write",
+            "git add"
+        ]
+    },
+    "dependencies": {}
 }

src/package/polyfill/createHookClass.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-rest-params */
 import { getMostRecentImpl, getSymbolAttributes, getSymbolObserver } from './hmrCache';
 
 export function createHookClass(elementName: string, originalImpl: any) {
@@ -51,8 +52,8 @@ export function createHookClass(elementName: string, originalImpl: any) {
             }
 
             // create and observe
-            (<any>this)[getSymbolObserver(elementName)] = new MutationObserver(callback);
-            (<any>this)[getSymbolObserver(elementName)].observe(
+            (this as any)[getSymbolObserver(elementName)] = new MutationObserver(callback);
+            (this as any)[getSymbolObserver(elementName)].observe(
                 (this as unknown) as Node,
                 observerOptions
             );
@@ -64,8 +65,8 @@ export function createHookClass(elementName: string, originalImpl: any) {
 
         disconnectedCallback() {
             // cleanup
-            (<any>this)[getSymbolObserver(elementName)].disconnect();
-            (<any>this)[getSymbolObserver(elementName)] = null;
+            (this as any)[getSymbolObserver(elementName)].disconnect();
+            (this as any)[getSymbolObserver(elementName)] = null;
 
             const mostRecentImpl = getMostRecentImpl(elementName).prototype;
             if (mostRecentImpl.disconnectedCallback) {

src/package/polyfill/createHookElementChangeListener.ts

@@ -11,11 +11,15 @@ export const createHookElementChangeListener = (
     let elementsChanged: Array<string> = [];
 
     if (!onCustomElementChangeListener) {
-        onCustomElementChangeListener = () => {};
+        onCustomElementChangeListener = () => {
+            /**nothing */
+        };
     }
 
     return (elementName: string, impl: any, options: ElementDefinitionOptions) => {
-        onCustomElementChangeListener!(elementName, impl, options);
+        if (onCustomElementChangeListener) {
+            onCustomElementChangeListener(elementName, impl, options);
+        }
 
         if (reflowStrategy && reflowStrategy === ReflowStrategy.RERENDER_INNER_HTML) {
             elementsChanged.push(elementName);

src/package/polyfill/hmrCache.ts

@@ -1,43 +1,45 @@
 export function initCache() {
-    if (!(<any>globalThis).hmrCache) {
-        (<any>globalThis).hmrCache = {};
-        (<any>globalThis).hmrCacheSymbolAttributes = {};
-        (<any>globalThis).hmrCacheSymbolObserver = {};
+    if (!(globalThis as any).hmrCache) {
+        (globalThis as any).hmrCache = {};
+        (globalThis as any).hmrCacheSymbolAttributes = {};
+        (globalThis as any).hmrCacheSymbolObserver = {};
     }
 }
 
 export function getMostRecentImpl(elementName: string) {
-    return (<any>globalThis).hmrCache[elementName];
+    return (globalThis as any).hmrCache[elementName];
 }
 
 export function setMostRecentImpl(elementName: string, impl: any) {
-    (<any>globalThis).hmrCache[elementName] = impl;
+    (globalThis as any).hmrCache[elementName] = impl;
 }
 
 export function isCacheInitialized() {
-    return (<any>globalThis).hmrCache.initialized;
+    return (globalThis as any).hmrCache.initialized;
 }
 
 export function setCacheAsInitialized() {
-    (<any>globalThis).hmrCache.initialized = true;
+    (globalThis as any).hmrCache.initialized = true;
 }
 
 export function getSymbolAttributes(elementName: string) {
-    if (!(<any>globalThis).hmrCacheSymbolAttributes[elementName]) {
-        (<any>globalThis).hmrCacheSymbolAttributes[elementName] = Symbol('observedAttributesArray');
-        return (<any>globalThis).hmrCacheSymbolAttributes[elementName];
+    if (!(globalThis as any).hmrCacheSymbolAttributes[elementName]) {
+        (globalThis as any).hmrCacheSymbolAttributes[elementName] = Symbol(
+            'observedAttributesArray'
+        );
+        return (globalThis as any).hmrCacheSymbolAttributes[elementName];
     } else {
-        return (<any>globalThis).hmrCacheSymbolAttributes[elementName];
+        return (globalThis as any).hmrCacheSymbolAttributes[elementName];
     }
 }
 
 export function getSymbolObserver(elementName: string) {
-    if (!(<any>globalThis).hmrCacheSymbolObserver[elementName]) {
-        (<any>globalThis).hmrCacheSymbolObserver[elementName] = Symbol(
+    if (!(globalThis as any).hmrCacheSymbolObserver[elementName]) {
+        (globalThis as any).hmrCacheSymbolObserver[elementName] = Symbol(
             'observedAttributesObserver'
         );
-        return (<any>globalThis).hmrCacheSymbolObserver[elementName];
+        return (globalThis as any).hmrCacheSymbolObserver[elementName];
     } else {
-        return (<any>globalThis).hmrCacheSymbolObserver[elementName];
+        return (globalThis as any).hmrCacheSymbolObserver[elementName];
     }
 }

src/package/polyfill/onCustomElementChange.ts

@@ -9,7 +9,7 @@ export type CustomElementChangeListener = (
 export const onCustomElementChange = (changeListener: CustomElementChangeListener) => {
     initCache();
 
-    if (!(<any>globalThis).hmrCache.onCustomElementChange) {
-        (<any>globalThis).hmrCache.onCustomElementChange = changeListener;
+    if (!(globalThis as any).hmrCache.onCustomElementChange) {
+        (globalThis as any).hmrCache.onCustomElementChange = changeListener;
     }
 };

src/package/polyfill/overrideCustomElementDefine.ts

@@ -37,7 +37,7 @@ export function overrideCustomElementDefine() {
                 });
                 originalDefineFn.apply(this, [elementName, hookClass, options]);
             } else {
-                const onCustomElementChange = (<any>globalThis).hmrCache.onCustomElementChange;
+                const onCustomElementChange = (globalThis as any).hmrCache.onCustomElementChange;
 
                 if (onCustomElementChange && typeof onCustomElementChange === 'function') {
                     onCustomElementChange(elementName, impl, options);

src/sample/decorator/defineCustomElement.ts

@@ -16,7 +16,7 @@ export function customElementExtended(
     elementDefinitionOptions?: ElementDefinitionOptions
 ) {
     return function reg(elementClass: any) {
-        const base: any = class extends elementClass {
+        const Base: any = class extends elementClass {
             constructor() {
                 super();
             }
@@ -38,9 +38,9 @@ export function customElementExtended(
             }
         };
         if (elementDefinitionOptions) {
-            customElements.define(elementName, base, elementDefinitionOptions);
+            customElements.define(elementName, Base, elementDefinitionOptions);
         } else {
-            customElements.define(elementName, base);
+            customElements.define(elementName, Base);
         }
     };
 }

src/sample/my-comp.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-rest-params */
 import { defineCustomElement } from './decorator/defineCustomElement';
 
 @defineCustomElement('my-comp')

tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+    "extends": "./tsconfig.json",
+    "exclude": ["node_modules"]
+}