From f4c7b48dee85cd0273b3c3851e844ff52a0b61d3 Mon Sep 17 00:00:00 2001 From: CPatchane Date: Tue, 30 May 2023 18:23:22 +0200 Subject: [PATCH] Use prettier with our shared config --- .prettierrc | 1 + package.json | 3 +- src/index.test.ts | 595 +++++++++++++++++++++++----------------------- src/index.ts | 116 ++++----- yarn.lock | 13 +- 5 files changed, 367 insertions(+), 361 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..505b8b8 --- /dev/null +++ b/.prettierrc @@ -0,0 +1 @@ +"@getaround-eu/prettier-config" diff --git a/package.json b/package.json index a6850fc..dc9fac2 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@babel/preset-env": "^7.4.5", "@babel/preset-typescript": "^7.3.3", "@drivy/eslint-config": "^1.0.1", + "@getaround-eu/prettier-config": "^1.2.0", "@types/jest": "^26.0.10", "@typescript-eslint/eslint-plugin": "5.9.0", "@typescript-eslint/parser": "5.9.0", @@ -57,7 +58,7 @@ "jest": "^26.4.2", "microbundle": "^0.14.2", "np": "7.6.0", - "prettier": "^2.1.1", + "prettier": "^2.8.8", "typescript": "4.5.4" }, "publishConfig": { diff --git a/src/index.test.ts b/src/index.test.ts index 9dbbeb4..1200e74 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -4,7 +4,7 @@ import { queryAll, toEnhancedHTMLElement, toEnhancedHTMLElementList, -} from "./"; +} from "./" describe("query utilities", () => { const domTest = ` @@ -26,532 +26,531 @@ describe("query utilities", () => { - `; + ` beforeEach(() => { - document.body.innerHTML = domTest; - }); + document.body.innerHTML = domTest + }) afterEach(() => { - document.body.innerHTML = ""; - }); + document.body.innerHTML = "" + }) describe("enhances existing Node", () => { it("enhances body", () => { - const enhancedNode = toEnhancedHTMLElement(document.body); - expect(enhancedNode).not.toBeNull(); - expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy(); - }); + const enhancedNode = toEnhancedHTMLElement(document.body) + expect(enhancedNode).not.toBeNull() + expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy() + }) it("enhances HTMLElement", () => { - const idToSelect = "el1"; + const idToSelect = "el1" const nativeQueryResult = document.querySelector( `#${idToSelect}` - ); - const enhancedNode = toEnhancedHTMLElement(nativeQueryResult!); - expect(enhancedNode).not.toBeNull(); - expect(enhancedNode!.id).toEqual(`${idToSelect}`); - expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy(); - }); + ) + const enhancedNode = toEnhancedHTMLElement(nativeQueryResult!) + expect(enhancedNode).not.toBeNull() + expect(enhancedNode!.id).toEqual(`${idToSelect}`) + expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy() + }) it("enhances HTMLInputElement", () => { - const idToSelect = "input"; + const idToSelect = "input" const nativeQueryResult = document.querySelector( `#${idToSelect}` - ); + ) const enhancedNode = toEnhancedHTMLElement( nativeQueryResult! - ); + ) - expect(enhancedNode).not.toBeNull(); - expect(enhancedNode!.id).toEqual(`${idToSelect}`); - expect(enhancedNode!.value).not.toBeUndefined(); + expect(enhancedNode).not.toBeNull() + expect(enhancedNode!.id).toEqual(`${idToSelect}`) + expect(enhancedNode!.value).not.toBeUndefined() expect(enhancedNode!.value).toEqual( document.querySelector("#input")!.value - ); - expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy(); - }); - }); + ) + expect(enhancedNode!.isEnhancedHTMLElement).toBeTruthy() + }) + }) describe(".query", () => { it("return null", () => { - const queryResult = query("#el0"); - expect(queryResult).toBeNull(); - }); + const queryResult = query("#el0") + expect(queryResult).toBeNull() + }) it("return correct enhancedHtmlElement", () => { - const queryResult = query("#el1"); - expect(queryResult).not.toBeNull(); - expect(queryResult!.id).toEqual("el1"); - expect(queryResult!.isEnhancedHTMLElement).toBeTruthy(); - }); + const queryResult = query("#el1") + expect(queryResult).not.toBeNull() + expect(queryResult!.id).toEqual("el1") + expect(queryResult!.isEnhancedHTMLElement).toBeTruthy() + }) it("return input element with available value", () => { - const queryResult = query("#input"); - expect(queryResult).not.toBeNull(); - expect(queryResult!.value).not.toBeUndefined(); + const queryResult = query("#input") + expect(queryResult).not.toBeNull() + expect(queryResult!.value).not.toBeUndefined() expect(queryResult!.value).toEqual( document.querySelector("#input")!.value - ); - }); - }); + ) + }) + }) describe(".query from a toEnhancedElement result", () => { it("return correct enhancedHtmlElement", () => { - const nativeQueryResult = document.querySelector("#el1"); - expect(nativeQueryResult).not.toBeNull(); + const nativeQueryResult = document.querySelector("#el1") + expect(nativeQueryResult).not.toBeNull() if (nativeQueryResult) { - const queryResult = toEnhancedHTMLElement(nativeQueryResult)!.query( - "#el2" - ); - expect(queryResult).not.toBeNull(); - expect(queryResult!.id).toEqual("el2"); - expect(queryResult!.isEnhancedHTMLElement).toBeTruthy(); + const queryResult = + toEnhancedHTMLElement(nativeQueryResult)!.query("#el2") + expect(queryResult).not.toBeNull() + expect(queryResult!.id).toEqual("el2") + expect(queryResult!.isEnhancedHTMLElement).toBeTruthy() } - }); - }); + }) + }) describe("chaining .query", () => { it("apply context to return enhancedHtmlElement", () => { - const queryResult = query("#el9")!.query(".class4"); - expect(queryResult).not.toBeNull(); - expect(queryResult!.id).toEqual("el10"); - expect(queryResult!.isEnhancedHTMLElement).toBeTruthy(); - }); - }); + const queryResult = query("#el9")!.query(".class4") + expect(queryResult).not.toBeNull() + expect(queryResult!.id).toEqual("el10") + expect(queryResult!.isEnhancedHTMLElement).toBeTruthy() + }) + }) describe(".query .on", () => { it("should call the callback on click", () => { - const queryResult = query("#el2"); + const queryResult = query("#el2") - expect(queryResult).not.toBeNull(); + expect(queryResult).not.toBeNull() if (queryResult) { - const mockCallback = jest.fn(); - queryResult.on("click", mockCallback); - queryResult.click(); - expect(mockCallback).toHaveBeenCalled(); + const mockCallback = jest.fn() + queryResult.on("click", mockCallback) + queryResult.click() + expect(mockCallback).toHaveBeenCalled() } - }); + }) describe("should have the right even type", () => { it("for keyboard event", () => { return new Promise((done) => { - const queryResult = query("#input"); + const queryResult = query("#input") - expect(queryResult).not.toBeNull(); + expect(queryResult).not.toBeNull() if (!queryResult) { - done(); - return; + done() + return } queryResult.on("keypress", (e) => { // make sure this does not raise any TS error - expect(e.key).not.toBeNull(); - expect(e.key).toEqual("a"); - done(); - }); - const event = new KeyboardEvent("keypress", { key: "a" }); - queryResult.dispatchEvent(event); - }); - }); + expect(e.key).not.toBeNull() + expect(e.key).toEqual("a") + done() + }) + const event = new KeyboardEvent("keypress", { key: "a" }) + queryResult.dispatchEvent(event) + }) + }) it("for mouse event", () => { return new Promise((done) => { - const queryResult = query("#input"); + const queryResult = query("#input") - expect(queryResult).not.toBeNull(); + expect(queryResult).not.toBeNull() if (!queryResult) { - done(); - return; + done() + return } queryResult.on("click", (e) => { // make sure this does not raise any TS error - expect(e.clientX).not.toBeNull(); - done(); - }); - queryResult.click(); - }); - }); - }); + expect(e.clientX).not.toBeNull() + done() + }) + queryResult.click() + }) + }) + }) it("should apply once configuration", () => { - const queryResult = query("#el3"); + const queryResult = query("#el3") - expect(queryResult).not.toBeNull(); + expect(queryResult).not.toBeNull() if (queryResult) { - const mockCallback = jest.fn(); - const configuration = { once: true }; - queryResult.on("click", mockCallback, configuration); - queryResult.click(); - queryResult.click(); - expect(mockCallback).toHaveBeenCalledTimes(1); + const mockCallback = jest.fn() + const configuration = { once: true } + queryResult.on("click", mockCallback, configuration) + queryResult.click() + queryResult.click() + expect(mockCallback).toHaveBeenCalledTimes(1) } - }); + }) it("should remove listener", () => { - const queryResult = query("#el4"); + const queryResult = query("#el4") - expect(queryResult).not.toBeNull(); + expect(queryResult).not.toBeNull() if (queryResult) { - const mockCallback = jest.fn(); - const removeListener = queryResult.on("click", mockCallback); - queryResult.click(); + const mockCallback = jest.fn() + const removeListener = queryResult.on("click", mockCallback) + queryResult.click() - removeListener(); + removeListener() - queryResult.click(); - expect(mockCallback).toHaveBeenCalledTimes(1); + queryResult.click() + expect(mockCallback).toHaveBeenCalledTimes(1) } - }); - }); + }) + }) describe(".query .onDelegate", () => { it("should call the callbacks on clicks with the correct child target", () => { - const container = queryStrict("#el1"); - - const child1Id = "el2"; - const child3Id = "el4"; - - const child1 = queryStrict(`#${child1Id}`); - const child3 = queryStrict(`#${child3Id}`); - const child3Child = child3.queryStrict("strong"); - - const mockCallback = jest.fn(); - container.onDelegate("span", "click", mockCallback); - child1.click(); - child3.click(); - child3Child.click(); - expect(mockCallback).toHaveBeenCalledTimes(3); - expect(mockCallback.mock.calls[0][0].currentTarget.id).toBe(child1Id); - expect(mockCallback.mock.calls[1][0].currentTarget.id).toBe(child3Id); - expect(mockCallback.mock.calls[2][0].currentTarget.id).toBe(child3Id); - }); + const container = queryStrict("#el1") + + const child1Id = "el2" + const child3Id = "el4" + + const child1 = queryStrict(`#${child1Id}`) + const child3 = queryStrict(`#${child3Id}`) + const child3Child = child3.queryStrict("strong") + + const mockCallback = jest.fn() + container.onDelegate("span", "click", mockCallback) + child1.click() + child3.click() + child3Child.click() + expect(mockCallback).toHaveBeenCalledTimes(3) + expect(mockCallback.mock.calls[0][0].currentTarget.id).toBe(child1Id) + expect(mockCallback.mock.calls[1][0].currentTarget.id).toBe(child3Id) + expect(mockCallback.mock.calls[2][0].currentTarget.id).toBe(child3Id) + }) describe("should have the right even type", () => { it("for keyboard event", () => { return new Promise((done) => { - const container = query("#el1"); + const container = query("#el1") - expect(container).not.toBeNull(); + expect(container).not.toBeNull() if (!container) { - done(); - return; + done() + return } container.onDelegate("input", "keypress", (e) => { // make sure this does not raise any TS error - expect(e.key).not.toBeNull(); - expect(e.key).toEqual("a"); - done(); - }); + expect(e.key).not.toBeNull() + expect(e.key).toEqual("a") + done() + }) const event = new KeyboardEvent("keypress", { key: "a", bubbles: true, - }); - container.queryStrict("#input").dispatchEvent(event); - }); - }); + }) + container.queryStrict("#input").dispatchEvent(event) + }) + }) it("for mouse event", () => { return new Promise((done) => { - const container = query("#el1"); + const container = query("#el1") - expect(container).not.toBeNull(); + expect(container).not.toBeNull() if (!container) { - done(); - return; + done() + return } container.onDelegate("input", "click", (e) => { // make sure this does not raise any TS error - expect(e.clientX).not.toBeNull(); - done(); - }); + expect(e.clientX).not.toBeNull() + done() + }) - container.queryStrict("#input").click(); - }); - }); - }); + container.queryStrict("#input").click() + }) + }) + }) it("should apply once configuration", () => { - const container = query("#el1"); + const container = query("#el1") - const child1Id = "el2"; - const child3Id = "el4"; + const child1Id = "el2" + const child3Id = "el4" - const child1 = query(`#${child1Id}`); - const child3 = query(`#${child3Id}`); + const child1 = query(`#${child1Id}`) + const child3 = query(`#${child3Id}`) - expect(container).not.toBeNull(); - expect(child1).not.toBeNull(); - expect(child3).not.toBeNull(); + expect(container).not.toBeNull() + expect(child1).not.toBeNull() + expect(child3).not.toBeNull() if (container && child1 && child3) { - const mockCallback = jest.fn(); - const configuration = { once: true }; - container.onDelegate("span", "click", mockCallback, configuration); - child1.click(); - child3.click(); - expect(mockCallback).toHaveBeenCalledTimes(1); + const mockCallback = jest.fn() + const configuration = { once: true } + container.onDelegate("span", "click", mockCallback, configuration) + child1.click() + child3.click() + expect(mockCallback).toHaveBeenCalledTimes(1) } - }); + }) it("should remove listener", () => { - const container = query("#el1"); + const container = query("#el1") - const child1Id = "el2"; - const child3Id = "el4"; + const child1Id = "el2" + const child3Id = "el4" - const child1 = query(`#${child1Id}`); - const child3 = query(`#${child3Id}`); + const child1 = query(`#${child1Id}`) + const child3 = query(`#${child3Id}`) - expect(container).not.toBeNull(); - expect(child1).not.toBeNull(); - expect(child3).not.toBeNull(); + expect(container).not.toBeNull() + expect(child1).not.toBeNull() + expect(child3).not.toBeNull() if (container && child1 && child3) { - const mockCallback = jest.fn(); + const mockCallback = jest.fn() const removeListener = container.onDelegate( "span", "click", mockCallback - ); - child1.click(); - removeListener(); - child3.click(); - expect(mockCallback).toHaveBeenCalledTimes(1); + ) + child1.click() + removeListener() + child3.click() + expect(mockCallback).toHaveBeenCalledTimes(1) } - }); - }); + }) + }) describe(".queryStrict exception", () => { it("throw Exception on no match", () => { expect(() => { - queryStrict("#not-existing"); - }).toThrow(); - }); + queryStrict("#not-existing") + }).toThrow() + }) it("throw Exception on chained no match", () => { - const firstSelection = queryStrict("#el1"); - expect(firstSelection).not.toBeNull(); + const firstSelection = queryStrict("#el1") + expect(firstSelection).not.toBeNull() expect(() => { - firstSelection.queryStrict("#not-existing"); - }).toThrow(); - }); - }); + firstSelection.queryStrict("#not-existing") + }).toThrow() + }) + }) describe("enhances existing Node list", () => { it("enhances Elements", () => { const nodes = Array.from( document.querySelectorAll(".class2") - ); + ) - const enhancedNodeList = toEnhancedHTMLElementList(nodes); - expect(enhancedNodeList).not.toHaveLength(0); - expect(enhancedNodeList.isEnhancedHTMLElementList).toBeTruthy(); + const enhancedNodeList = toEnhancedHTMLElementList(nodes) + expect(enhancedNodeList).not.toHaveLength(0) + expect(enhancedNodeList.isEnhancedHTMLElementList).toBeTruthy() enhancedNodeList.forEach((element) => { - expect(element.isEnhancedHTMLElement).toBeTruthy(); - }); - }); - }); + expect(element.isEnhancedHTMLElement).toBeTruthy() + }) + }) + }) describe(".queryAll", () => { it("return empty list", () => { - const list = queryAll(".class0"); - expect(list).toHaveLength(0); - }); + const list = queryAll(".class0") + expect(list).toHaveLength(0) + }) it("return correct enhancedHtmlElement list from document context", () => { - const classToSelect = "class2"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class2" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() expect(list).toHaveLength( document.querySelectorAll(`.${classToSelect}`).length - ); + ) list.forEach((element) => { - expect(element.className).toEqual(classToSelect); - }); - }); + expect(element.className).toEqual(classToSelect) + }) + }) it("return correct enhancedHtmlElement list from Node context", () => { - const contextNode = query("#el5"); + const contextNode = query("#el5") - expect(contextNode).not.toBeNull(); + expect(contextNode).not.toBeNull() if (contextNode) { - const classToSelect = "class4"; - const list = contextNode.queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class4" + const list = contextNode.queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() expect(list).toHaveLength( contextNode.querySelectorAll(`.${classToSelect}`).length - ); + ) list.forEach((element) => { - expect(element.className).toEqual(classToSelect); - }); + expect(element.className).toEqual(classToSelect) + }) } - }); + }) it("return correct enhanced input list from document context", () => { - const selector = "input"; - const list = queryAll(selector); - expect(list).not.toBeNull(); - expect(list).toHaveLength(document.querySelectorAll(selector).length); + const selector = "input" + const list = queryAll(selector) + expect(list).not.toBeNull() + expect(list).toHaveLength(document.querySelectorAll(selector).length) list.forEach((element) => { - expect(element.tagName).toEqual(selector.toUpperCase()); - expect(element.value).not.toBeUndefined(); - }); - }); - }); + expect(element.tagName).toEqual(selector.toUpperCase()) + expect(element.value).not.toBeUndefined() + }) + }) + }) describe(".queryAll .on", () => { it("should call the callback on each element click", () => { - const classToSelect = "class2"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class2" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - list.on("click", mockCallback); + const mockCallback = jest.fn() + list.on("click", mockCallback) list.forEach((element) => { - element.click(); - }); + element.click() + }) - expect(mockCallback).toHaveBeenCalledTimes(list.length); + expect(mockCallback).toHaveBeenCalledTimes(list.length) } - }); + }) it("should apply once configuration on each element click", () => { - const classToSelect = "class2"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class2" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - const configuration = { once: true }; - list.on("click", mockCallback, configuration); + const mockCallback = jest.fn() + const configuration = { once: true } + list.on("click", mockCallback, configuration) list.forEach((element) => { - element.click(); - element.click(); - }); + element.click() + element.click() + }) - expect(mockCallback).toHaveBeenCalledTimes(list.length); + expect(mockCallback).toHaveBeenCalledTimes(list.length) } - }); + }) it("should remove listener on each element click", () => { - const classToSelect = "class2"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class2" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - const removeListener = list.on("click", mockCallback); + const mockCallback = jest.fn() + const removeListener = list.on("click", mockCallback) list.forEach((element) => { - element.click(); - }); - removeListener(); + element.click() + }) + removeListener() list.forEach((element) => { - element.click(); - }); + element.click() + }) - expect(mockCallback).toHaveBeenCalledTimes(list.length); + expect(mockCallback).toHaveBeenCalledTimes(list.length) } - }); - }); + }) + }) describe(".queryAll .onDelegate", () => { it("should call the callbacks on children clicks", () => { - const classToSelect = "class3"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class3" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - const childrenClassToSelect = "class4"; - list.onDelegate(`.${childrenClassToSelect}`, "click", mockCallback); + const mockCallback = jest.fn() + const childrenClassToSelect = "class4" + list.onDelegate(`.${childrenClassToSelect}`, "click", mockCallback) list.forEach((container) => { Array.from( container.querySelectorAll(`.${childrenClassToSelect}`) ).forEach((child) => { - child.click(); - }); - }); + child.click() + }) + }) expect(mockCallback).toHaveBeenCalledTimes( document.querySelectorAll(`.${childrenClassToSelect}`).length - ); + ) } - }); + }) it("should apply the once configuration for container listeners on children click", () => { - const classToSelect = "class3"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class3" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - const childrenClassToSelect = "class4"; - const configuration = { once: true }; + const mockCallback = jest.fn() + const childrenClassToSelect = "class4" + const configuration = { once: true } list.onDelegate( `.${childrenClassToSelect}`, "click", mockCallback, configuration - ); + ) list.forEach((container) => { Array.from( container.querySelectorAll(`.${childrenClassToSelect}`) ).forEach((child) => { - child.click(); - child.click(); - }); - }); - expect(mockCallback).toHaveBeenCalledTimes(list.length); + child.click() + child.click() + }) + }) + expect(mockCallback).toHaveBeenCalledTimes(list.length) } - }); + }) it("should remove the container listeners", () => { - const classToSelect = "class3"; - const list = queryAll(`.${classToSelect}`); - expect(list).not.toBeNull(); + const classToSelect = "class3" + const list = queryAll(`.${classToSelect}`) + expect(list).not.toBeNull() if (list) { - const mockCallback = jest.fn(); - const childrenClassToSelect = "class4"; + const mockCallback = jest.fn() + const childrenClassToSelect = "class4" const removeListeners = list.onDelegate( `.${childrenClassToSelect}`, "click", mockCallback - ); + ) list.forEach((container) => { Array.from( container.querySelectorAll(`.${childrenClassToSelect}`) ).forEach((child) => { - child.click(); - }); - }); + child.click() + }) + }) - removeListeners(); + removeListeners() list.forEach((container) => { Array.from( container.querySelectorAll(`.${childrenClassToSelect}`) ).forEach((child) => { - child.click(); - }); - }); + child.click() + }) + }) expect(mockCallback).toHaveBeenCalledTimes( document.querySelectorAll(`.${childrenClassToSelect}`).length - ); + ) } - }); - }); -}); + }) + }) +}) diff --git a/src/index.ts b/src/index.ts index d9c4488..549db84 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,21 +1,21 @@ export interface EnhancedHTMLElement { - isEnhancedHTMLElement: true; + isEnhancedHTMLElement: true on: ( this: HTMLElement & EnhancedHTMLElement, type: K, callback: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions - ) => () => void; + ) => () => void onDelegate: ( this: HTMLElement & EnhancedHTMLElement, childSelector: string, type: K, callback: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions - ) => () => void; - query: typeof query; - queryStrict: typeof queryStrict; - queryAll: typeof queryAll; + ) => () => void + query: typeof query + queryStrict: typeof queryStrict + queryAll: typeof queryAll } const overrideEventCurrentTarget = (event: Event, target: Element) => { @@ -23,90 +23,90 @@ const overrideEventCurrentTarget = (event: Event, target: Element) => { configurable: true, enumerable: true, get: () => target, - }); -}; + }) +} const enhancedHTMLElementImpl: EnhancedHTMLElement = { isEnhancedHTMLElement: true, on(type, callback, options) { const attachedCallback = (e: Event) => { // wrapped in a function to mimic the once configuration of the native option, which is not well supported (IE 11) - callback.call(e.target, e as WindowEventMap[typeof type]); + callback.call(e.target, e as WindowEventMap[typeof type]) if (options && options.once) { - this.removeEventListener(type, attachedCallback); + this.removeEventListener(type, attachedCallback) } - }; + } const removeListener = () => { - this.removeEventListener(type, attachedCallback); - }; + this.removeEventListener(type, attachedCallback) + } - this.addEventListener(type, attachedCallback); - return removeListener; + this.addEventListener(type, attachedCallback) + return removeListener }, onDelegate(childSelector, type, callback, options) { const containerListenerCallback = (e: Event) => { - if (!(e.target instanceof Element)) return; + if (!(e.target instanceof Element)) return - const target = e.target.closest(childSelector); + const target = e.target.closest(childSelector) - if (!this.contains(target)) return; + if (!this.contains(target)) return if (target) { - overrideEventCurrentTarget(e, target); - callback.call(target, e as WindowEventMap[typeof type]); + overrideEventCurrentTarget(e, target) + callback.call(target, e as WindowEventMap[typeof type]) } - }; + } const removeListener = () => { - this.removeEventListener(type, containerListenerCallback); - }; + this.removeEventListener(type, containerListenerCallback) + } - this.addEventListener(type, containerListenerCallback, options); + this.addEventListener(type, containerListenerCallback, options) - return removeListener; + return removeListener }, query, queryStrict, queryAll, -}; +} export interface EnhancedHTMLElementList { - isEnhancedHTMLElementList: true; + isEnhancedHTMLElementList: true on: ( this: (HTMLElement & EnhancedHTMLElement)[] & EnhancedHTMLElementList, type: K, callback: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions - ) => () => void; + ) => () => void onDelegate: ( this: (HTMLElement & EnhancedHTMLElement)[] & EnhancedHTMLElementList, childSelector: string, type: K, callback: (event: WindowEventMap[K]) => void, options?: AddEventListenerOptions - ) => () => void; + ) => () => void } const enhancedHTMLElementListImpl: EnhancedHTMLElementList = { isEnhancedHTMLElementList: true, on(type, callback, options) { - const removers: (() => void)[] = []; + const removers: (() => void)[] = [] const removeListeners = () => { - removers.forEach((remover) => remover()); - }; + removers.forEach((remover) => remover()) + } this.forEach((enhancedHTMLElement) => { - const remover = enhancedHTMLElement.on(type, callback, options); - removers.push(remover); - }); - return removeListeners; + const remover = enhancedHTMLElement.on(type, callback, options) + removers.push(remover) + }) + return removeListeners }, onDelegate(childSelector, type, callback, options) { - const removers: (() => void)[] = []; + const removers: (() => void)[] = [] const removeListeners = () => { - removers.forEach((remover) => remover()); - }; + removers.forEach((remover) => remover()) + } this.forEach((enhancedHTMLElement) => { const remover = enhancedHTMLElement.onDelegate( @@ -114,27 +114,27 @@ const enhancedHTMLElementListImpl: EnhancedHTMLElementList = { type, callback, options - ); - removers.push(remover); - }); + ) + removers.push(remover) + }) - return removeListeners; + return removeListeners }, -}; +} export const toEnhancedHTMLElement = ( node: T ): T & EnhancedHTMLElement => { - return Object.assign(node, enhancedHTMLElementImpl); -}; + return Object.assign(node, enhancedHTMLElementImpl) +} export function query( this: HTMLElement | void, selector: string ): (T & EnhancedHTMLElement) | null { - const context = this instanceof HTMLElement ? this : document; - const element = context.querySelector(selector); - return element ? toEnhancedHTMLElement(element) : null; + const context = this instanceof HTMLElement ? this : document + const element = context.querySelector(selector) + return element ? toEnhancedHTMLElement(element) : null } export function queryStrict( @@ -142,9 +142,9 @@ export function queryStrict( selector: string ): T & EnhancedHTMLElement { const element = - this instanceof HTMLElement ? this.query(selector) : query(selector); - if (!element) throw new Error(`Unexisting HTML element: ${selector}`); - return element; + this instanceof HTMLElement ? this.query(selector) : query(selector) + if (!element) throw new Error(`Unexisting HTML element: ${selector}`) + return element } export const toEnhancedHTMLElementList = ( @@ -152,17 +152,17 @@ export const toEnhancedHTMLElementList = ( ): (T & EnhancedHTMLElement)[] & EnhancedHTMLElementList => { const enhancedElements = elements.map((node) => toEnhancedHTMLElement(node) - ); + ) - return Object.assign(enhancedElements, enhancedHTMLElementListImpl); -}; + return Object.assign(enhancedElements, enhancedHTMLElementListImpl) +} export function queryAll( this: HTMLElement | void, selector: string ): (T & EnhancedHTMLElement)[] & EnhancedHTMLElementList { - const context = this instanceof HTMLElement ? this : document; - const elements: T[] = Array.from(context.querySelectorAll(selector)); + const context = this instanceof HTMLElement ? this : document + const elements: T[] = Array.from(context.querySelectorAll(selector)) - return toEnhancedHTMLElementList(elements); + return toEnhancedHTMLElementList(elements) } diff --git a/yarn.lock b/yarn.lock index 6b6ba48..2f14803 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1964,6 +1964,11 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" +"@getaround-eu/prettier-config@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@getaround-eu/prettier-config/-/prettier-config-1.2.0.tgz#5421ece1e12e822f6591667fd3b06d4ad185e34c" + integrity sha512-qSzSwXevXeHhxQJH292M3AiZa2k+JRTgWHc+m/iLpE1Ri1dqKS5Z2xSNvcFIjR6g4bN0nlrC+4AgKsAdB8b3Qg== + "@humanwhocodes/config-array@^0.9.2": version "0.9.2" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914" @@ -7754,10 +7759,10 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@^2.1.1: - version "2.1.1" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.1.1.tgz#d9485dd5e499daa6cb547023b87a6cf51bee37d6" - integrity sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw== +prettier@^2.8.8: + version "2.8.8" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da" + integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== pretty-bytes@^3.0.0: version "3.0.1"