@studiometa/js-toolkit 4.0.0-alpha.1 → 4.0.0-alpha.3

package/skills/studiometa-js-toolkit/references/api/services/index.md

@@ -0,0 +1,94 @@
+# Services
+
+A service is a shared source of props that components subscribe to. Every one of them is **lazy and reference-counted**.
+
+## The sources
+
+| Service                                                           | Hook             | Target                             |
+| ----------------------------------------------------------------- | ---------------- | ---------------------------------- |
+| [`useRaf()`](useRaf.md)                                       | `ticked`         | —                                  |
+| [`useScroll(target?)`](useScroll.md)                          | `scrolled`       | an element or the window           |
+| [`useWindowScroll()`](useWindowScroll.md)                     | `scrolled`       | the named default                  |
+| [`useScrollProgress(target, options?)`](useScrollProgress.md) | `scrolledInView` | an element                         |
+| [`useResize(target?)`](useResize.md)                          | `resized`        | an element                         |
+| [`useWindowSize()`](useWindowSize.md)                         | `resized`        | the named default                  |
+| [`usePointer(target?)`](usePointer.md)                        | `moved`          | an element, or the viewport        |
+| [`useDrag(target, options?)`](useDrag.md)                     | `dragged`        | an `HTMLElement` or `SVGElement`   |
+| [`useKey(target?)`](useKey.md)                                | `keyed`          | the document, an element or window |
+| [`useInView(target, init?)`](useInView.md)                    | `intersected`    | an element                         |
+| [`useMutation(target, init?)`](useMutation.md)                | `mutated`        | any node                           |
+| [`useBreakpoint()`](useBreakpoint.md)                         | —                | —                                  |
+| [`useMediaQuery(query)`](useMediaQuery.md)                    | —                | —                                  |
+| [`usePrefersReducedMotion()`](usePrefersReducedMotion.md)     | —                | the named case                     |
+
+`LoadService` is not ported.
+
+## The mixins
+
+[`withRaf`, `withScroll`, `withResize`, `withScrollProgress`, `withPointer`, `withDrag`, `withInView`, `withMutation` and `withKey`](mixins.md) bind one subscription per mount cycle under the one method name the service owns.
+
+## The combinators
+
+- [`toggle(subscribe)`](toggle.md) — a subscription you can switch on and off
+- [`until(service, predicate)`](until.md) — a one-shot wait
+
+## Writing your own
+
+- [`createService(definition)`](createService.md) — the primitive
+- [`perTarget(create, keyOf?)`](perTarget.md) — one instance per target and per options
+- [`createServiceMixin(definition)`](createServiceMixin.md) — the mixin over it
+
+## The service surface
+
+```ts
+interface Service<T, R = void> {
+  subscribe(callback: (props: T) => R, options?: { immediate?: boolean }): () => void;
+  props(): T;
+}
+```
+
+`subscribe()` returns the unsubscribe function. **Lazy and reference-counted**: the source starts on the first subscriber and stops on the last, so with no subscriber there is no listener, no observer and no frame.
+
+**Every prop field is `readonly`, and the props object belongs to its service.** It is valid for the duration of the call that received it — use `{ ...props }` to keep one.
+
+## Asking for the first delivery
+
+```js
+useScroll().subscribe(callback, { immediate: true });
+```
+
+The sources that have a current value honour it. The ones that do not, do nothing, and each service states which it is through `hasProps()`:
+
+| Has a current value between deliveries                   | Does not                                                                                  |
+| -------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| scroll, resize, breakpoint, media query, scroll progress | the frame tick, the pointer before it is seen, a drag outside a gesture, a mutation batch |
+
+Only the new subscriber is called, and the first props of a run carry no movement.
+
+## One instance per target and per options
+
+Keyed in a `WeakMap` by [`perTarget()`](perTarget.md). **The options are read by meaning, not by spelling**: object keys are sorted at every depth and the keys holding `undefined` are dropped, while arrays keep their order.
+
+```js
+// The same service.
+useInView(el, { threshold: 0.5, rootMargin: '0px' });
+useInView(el, { rootMargin: '0px', threshold: 0.5 });
+```
+
+Only what the platform owns needs a key of its own: `useInView()` gives its root a weak id, and `useMutation()` keeps a canonical init for the DOM contract. **Nothing groups observers across targets.**
+
+## Props are flat
+
+**One field per axis, and nothing derivable is a field.** `lastX` is `x - deltaX`; `changedX` is `deltaX !== 0`. The grouped objects of v3 — `last`, `delta`, `max`, `progress`, `direction`, `changed` — are removed.
+
+`directionX` and `directionY` are `-1 | 0 | 1`: one signed value that multiplies.
+
+## No service owns a loop
+
+The raf service and an active drag inertia subscribe to `scheduler.tick()`. The scroll service coalesces its events into one `read` per frame. The resize service is a `ResizeObserver`. See [The scheduler](../../guide/going-further/scheduling-work.md).
+
+## Failures
+
+A subscriber that throws is skipped and reported as `callback.service-failed`. Core dispatches the diagnostic first and calls `reportError()` only when no listener cancelled the event.
+
+Publishing is **re-entrant**, so any code that changes state after a publication checks first that the service is still alive.

