Skip to content

Commit f948283

Browse files
fregantefregante
authored
Merge branch 'master' into patch-1
2 parents 3d8c919 + d40af2f commit f948283

File tree

6 files changed

+94
-88
lines changed

6 files changed

+94
-88
lines changed

Diff for: ‎.github/workflows/ci.yml

+10-11
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,25 @@ on:
55
- push
66

77
jobs:
8-
98
Lint:
109
runs-on: ubuntu-latest
1110
steps:
12-
- uses: actions/checkout@v2
13-
- run: npm install
14-
- run: npx xo
11+
- uses: actions/checkout@v2
12+
- run: npm install
13+
- run: npx xo
1514

1615
Build:
1716
runs-on: ubuntu-latest
1817
steps:
19-
- uses: actions/checkout@v2
20-
- run: npm install
21-
- run: npm run build
18+
- uses: actions/checkout@v2
19+
- run: npm install
20+
- run: npm run build
2221

2322
Test:
2423
runs-on: ubuntu-latest
2524
container: node:latest
2625
steps:
27-
- uses: actions/checkout@v2
28-
- run: npm install
29-
- run: npm run build
30-
- run: npx ava
26+
- uses: actions/checkout@v2
27+
- run: npm install
28+
- run: npm run build
29+
- run: npx ava

Diff for: ‎index.ts

+25-8
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,24 @@ namespace delegate {
66
destroy: VoidFunction;
77
};
88

9-
export type EventHandler<TEvent extends GlobalEvent = GlobalEvent, TElement extends Element = Element> = (event: Event<TEvent, TElement>) => void;
10-
11-
export type Event<TEvent extends GlobalEvent = GlobalEvent, TElement extends Element = Element> = TEvent & {
9+
export type EventHandler<
10+
TEvent extends GlobalEvent = GlobalEvent,
11+
TElement extends Element = Element
12+
> = (event: Event<TEvent, TElement>) => void;
13+
14+
export type Event<
15+
TEvent extends GlobalEvent = GlobalEvent,
16+
TElement extends Element = Element
17+
> = TEvent & {
1218
delegateTarget: TElement;
1319
};
1420
}
1521

1622
/** Keeps track of raw listeners added to the base elements to avoid duplication */
17-
const ledger = new WeakMap<EventTarget, WeakMap<delegate.EventHandler, Set<string>>>();
23+
const ledger = new WeakMap<
24+
EventTarget,
25+
WeakMap<delegate.EventHandler, Set<string>>
26+
>();
1827

