Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update examples #83

Closed
wants to merge 3 commits into from
Closed

Update examples #83

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
82be7a9
Updates the examples to reflect recent changes. Also ensures that we …
benlesh Nov 29, 2023
407e2bf
Fix punctuation
benlesh Dec 19, 2023
69869d0
Fix a few errors in the examples.
benlesh Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 198 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,62 +23,88 @@ hard-to-follow callback chains.

```js
// Filtering and mapping:
element
.on('click')
.filter((e) => e.target.matches('.foo'))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.subscribe({ next: handleClickAtPoint });
element.on('click')
.filter(e => e.target.matches('.foo'))
.map(e => ({x: e.clientX, y: e.clientY }))
benlesh marked this conversation as resolved.
Show resolved Hide resolved
.subscribe(({ x, y }) => {
console.log(`Clicked foo at ${x}, ${y}`)
}));
```

<details>
<summary>Imperative version</summary>

```js
element.addEventListener('click', (e) => {
if (e.target.matches('.foo')) {
const { clientX: x, clientY: y } = e;
benlesh marked this conversation as resolved.
Show resolved Hide resolved
console.log(`Clicked foo at ${x}, ${y}`);
}
});
```

</details>

#### Example 2

Automatic, declarative unsubscription via the takeUntil method.

```js
// Automatic, declarative unsubscription via the takeUntil method:
element.on('mousemove')
.takeUntil(document.on('mouseup'))
.subscribe({next: e => … });

// Since reduce and some other terminators return promises, they also play
// well with async functions:
await element.on('mousemove')
.takeUntil(element.on('mouseup'))
.reduce((soFar, e) => …);
const ac = new AbortController();
element
.on('mousemove')
.takeUntil(element.on('mouseup'))
.subscribe(console.log, { signal: ac.signal });
```

<details>
<summary>Imperative version</summary>

```js
// Imperative
const controller = new AbortController();
const ac = new AbortController();
element.addEventListener(
'mousemove',
(e) => {
element.addEventListener('mouseup', (e) => controller.abort());
element.addEventListener('mouseup', (e) => ac.abort(), {
signal: ac.signal,
});
console.log(e);
},
{ signal: controller.signal },
{ signal: ac.signal },
);
```

</details>

#### Example 3

Tracking all link clicks within a container
([example](https://github.com/whatwg/dom/issues/544#issuecomment-351705380)):

```js
let linkClicks = 0;
container
.on('click')
.filter((e) => e.target.closest('a'))
.subscribe({
next: (e) => {
// …
},
.subscribe(() => {
linkClicks++;
});
```

<details>
<summary>Imperative version</summary>

```js
let linkClicks = 0;
container.addEventListener('click', (e) => {
const found = e.target.closest('a');
if (found?.href) {
linkClicks++;
}
});
```

</details>

#### Example 4

Find the maximum Y coordinate while the mouse is held down
Expand All @@ -92,6 +118,31 @@ const maxY = await element
.reduce((soFar, y) => Math.max(soFar, y), 0);
```

<details>
<summary>Imperative version</summary>

```js
const maxY = await new Promise((resolve) => {
let max = 0;
const mouseMoveHandler = (e) => {
max = Math.max(max, e.clientX);
};

element.addEventListener('mousemove', mouseMoveHandler);

element.addEventListener(
'mouseup',
() => {
element.removeEventListener('mousemove', mouseMoveHandler);
resolve(max);
},
{ once: true },
);
});
```

</details>

#### Example 5

Multiplexing a `WebSocket`, such that a subscription message is send on connection,
Expand Down Expand Up @@ -239,10 +290,8 @@ keys
}
})
.filter((matched) => matched)
.subscribe({
next: (_) => {
console.log('Secret code matched!');
},
.subscribe(() => {
console.log('Secret code matched!');
});
```

Expand Down Expand Up @@ -273,6 +322,120 @@ document.addEventListener('keydown', e => {

</details>

#### Example 7

When you mousedown on the document, it will start measuring how far your mouse moves, rendering a
line and some text for how far you've measured, and when you mouse up, will log the final
distance before removing the line.

```js
const measurements = document.on('mousedown').flatMap((e) => {
const { clientX: startX, clientY: startY } = e;
benlesh marked this conversation as resolved.
Show resolved Hide resolved

const svg = document.createElement('svg');
svg.width = window.innerWidth;
svg.height = window.innerHeight;
svg.innerHTML = `
<line x1="${startX}" y1="${startY}" x2="0" y2="0" style="stroke:black;"/>
<text x="0" y="0" fill="black"/>0</text>
`;
const line = svg.querySelector('line');
const text = svg.querySelector('text');
document.body.appendChild(svg);
let dist = 0;

return document
.on('mousemove')
.map((e) => {
const { clientX: endX, clientY: endY } = e;
benlesh marked this conversation as resolved.
Show resolved Hide resolved
const diffX = endX - startX;
const diffY = endY - startY;
const dist = Math.sqrt(diffX ** 2 + diffY ** 2);
return { endX, endY, dist };
})
.takeUntil(document.on('mouseup'))
.do(({ endX, endY, dist }) => {
line.x2 = endX;
line.y2 = endY;
text.textContent = dist;
})
.reduce((_, { dist }) => dist, 0)
.finally(() => {
svg.remove();
});
});

const ac = new AbortController();
measurements.subscribe(
(dist) => {
console.log(`Measured distance: ${dist}`);
},
{ signal: ac.signal },
);

// Tearing everything down later
ac.abort();
```

<details>
<summary>Imperative version</summary>

```js
const ac = new AbortController();
document.addEventListener(
'mousedown',
(e) => {
const { clientX: startX, clientY: startY } = e;

const svg = document.createElement('svg');
svg.width = document.body.width;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #83 (comment)

svg.height = document.body.height;
svg.innerHTML = `
<line x1="${startX}" y1="${startY}" x2="0" y2="0" style="stroke:black;"/>
<text x="0" y="0" fill="black"/>0</text>
`;
const line = svg.querySelector('line');
const text = svg.querySelector('text');
document.body.appendChild(svg);
let dist = 0;

const mouseMoveHandler = (e) => {
const { clientX: endX, clientY: endY } = e;
const diffX = endX - startX;
const diffY = endY - startY;
dist = Math.sqrt(diffX ** 2 + diffY ** 2);
line.x2 = endX;
line.y2 = endY;
text.textContent = dist;
};

document.addEventListener('mousemove', mouseMoveHandler, {
signal: ac.signal,
});

document.addEventListener(
'mouseup',
() => {
document.removeEventListener('mousemove', mouseMoveHandler);
console.log(`Measured distance: ${dist}`);
svg.remove();
},
{ once: true, signal: ac.signal },
);

ac.signal.addEventListener('abort', () => {
svg.remove();
});
},
{ signal: ac.signal },
);

// Tearing everything down later
ac.abort();
```

</details>

### The `Observable` API

Observables are first-class objects representing composable, repeated events.
Expand Down Expand Up @@ -465,19 +628,20 @@ synchronously emits data _during_ subscription:

```js
// An observable that synchronously emits unlimited data during subscription.
let observable = new Observable((subscriber) => {
const observable = new Observable((subscriber) => {
let i = 0;
while (true) {
subscriber.next(i++);
}
});

let controller = new AbortController();
observable.subscribe({
next: (data) => {
const controller = new AbortController();
observable.subscribe(
(data) => {
if (data > 100) controller.abort();
}}, {signal: controller.signal},
});
},
{ signal: controller.signal },
);
```

#### Teardown
Expand Down