package/skills/studiometa-js-toolkit/references/api/services/mixins.md

@@ -0,0 +1,148 @@
+# Service mixins
+
+A mixin binds one subscription per mount cycle, under the **one method name the service owns**.
+
+| Mixin                | Hook             | Service                                           |
+| -------------------- | ---------------- | ------------------------------------------------- |
+| `withRaf`            | `ticked`         | [`useRaf()`](useRaf.md)                       |
+| `withScroll`         | `scrolled`       | [`useScroll()`](useScroll.md)                 |
+| `withResize`         | `resized`        | [`useResize()`](useResize.md)                 |
+| `withPointer`        | `moved`          | [`usePointer()`](usePointer.md)               |
+| `withDrag`           | `dragged`        | [`useDrag()`](useDrag.md)                     |
+| `withKey`            | `keyed`          | [`useKey()`](useKey.md)                       |
+| `withInView`         | `intersected`    | [`useInView()`](useInView.md)                 |
+| `withMutation`       | `mutated`        | [`useMutation()`](useMutation.md)             |
+| `withScrollProgress` | `scrolledInView` | [`useScrollProgress()`](useScrollProgress.md) |
+
+## Two call forms
+
+```ts
+withScroll(BaseClass, options?)   // a mixin
+withScroll(options?)              // a class decorator
+```
+
+```js
+import { Base, withScroll } from '@studiometa/js-toolkit';
+
+class Header extends withScroll(Base) {
+  static config = { name: 'Header' };
+
+  scrolled({ y, directionY }) {
+    this.$el.classList.toggle('is-hidden', directionY > 0 && y > 100);
+  }
+}
+```
+
+```ts
+import { Base, component, withScroll } from '@studiometa/js-toolkit';
+
+@component({ name: 'Header' })
+@withScroll()
+class Header extends Base {
+  scrolled() {}
+}
+```
+
+**The mixin is the primitive**, because it needs no build step. The decorator is sugar over it.
+
+## Stacking
+
+```js
+import { Base, withRaf, withResize } from '@studiometa/js-toolkit';
+
+class Parallax extends withRaf(withResize(Base)) {
+  static config = { name: 'Parallax' };
+
+  resized({ height }) {}
+
+  ticked({ delta }) {}
+}
+```
+
+`$services` keys accumulate through the intersection, so `$services.ticked` and `$services.resized` both complete.
+
+## Options
+
+```ts
+interface ServiceMixinOptions<Target, Host = Base> {
+  target?: (instance: Host) => Target;
+  manual?: boolean;
+  immediate?: boolean;
+}
+```
+
+**The options of a mixin are not the options of the service.** `target`, `manual` and `immediate` describe the subscription; they are removed before the `use*()` call and they are absent from its options type. A service's own options go in the same object and are forwarded:
+
+```js
+withDrag(Base, { axis: 'x', inertia: false, immediate: true, manual: true });
+```
+
+### `target`
+
+```js
+withScroll(Base, { target: (instance) => instance.$refs.scroller });
+```
+
+A resolver that comes back with `undefined` or `null` reports `service.missing-target` and starts **no** subscription — because a renamed ref arrives here as nothing, and a service with a default target would otherwise observe the wrong thing and look like it worked.
+
+A service whose **own** default target is nothing, like `withRaf`, is untouched: that is its contract, and only a caller's resolver can be wrong about it.
+
+**The resolver is typed against the host as declared**
+
+A mixin is applied while the extends clause of its class is still being evaluated, so `withDrag(Base, …)` types its resolver against `Base`. A component reaching further names the shape it needs — `(instance as Base & { readonly target: HTMLElement }).target` — which is an assertion rather than a check. v3 wrote the same line as an `@ts-expect-error`. That is why core checks the result at runtime.
+
+### `manual`
+
+Declares the hook without running it, and `$services.<hook>` becomes the switch:
+
+```js
+import { Base, withRaf } from '@studiometa/js-toolkit';
+
+class SliderItem extends withRaf(Base, { manual: true }) {
+  static config = { name: 'SliderItem' };
+
+  ticked({ delta }) {}
+
+  onSelected() {
+    this.$services.ticked.start();
+  }
+
+  onSettled() {
+    this.$services.ticked.stop();
+  }
+}
+```
+
+Each handle is a [`Toggle`](toggle.md): `start()` is idempotent and `stop()` is safe to repeat.
+
+### `immediate`
+
+Asks for the first delivery at subscribe time. `withInView` defaults it to `true`.
+
+## It never occupies a lifecycle hook
+
+`mounted()` and `unmounted()` belong to the component author, so **nothing has to be chained**. A class that mixes a service in and writes its own `mounted()` without `super.mounted()` still subscribes: the framework's own `$mount()`/`$unmount()` pair carries the subscription.
+
+- The subscription starts **once the whole of `mounted()` has run** — including an `immediate` first delivery, which therefore reaches a component that is fully set up.
+- It is released **before `unmounted()`**, exactly where the mount cleanup used to release it.
+- `$unmount()` releases unconditionally, so a manual subscription started outside a mount cycle is released too.
+
+**A userland mixin still chains**
+
+The rule is about what the mixin **overrides**, not who wrote it. A mixin that puts its work in `mounted()` needs its subclasses to call `super.mounted()` — and the way not to need that is to override `$mount()`. See [`createServiceMixin()`](createServiceMixin.md).
+
+## One hook per class, and that is the limit
+
+A mixin binds one subscription, under one name, for each mount cycle. There is **no `hook` option**.
+
+A component whose subscriptions are **one per markup declaration** — one per attribute, with its own modifiers and its own threshold, known only when the element is read — has no method to name and no fixed count. It subscribes itself:
+
+```js
+mounted() {
+  return useScroll(this.$refs.panel).subscribe((props) => {});
+}
+```
+
+`on<Event>` has the same shape: a handler name belongs to the class, while a set of events can be data. Both sugars are keyed on a name a class declares, and both leave the same escape open — bind it yourself, own the cleanup.
+
+Neither limit is about a build step: `withRaf(Base)` is an ordinary call, and the name is fixed by how the class is written.

