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"