Merge pull request #35 from 21TORR/updates

CHANGELOG.md

@@ -1,3 +1,12 @@
+2.2.1 (unreleased)
+=====
+
+* (improvement) Remove internal `elementMatches()` helper.
+* (improvement) Remove outdated `CustomEvent` workaround.
+* (deprecation) Deprecate `createEvent` helper.
+* (improvement) Remove outdated `MediaQueryList.addEventListener()` workaround.
+
+
 2.2.0
 =====
 

UPGRADE.md

@@ -1,4 +1,10 @@
-1.x to 2.0.0
+2.x to 3.0
+==========
+
+* The `createEvent` helper was removed, use `new CustomEvent()` directly.
+
+
+1.x to 2.0
 ============
 
 * The import path for `mount()` has changed `/mount.js -> /react/mount.mjs`.

src/dom/attrs.ts

@@ -1,10 +1,15 @@
 /**
  * Toggles the class on the given element(s).
  */
-export function toggleClass (element: HTMLElement|HTMLElement[], className: string|string[], addClass: boolean) : void
+export function toggleClass (
+	element: HTMLElement|HTMLElement[],
+	className: string|string[],
+	addClass: boolean,
+) : void
 {
 	const classes = Array.isArray(className) ? className : [className];
 	const elements = Array.isArray(element) ? element : [element];
+
 	elements.forEach(item => {
 		classes.forEach(classToChange => item.classList[addClass ? "add" : "remove"](classToChange));
 	});

src/dom/events.ts

@@ -1,6 +1,5 @@
 import {splitStringValue} from '../lib/string';
 import {closest} from './traverse';
-import {createEvent} from '../lib/events';
 
 type EventHandler <EventType extends Event> = (event: EventType) => any;
 type DelegatedEventHandler <EventType extends Event, ElementType extends HTMLElement> = (event: EventType, delegateTarget: ElementType) => any;
@@ -16,7 +15,7 @@ export function on <EventType extends Event> (
 	element: ExtendedEventTarget,
 	type: ExtendedEventName,
 	handler: EventHandler<EventType>,
-	options: boolean|AddEventListenerOptions = false
+	options: boolean|AddEventListenerOptions = false,
 ) : void
 {
 	const elements = Array.isArray(element) ? element : [element];
@@ -39,7 +38,7 @@ export function on <EventType extends Event> (
 export function off (
 	element: ExtendedEventTarget,
 	type: ExtendedEventName,
-	handler: EventHandler<any>
+	handler: EventHandler<any>,
 ) : void
 {
 
@@ -65,7 +64,7 @@ export function off (
 export function once <EventType extends Event> (
 	element: EventTarget|null,
 	type: EventName,
-	handler: EventHandler<EventType>
+	handler: EventHandler<EventType>,
 ) : UnregisterEventCallback
 {
 	if (!element)
@@ -94,7 +93,7 @@ export function delegate <EventType extends Event, ElementType extends HTMLEleme
 	element: EventTarget|null,
 	selector: string,
 	type: EventName,
-	handler: DelegatedEventHandler<EventType, ElementType>
+	handler: DelegatedEventHandler<EventType, ElementType>,
 ) : UnregisterEventCallback
 {
 	const wrappedHandler = (event: EventType) =>
@@ -110,13 +109,15 @@ export function delegate <EventType extends Event, ElementType extends HTMLEleme
 	return onOff(element, type, wrappedHandler);
 }
 
+
+
 /**
  * Registers an event listener on the given element and returns the function to remove it
  */
 export function onOff <EventType extends Event> (
 	element: EventTarget|null,
 	type: EventName,
-	handler: EventHandler<EventType>
+	handler: EventHandler<EventType>,
 ) : UnregisterEventCallback
 {
 	if (!element)
@@ -135,16 +136,15 @@ export function onOff <EventType extends Event> (
 export function trigger (
 	element: EventTarget|null,
 	type: EventName,
-	data?: unknown
+	data?: unknown,
 ) : void
 {
-	// @legacy IE 11 doesn't support the global CustomEvent
 	if (!element)
 	{
 		return;
 	}
 
-	element.dispatchEvent(createEvent(type, {
+	element.dispatchEvent(new CustomEvent(type, {
 		bubbles: true,
 		cancelable: true,
 		detail: data,

src/dom/lib/traverse-helpers.ts

@@ -1,19 +1,3 @@
-const polyfilledElementMatches = Element.prototype.matches
-	|| (Element.prototype as any).msMatchesSelector
-	|| (Element.prototype as any).webkitMatchesSelector;
-
-
-/**
- * Returns whether the given element matches the optional selector
- *
- * @internal
- */
-export function elementMatches<ElementType extends Element> (element: ElementType, selector: string|null = null) : boolean
-{
-	return (null === selector) || polyfilledElementMatches.call(element, selector);
-}
-
-
 /**
  * Fetches all siblings, in the given direction.
  * Will start from the given element, traverse in the given direction and fetch the first (or all) matches
@@ -23,15 +7,15 @@ export function elementMatches<ElementType extends Element> (element: ElementTyp
 export function fetchSiblings<ElementType extends HTMLElement> (
 	element: HTMLElement,
 	selector: string|null,
-	accessor: "previousElementSibling" | "nextElementSibling"
+	accessor: "previousElementSibling" | "nextElementSibling",
 ) : ElementType[]
 {
 	let sibling = element[accessor];
 	const list: ElementType[] = [];
 
 	while (sibling)
 	{
-		if (elementMatches(sibling, selector))
+		if (null === selector || sibling.matches(selector))
 		{
 			list.push(sibling as ElementType);
 		}

src/dom/traverse.ts

@@ -1,4 +1,4 @@
-import {elementMatches, fetchSiblings} from './lib/traverse-helpers';
+import {fetchSiblings} from './lib/traverse-helpers';
 
 
 /**
@@ -32,7 +32,7 @@ export function children <ElementType extends HTMLElement = HTMLElement> (parent
 
 	while (child)
 	{
-		if (elementMatches(child, selector))
+		if (selector === null || child.matches(selector))
 		{
 			list.push(child as ElementType);
 		}
@@ -84,7 +84,7 @@ export function closest <ElementType extends HTMLElement> (element: HTMLElement|
 
 	while (null !== parent && rootElement !== parent)
 	{
-		if (elementMatches(parent, selector))
+		if (parent.matches(selector))
 		{
 			return parent as ElementType;
 		}

src/lib/events.ts

@@ -2,15 +2,10 @@ import {EventName} from '../dom/events';
 
 /**
  * Creates a new custom event
+ *
+ * @deprecated Just use the CustomEvent constructor directly
  */
 export function createEvent (type: EventName, args: CustomEventInit): CustomEvent
 {
-	if (typeof CustomEvent !== "function")
-	{
-		const event = document.createEvent("CustomEvent");
-		event.initCustomEvent(type, args.bubbles, args.cancelable, args.detail);
-		return event;
-	}
-
 	return new CustomEvent(type, args);
 }

src/media-query.ts

@@ -18,14 +18,7 @@ export function matchMediaQuery (query: string): MediaQueryMatcher
 	let listeners: MediaQueryChangeListener[] = [];
 	const update = (event: MediaQueryListEvent) => listeners.forEach(listener => listener(event.matches));
 
-	if (media.addEventListener)
-	{
-		media.addEventListener("change", update);
-	}
-	else
-	{
-		media.addListener(update);
-	}
+	media.addEventListener("change", update);
 
 	return {
 		/**
@@ -72,15 +65,7 @@ export function matchMediaQuery (query: string): MediaQueryMatcher
 		destroy (): void
 		{
 			listeners = [];
-
-			if (media.removeEventListener)
-			{
-				media.removeEventListener("change", update);
-			}
-			else
-			{
-				media.removeListener(update);
-			}
+			media.removeEventListener("change", update);
 		}
 	};
 }

src/popup-interaction.ts

@@ -46,7 +46,7 @@ export function registerBodyClickHandler (allowedClickTargets: HTMLElement[], on
 export function initDismissibleContainer (
 	trigger: HTMLElement|HTMLElement[],
 	allowedContainers: HTMLElement[],
-	callback: (isActive: boolean) => void
+	callback: (isActive: boolean) => void,
 ) : DismissibleContainerDirector
 {
 	let globalHandler: (() => void)|null = null;

src/react/mount.ts

@@ -24,7 +24,7 @@ interface MountableJsxOptions <ComponentProperty> {
 export function mount (
 	selector: string|HTMLElement|HTMLElement[],
 	mountable: MountableFunction,
-	options: MountableFunctionOptions = {}
+	options: MountableFunctionOptions = {},
 ) : void
 {
 	const elements = typeof selector === "string"
@@ -41,7 +41,7 @@ export function mount (
 export function mountJsx <ComponentProperty = Record<string, unknown>> (
 	selector: string|HTMLElement|HTMLElement[],
 	mountable: ComponentType,
-	options: MountableJsxOptions<ComponentProperty> = {}
+	options: MountableJsxOptions<ComponentProperty> = {},
 ) : void
 {
 	const elements = typeof selector === "string"