package/skills/studiometa-js-toolkit/references/api/services/perTarget.md

@@ -0,0 +1,65 @@
+# perTarget
+
+```ts
+perTarget<Target extends WeakKey, Args extends unknown[], T, R = void>(
+  create: (target: Target, ...args: Args) => Service<T, R>,
+  keyOf?: (...args: Args) => string,
+): (target: Target, ...args: Args) => Service<T, R>
+```
+
+Gives a service factory the **one instance per target and per options** caching every built-in service has.
+
+## Usage
+
+```ts
+import { createService, perTarget } from '@studiometa/js-toolkit';
+
+interface FocusProps {
+  readonly hasFocus: boolean;
+}
+
+const useFocus = perTarget((target: Element) =>
+  createService<FocusProps>({
+    props: () => ({ hasFocus: target.contains(document.activeElement) }),
+    start(emit) {
+      const publish = () => emit({ hasFocus: target.contains(document.activeElement) });
+      document.addEventListener('focusin', publish);
+      document.addEventListener('focusout', publish);
+      return () => {
+        document.removeEventListener('focusin', publish);
+        document.removeEventListener('focusout', publish);
+      };
+    },
+  }),
+);
+
+// The same service, twice.
+useFocus(document.body);
+useFocus(document.body);
+```
+
+## The key is read by meaning, not by spelling
+
+`perTarget()` **sorts object keys at every depth and drops the keys holding `undefined`**. Arrays keep their order.
+
+```js
+// One service.
+useInView(el, { threshold: 0.5, rootMargin: '0px' });
+useInView(el, { rootMargin: '0px', threshold: 0.5 });
+useInView(el, { threshold: 0.5, rootMargin: '0px', root: undefined });
+```
+
+That is deliberate: two callers who mean the same thing should share a source, and an options object written in a different order means the same thing.
+
+## When you need a `keyOf`
+
+Only what the **platform** owns:
+
+- `useInView()` gives an object root a stable weak identity, because an element cannot be serialized into a key.
+- `useMutation()` keeps a canonical init, because the DOM's own rules about which fields imply which are not a plain sort.
+
+Everything else is covered by the default.
+
+## The target is a `WeakKey`
+
+The cache is a `WeakMap`, so a target that is collected takes its entry with it. Nothing has to be cleaned up, and **nothing groups observers across targets**.