1928
function editLedger(
2029
wanted: boolean,
@@ -26,7 +35,9 @@ function editLedger(
2635
return false;
2736
}
2837

29-
const elementMap = ledger.get(baseElement) ?? new WeakMap<delegate.EventHandler, Set<string>>();
38+
const elementMap =
39+
ledger.get(baseElement) ??
40+
new WeakMap<delegate.EventHandler, Set<string>>();
3041
ledger.set(baseElement, elementMap);
3142

3243
if (!wanted && !ledger.has(baseElement)) {
@@ -46,14 +57,19 @@ function editLedger(
4657
return existed && wanted;
4758
}
4859

49-
function isEventTarget(elements: EventTarget | Document | ArrayLike<Element> | string): elements is EventTarget {
60+
function isEventTarget(
61+
elements: EventTarget | Document | ArrayLike<Element> | string
62+
): elements is EventTarget {
5063
return typeof (elements as EventTarget).addEventListener === 'function';
5164
}
5265

5366
/**
5467
* Delegates event to a selector.
5568
*/
56-
function delegate<TElement extends Element = Element, TEventType extends EventType = EventType>(
69+
function delegate<
70+
TElement extends Element = Element,
71+
TEventType extends EventType = EventType
72+
>(
5773
base: EventTarget | Document | ArrayLike<Element> | string,
5874
selector: string,
5975
type: TEventType,
@@ -78,7 +94,8 @@ function delegate<TElement extends Element = Element, TEventType extends EventTy
7894
};
7995
}
8096

81-
const baseElement = base; // Required for TypeScript
97+
// `document` should never be the base, it's just an easy way to define "global event listeners"
98+
const baseElement = base instanceof Document ? base.documentElement : base;
8299

83100
// Handle the regular Element usage
84101
const capture = Boolean(typeof options === 'object' ? options.capture : options);

Diff for: ‎package.json

+46-54
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,48 @@
11
{
2-
"name": "delegate-it",
3-
"version": "2.0.0",
4-
"description": "Lightweight event delegation",
5-
"keywords": [
6-
"delegate",
7-
"delegation",
8-
"event"
9-
],
10-
"repository": "fregante/delegate-it",
11-
"license": "MIT",
12-
"type": "module",
13-
"main": "index.js",
14-
"module": "index.js",
15-
"files": [
16-
"index.js",
17-
"index.d.ts"
18-
],
19-
"scripts": {
20-
"build": "tsc",
21-
"prepublishOnly": "tsc --sourceMap false",
22-
"test": "tsc && xo && ava",
23-
"watch": "run-p --silent watch:*",
24-
"watch:build": "tsc --watch",
25-
"watch:test": "ava --watch"
26-
},
27-
"xo": {
28-
"envs": [
29-
"browser"
30-
],
31-
"ignore": [
32-
"test.jsdom.js"
33-
],
34-
"rules": {
35-
"prefer-rest-params": 0,
36-
"import/extensions": 0,
37-
"unicorn/import-index": 0,
38-
"import/no-useless-path-segments": 0
39-
}
40-
},
41-
"ava": {
42-
"require": [
43-
"esm"
44-
]
45-
},
46-
"devDependencies": {
47-
"@sindresorhus/tsconfig": "^0.7.0",
48-
"ava": "^3.10.1",
49-
"esm": "^3.2.25",
50-
"jsdom": "^16.3.0",
51-
"npm-run-all": "^4.1.5",
52-
"sinon": "^9.0.2",
53-
"typescript": "^3.9.6",
54-
"xo": "^0.32.1"
55-
}
2+
"name": "delegate-it",
3+
"version": "2.0.1",
4+
"description": "Lightweight event delegation",
5+
"keywords": [
6+
"delegate",
7+
"delegation",
8+
"event"
9+
],
10+
"repository": "fregante/delegate-it",
11+
"license": "MIT",
12+
"type": "module",
13+
"main": "index.js",
14+
"module": "index.js",
15+
"files": [
16+
"index.js",
17+
"index.d.ts"
18+
],
19+
"scripts": {
20+
"build": "tsc",
21+
"prepack": "tsc --sourceMap false",
22+
"test": "tsc && xo && ava",
23+
"watch": "run-p --silent watch:*",
24+
"watch:build": "tsc --watch",
25+
"watch:test": "ava --watch"
26+
},
27+
"xo": {
28+
"envs": [
29+
"browser"
30+
],
31+
"rules": {
32+
"max-params": 0,
33+
"prefer-rest-params": 0,
34+
"import/extensions": 0,
35+
"unicorn/import-index": 0,
36+
"import/no-useless-path-segments": 0
37+
}
38+
},
39+
"devDependencies": {
40+
"@sindresorhus/tsconfig": "^0.7.0",
41+
"ava": "^3.12.1",
42+
"jsdom": "^16.4.0",
43+
"npm-run-all": "^4.1.5",
44+
"sinon": "^9.0.3",
45+
"typescript": "^4.0.2",
46+
"xo": "^0.33.1"
47+
}
5648
}

Diff for: ‎readme.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# delegate-it [![][badge-gzip]][link-bundlephobia]
22

3-
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/delegate-it.svg?label=gzipped
3+
[badge-gzip]: https://img.shields.io/bundlephobia/minzip/delegate-it.svg?label=gzipped
44
[link-bundlephobia]: https://bundlephobia.com/result?p=delegate-it
55

66
> Lightweight event delegation
@@ -32,31 +32,31 @@ import delegate from 'delegate-it';
3232

3333
```js
3434
delegate(document.body, '.btn', 'click', event => {
35-
console.log(event.delegateTarget);
35+
console.log(event.delegateTarget);
3636
});
3737
```
3838

3939
#### With a selector (of existing elements) as base
4040

4141
```js
4242
delegate('.container', '.btn', 'click', event => {
43-
console.log(event.delegateTarget);
43+
console.log(event.delegateTarget);
4444
});
4545
```
4646

4747
#### With an array/array-like of elements as base
4848

4949
```js
5050
delegate(document.querySelectorAll('.container'), '.btn', 'click', event => {
51-
console.log(event.delegateTarget);
51+
console.log(event.delegateTarget);
5252
});
5353
```
5454

5555
### Remove event delegation
5656

5757
```js
5858
const delegation = delegate(document.body, '.btn', 'click', event => {
59-
console.log(event.delegateTarget);
59+
console.log(event.delegateTarget);
6060
});
6161

6262
delegation.destroy();
@@ -67,15 +67,15 @@ delegation.destroy();
6767
If you're using TypeScript and have event types that are custom, you can override the global `GlobalEventHandlersEventMap` interface via declaration merging. e.g. say you have a `types/globals.d.ts` file, you can add the following.
6868

6969
```js
70-
interface GlobalEventHandlersEventMap {
71-
'details:toggle': UIEvent;
70+
interface GlobalEventHandlersEventMap {
71+
'details:toggle': UIEvent;
7272
}
7373
```
7474

7575
In the file that imports `EventType`, you will now be able to set the event type to `'details:toggled'`.
7676

7777
```js
78-
import {EventType} from "delegate-it";
78+
import {EventType} from 'delegate-it';
7979

8080
const someEventType1: EventType = 'details:toggled'; // all good
8181
const someEventType2: EventType = 'click'; // all good

Diff for: ‎test.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import test from 'ava';
22
import sinon from 'sinon';
3-
import {JSDOM} from './test.jsdom.js';
3+
import {createRequire} from 'module';
44
import delegate from './index.js';
55

6+
const require = createRequire(import.meta.url);
7+
export const {JSDOM} = require('jsdom');
8+
69
const {window} = new JSDOM(`
710
<ul>
811
<li><a>Item 1</a></li>
@@ -15,6 +18,7 @@ const {window} = new JSDOM(`
1518

1619
global.Event = window.Event;
1720
global.Element = window.Element;
21+
global.Document = window.Document;
1822
global.document = window.document;
1923
const container = window.document.querySelector('ul');
2024
const anchor = window.document.querySelector('a');

Diff for: ‎test.jsdom.js

-6
This file was deleted.

0 commit comments

Comments
 (0)