package/skills/studiometa-js-toolkit/references/api/services/toggle.md

@@ -0,0 +1,80 @@
+# toggle
+
+```ts
+toggle(subscribe: () => Unsubscribe): Toggle
+```
+
+Turns anything that returns its own unsubscribe function into a switch.
+
+```ts
+interface Toggle {
+  readonly isActive: boolean;
+  start: () => void;
+  stop: () => void;
+}
+```
+
+`start` and `stop` are **bound**, so each is a callback as it is.
+
+## Usage
+
+```js
+import { Base, toggle, useRaf } from '@studiometa/js-toolkit';
+
+class SliderItem extends Base {
+  static config = { name: 'SliderItem' };
+
+  #frame = toggle(() => useRaf().subscribe(({ delta }) => this.follow(delta)));
+
+  mounted() {
+    // `stop` is bound, so it is a cleanup as it is.
+    return this.#frame.stop;
+  }
+
+  follow(delta) {}
+
+  onIndexChange() {
+    this.#frame.start();
+  }
+
+  onSettled() {
+    this.#frame.stop();
+  }
+}
+```
+
+`start()` is idempotent and `stop()` is safe to repeat.
+
+## What it works on
+
+Anything whose subscribe call returns a release:
+
+```js
+import { signal, toggle, useScroll } from '@studiometa/js-toolkit';
+
+const count = signal(0);
+const el = document.body;
+
+// a service
+toggle(() => useScroll().subscribe(() => {}));
+
+// a signal
+toggle(() => count.subscribe(() => {}));
+
+// a bare listener
+toggle(() => {
+  const handler = () => {};
+  el.addEventListener('click', handler);
+  return () => el.removeEventListener('click', handler);
+});
+```
+
+It knows nothing about `Base`, so it works outside a component too.
+
+## Why it exists
+
+The scheduler has no permanent rAF loop: it requests the next frame while a tick subscriber stays. So **a component that needs the loop for part of a cycle should not hold a subscription for the whole cycle** — and hand-rolling "unsubscribe if subscribed, and remember which" at every call site is the bug this removes.
+
+`{ manual: true }` on a service mixin gives you the same object under `$services.<hook>`. See [Mixins](mixins.md#manual).
+
+`smoothTo()` is a `toggle()` over `useRaf()`: one subscription however many times the target is set, started when the value has somewhere to go, released when it arrives.

package/skills/studiometa-js-toolkit/references/api/services/until.md

@@ -0,0 +1,44 @@
+# until
+
+```ts
+until<T>(service: Service<T>, predicate: (props: T) => boolean): Promise<T>
+```
+
+A one-shot wait on a service.
+
+## Usage
+
+```ts
+import { until, useScroll } from '@studiometa/js-toolkit';
+
+async function afterScroll() {
+  const props = await until(useScroll(), ({ isScrolling }) => !isScrolling);
+  return props.y;
+}
+```
+
+**Parameters**
+
+- `service` — a `Service<T>`, and nothing else.
+- `predicate` — called with each update.
+
+**Return value**
+
+- a promise resolving with **a copy of the props** on the first update that matches.
+
+## The contract
+
+- It **releases the subscription before it resolves**, so an awaiting caller never holds a source open.
+- It resolves with a copy, because the props object belongs to its service and is only valid for the duration of the call that received it.
+- **It resolves on the current props when they already match**, through the service's `hasProps()` — so `await until(useScroll(), ({ isScrolling }) => !isScrolling)` on a still page returns immediately rather than waiting for a scroll that never comes.
+
+## When to reach for it
+
+When the code reads as a step in a sequence rather than a reaction:
+
+```js
+await until(useScroll(), ({ isScrolling }) => !isScrolling);
+this.measure();
+```
+
+For a reaction, subscribe. For an ongoing condition, subscribe and act on each delivery.

package/skills/studiometa-js-toolkit/references/api/services/useBreakpoint.md

@@ -0,0 +1,42 @@
+# useBreakpoint
+
+```ts
+useBreakpoint(): Service<{ readonly name: string }>
+```
+
+The active breakpoint name, as a service. It is its **own source** — it is not derived from a resize.
+
+## Usage
+
+```js
+import { useBreakpoint } from '@studiometa/js-toolkit';
+
+const unsubscribe = useBreakpoint().subscribe(({ name }) => {
+  document.documentElement.dataset.breakpoint = name;
+});
+```
+
+## Why it is not part of the resize service
+
+It is backed by `matchMedia` `change` listeners, so it emits **on crossings** and it reports a change of the reader's font size — which a `ResizeObserver` on a box cannot see.
+
+The values are in `rem`, and in a media query `rem` resolves against the **initial** font size, not against the root element.
+
+`ResizeProps` therefore dropped `breakpoints` and `activeBreakpoints`: they were a different measurement wearing the same shape.
+
+## The named set
+
+See [Breakpoints](../dom/breakpoints.md) for `BREAKPOINTS`, `getBreakpoints()` and `setBreakpoints()`.
+
+`setBreakpoints()` replaces the set and emits at once. The `MediaQueryList` objects are built once, and the active name is memoised for the length of one task — `setBreakpoints()` and the `change` handler of a running service clear that memo immediately.
+
+## Who else uses it
+
+- Every responsive **option** resolves through the same active-name read, but a `matchMedia` subscription only opens for a component that declares [`option<Name>Changed()`](../methods-hooks-options.md).
+- Connected elements with a scoped `data-component` declaration share **one** reference-counted subscription to this service. A page with plain declarations opens none.
+
+The breakpoint service is part of the core graph on every page. What it costs is a subscription, and a page that asks for nothing opens none.
+
+## `{ immediate: true }` works here
+
+There is always a current breakpoint.

package/skills/studiometa-js-toolkit/references/api/services/useDrag.md

@@ -0,0 +1,119 @@
+# useDrag
+
+```ts
+useDrag(target: HTMLElement | SVGElement, options?: DragOptions): Service<DragProps>
+```
+
+A drag gesture, with an optional inertia phase.
+
+## Props
+
+```ts
+interface DragProps {
+  readonly mode: DragMode;
+  readonly x: number;
+  readonly y: number;
+  readonly deltaX: number;
+  readonly deltaY: number;
+  readonly originX: number;
+  readonly originY: number;
+  readonly distanceX: number;
+  readonly distanceY: number;
+  readonly finalX: number;
+  readonly finalY: number;
+}
+```
+
+`isGrabbing`, `hasInertia` and `target` are removed, and `props.MODES` with them.
+
+## The modes
+
+```js
+import { DRAG_MODES } from '@studiometa/js-toolkit';
+
+DRAG_MODES.IDLE; // 'idle'
+DRAG_MODES.START; // 'start'
+DRAG_MODES.DRAG; // 'drag'
+DRAG_MODES.DROP; // 'drop'
+DRAG_MODES.INERTIA; // 'inertia'
+DRAG_MODES.STOP; // 'stop'
+```
+
+`idle` is new in v4. `DragMode` is derived from the frozen object — that is the pattern for every closed set of strings in the framework.
+
+## Options
+
+```ts
+interface DragOptions {
+  axis?: 'x' | 'y' | 'both';
+  dampFactor?: number;
+  dragThreshold?: number;
+  inertia?: boolean;
+}
+```
+
+The v3 spelling `dragTreshold` is fixed.
+
+## Usage
+
+```js
+import { Base, DRAG_MODES, useDrag } from '@studiometa/js-toolkit';
+
+class Slide extends Base {
+  static config = { name: 'Slide' };
+
+  mounted() {
+    return useDrag(this.$el, { axis: 'x' }).subscribe(({ mode, x, finalX }) => {
+      if (mode === DRAG_MODES.DROP) {
+        this.settle(finalX);
+        return;
+      }
+      this.$el.style.transform = `translateX(${x}px)`;
+    });
+  }
+
+  settle(x) {}
+}
+```
+
+## A gesture the browser can steal is not a gesture
+
+`useDrag` owns both axes by default and writes `touch-action: none`.
+
+| `axis`   | writes  | and                           |
+| -------- | ------- | ----------------------------- |
+| `'both'` | `none`  | —                             |
+| `'x'`    | `pan-y` | every Y movement prop is zero |
+| `'y'`    | `pan-x` | every X movement prop is zero |
+
+It writes **only when the computed value is `auto`**, and it restores the previous inline value when the last service of those options leaves. Services on one target share that ownership.
+
+The click that ends a drag is suppressed from a flag that movement on the owned axis arms and the next `pointerdown` disarms — and only for a **trusted** click with a non-zero `detail`.
+
+## Inertia
+
+With `{ inertia: false }` a drag publishes the **exact projected destination** at `drop`, then goes through `stop` to `idle` with no tick subscription at all.
+
+With inertia, the coast subscribes to `scheduler.tick()`. Decay is expressed in time, not in frames:
+
+- `INERTIA_FRAME` (16.67 ms) is the reference of every factor;
+- `inertiaStep()` integrates the decay across the step, so any sequence of frames sums to `velocity · τ` exactly;
+- the settle position is `value + velocity · τ` with `τ = INERTIA_FRAME / ln(1 / damp)`.
+
+The velocity is sampled as a distance over the interval between events, smoothed, with the interval clamped at both ends. **At the drop, the velocity is decayed by the idle time through the same law** — so a pointer that stopped moving before release does not fling.
+
+## Keying
+
+`useDrag()` keys its axis, inertia, damping and threshold, so two callers asking for the same gesture on the same element share one service. See [`perTarget()`](perTarget.md).
+
+## `{ immediate: true }`
+
+Does nothing outside a gesture: there is no current value between gestures.
+
+## Mixin
+
+```js
+class Slide extends withDrag(Base, { axis: 'x', inertia: false }) {
+  dragged({ mode, x }) {}
+}
+```

package/skills/studiometa-js-toolkit/references/api/services/useInView.md

@@ -0,0 +1,64 @@
+# useInView
+
+```ts
+useInView(target: Element, init?: IntersectionObserverInit): Service<InViewProps>
+```
+
+An `IntersectionObserver` as a service.
+
+## Props
+
+```ts
+interface InViewProps {
+  readonly isInView: boolean;
+  readonly entry: IntersectionObserverEntry | null;
+}
+```
+
+## Usage
+
+```js
+import { Base, useInView } from '@studiometa/js-toolkit';
+
+class Reveal extends Base {
+  static config = { name: 'Reveal' };
+
+  mounted() {
+    return useInView(this.$el, { threshold: 0.25 }).subscribe(({ isInView }) => {
+      this.$el.classList.toggle('is-in-view', isInView);
+    });
+  }
+}
+```
+
+## Keying
+
+`useInView()` keys **every `IntersectionObserverInit` field**, and gives an object root a stable weak identity so two callers passing the same root element share one service.
+
+The options are read by meaning, not by spelling: keys are sorted at every depth and the ones holding `undefined` are dropped, so `{ threshold: 0.5, rootMargin: '0px' }` and `{ rootMargin: '0px', threshold: 0.5 }` are the same service.
+
+**Nothing groups observers across targets.**
+
+## `{ immediate: true }` is the default here
+
+`withInView` defaults it to `true`, because "am I in view" has a current answer and a consumer that has to wait for the first crossing to find out would be wrong on load.
+
+## This is not a mount strategy
+
+`useInView` and `withInView` observe a component that is **already mounted**. They do not replace `data-mount="visible"` or `data-mount="in-view"`, which decide whether the instance exists at all.
+
+| Want                                           | Use                          |
+| ---------------------------------------------- | ---------------------------- |
+| the component to exist only once seen          | `data-mount="visible"`       |
+| the component to come and go with the viewport | `data-mount="in-view"`       |
+| a mounted component to react to crossings      | `useInView()` / `withInView` |
+
+See [Mount strategies](../../guide/going-further/mount-strategies.md).
+
+## Mixin
+
+```js
+class Reveal extends withInView(Base, { threshold: 0.25 }) {
+  intersected({ isInView }) {}
+}
+```