nanoeffects 0.31.2 → 0.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{action-creator-6rlBTmH9.d.ts → action-creator-DprJV-pN.d.ts} +6 -2
- package/dist/actions.d.ts +3 -3
- package/dist/actions.js +1 -1
- package/dist/{bus-DFlmNJ6h.js → bus-Cmk4U1hQ.js} +1 -1
- package/dist/caller-DULg_ZYV.js +1 -0
- package/dist/context-Dp_QRXzb.js +1 -0
- package/dist/{context-types-DKNc5mkS.d.ts → context-types-BiTMp_lW.d.ts} +1 -1
- package/dist/context.d.ts +2 -2
- package/dist/dev.d.ts +2 -2
- package/dist/dev.js +2 -2
- package/dist/effects.d.ts +2 -2
- package/dist/effects.js +1 -1
- package/dist/guard.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/match.d.ts +1 -1
- package/dist/match.js +1 -1
- package/dist/{module-G39MaVOt.d.ts → module-DPKjzfRk.d.ts} +2 -2
- package/dist/notrace/{action-creator-BrMSO3RP.d.ts → action-creator-BWd9FWt6.d.ts} +2 -2
- package/dist/notrace/actions.d.ts +2 -2
- package/dist/notrace/actions.js +1 -1
- package/dist/notrace/effects.d.ts +2 -2
- package/dist/notrace/index.d.ts +1 -1
- package/dist/notrace/{plugin-7GUL2EW5.d.ts → plugin-DmAYT3Xk.d.ts} +1 -1
- package/dist/notrace/policies.d.ts +1 -1
- package/dist/notrace/redux.d.ts +1 -1
- package/dist/observable.d.ts +1 -1
- package/dist/oop.d.ts +1 -1
- package/dist/oop.js +1 -1
- package/dist/{plugin-BWNP23hr.d.ts → plugin-2d3uuW7o.d.ts} +2 -2
- package/dist/policies.d.ts +2 -2
- package/dist/policies.js +1 -1
- package/dist/react.d.ts +2 -2
- package/dist/react.js +1 -1
- package/dist/redux.d.ts +1 -1
- package/dist/scope.d.ts +2 -2
- package/dist/signal.d.ts +2 -2
- package/dist/signal.js +1 -1
- package/dist/svelte.d.ts +1 -1
- package/dist/testing.d.ts +80 -0
- package/dist/testing.js +1 -0
- package/dist/trace.d.ts +39 -3
- package/dist/trace.js +3 -3
- package/dist/tracer-mMDm5yE7.js +2 -0
- package/dist/{types-N_cdRr1r.d.ts → types-DxPZDzZG.d.ts} +2 -2
- package/dist/vue.d.ts +1 -1
- package/dist/{with-policy-CeM1rtES.js → with-policy-BmL0eRU3.js} +1 -1
- package/dist/{with-policy-CthiBp_z.d.ts → with-policy-Y12d-yx6.d.ts} +1 -1
- package/docs/debugging-compared.md +136 -0
- package/docs/migrating-from-rxjs.md +1 -1
- package/docs/package.md +1 -0
- package/docs/recipes.md +35 -0
- package/docs/ru/debugging-compared.md +136 -0
- package/docs/ru/migrating-from-rxjs.md +1 -1
- package/docs/ru/package.md +1 -0
- package/docs/ru/recipes.md +35 -0
- package/docs/ru/testing.md +92 -0
- package/docs/ru/tracing.md +85 -1
- package/docs/testing.md +92 -0
- package/docs/tracing.md +85 -1
- package/llms-full.txt +358 -2
- package/llms.txt +2 -0
- package/package.json +12 -3
- package/dist/context-B5Z2RpJt.js +0 -1
package/llms-full.txt
CHANGED
|
@@ -581,6 +581,7 @@ Each task below starts with the problem, then a short solution. Where the page h
|
|
|
581
581
|
- [Do not leave subscriptions after a widget closes](#do-not-leave-subscriptions-after-a-widget-closes)
|
|
582
582
|
- [Stop work on a server](#stop-work-on-a-server)
|
|
583
583
|
- [Debugging: what ran and why](#debugging-what-ran-and-why)
|
|
584
|
+
- [Test a policy with fake timers](#test-a-policy-with-fake-timers)
|
|
584
585
|
- [Other libraries in the project](#other-libraries-in-the-project)
|
|
585
586
|
- [Classes and TypeScript](#classes-and-typescript)
|
|
586
587
|
- [Use the bus in a class](#use-the-bus-in-a-class)
|
|
@@ -1032,6 +1033,40 @@ bus.emit("search", "nano"); // the log shows: search · emit, then results · em
|
|
|
1032
1033
|
|
|
1033
1034
|
More: [Trace tasks](tracing.md). To reload modules without a page refresh, see [Hot reload](hmr.md).
|
|
1034
1035
|
|
|
1036
|
+
## Test a policy with fake timers
|
|
1037
|
+
|
|
1038
|
+
A test of `latest` or `debounce` is full of `advanceTimersByTime` numbers, and nobody can tell from them what the test proves. Write the emits and the phases as diagrams instead.
|
|
1039
|
+
|
|
1040
|
+
```js
|
|
1041
|
+
import { it, vi } from "vitest";
|
|
1042
|
+
import { latest } from "nanoeffects/policies";
|
|
1043
|
+
import { createMarbleBus, fakeTimersClock } from "nanoeffects/testing";
|
|
1044
|
+
|
|
1045
|
+
// a search that takes 50 ms
|
|
1046
|
+
function search(query) {
|
|
1047
|
+
return new Promise((resolve) => setTimeout(resolve, 50));
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
it("latest cancels the search that is running", async () => {
|
|
1051
|
+
vi.useFakeTimers();
|
|
1052
|
+
|
|
1053
|
+
// createMarbleBus: a bus that records its trace; a frame is 10 ms
|
|
1054
|
+
const marbles = createMarbleBus({ clock: fakeTimersClock(vi) });
|
|
1055
|
+
marbles.bus.on("search/changed", latest(search), { traceId: "search" });
|
|
1056
|
+
|
|
1057
|
+
// "a-b": two emits, at frame 0 and frame 2
|
|
1058
|
+
const result = await marbles.run({
|
|
1059
|
+
emits: { "search/changed": { marble: "a-b" } },
|
|
1060
|
+
frames: 12,
|
|
1061
|
+
});
|
|
1062
|
+
|
|
1063
|
+
// s start, c cancel, d done
|
|
1064
|
+
result.expect({ "search/changed:latest": "s-(cs)----d----" });
|
|
1065
|
+
});
|
|
1066
|
+
```
|
|
1067
|
+
|
|
1068
|
+
More: [Test time with diagrams](testing.md).
|
|
1069
|
+
|
|
1035
1070
|
## Other libraries in the project
|
|
1036
1071
|
|
|
1037
1072
|
- **Redux Toolkit, Zustand, MobX or Pinia.** [Connect a store](stores.md).
|
|
@@ -1287,6 +1322,7 @@ Each row is optional. The "when" column says what need brings you to it.
|
|
|
1287
1322
|
| `nanoeffects/vue` | `vuePlugin`: adds `watchEmitter` and `useEventRef` to a bus (needs Vue 3.3 or newer) | Vue components |
|
|
1288
1323
|
| `nanoeffects/dev` | `devPlugin` (no-op in production), `getLostSignalsCount` and `getLostSignals` for tests | you look for leaks and lost signals in development and in tests |
|
|
1289
1324
|
| `nanoeffects/trace` | `createTracer`, the loggers (`graphLogger` finds event loops) and `tracePlugin` (names for the trace) | you want to see what ran and why |
|
|
1325
|
+
| `nanoeffects/testing` | `createMarbleBus`, `fakeTimersClock`: a bus for tests, with emits and phases as diagrams | you test `latest`, `debounce`, `queue`, `retry` or `timeout` with fake timers |
|
|
1290
1326
|
| `nanoeffects/guard` | `loopGuardPlugin`: refuses the emit that would pass a limit of a chain | a loop must not take the app down |
|
|
1291
1327
|
|
|
1292
1328
|
The `...Plugin` names above are used with `bus.use`. [Plugins](plugins.md) lists all of them, what each returns, and the order to use them in.
|
|
@@ -7317,7 +7353,7 @@ The subscription is not tied to a task. Call `subscription.unsubscribe()` when t
|
|
|
7317
7353
|
- **Abort replaces unsubscribe for work in flight.** A stopped task is stopped through its `signal`. Pass it to `fetch` or to the client.
|
|
7318
7354
|
- **Errors are not part of the stream.** A failed task rejects its own promise. Without `onError` on the bus nobody else hears it ([Errors](errors.md)).
|
|
7319
7355
|
- **No completion.** An event bus does not end. A task ends when its work ends or its signal aborts.
|
|
7320
|
-
- **
|
|
7356
|
+
- **Marble tests are a smaller tool.** [`createMarbleBus`](testing.md) writes the emits and the phases of tasks as diagrams on fake timers. It has no hot or cold sources and no `|`.
|
|
7321
7357
|
|
|
7322
7358
|
---
|
|
7323
7359
|
Source: docs/semantics.md
|
|
@@ -7695,6 +7731,102 @@ test("a newer search stops the older one at every step", async () => {
|
|
|
7695
7731
|
- **A handler that never emits.** `devPlugin` sees a lost signal by an emit after the cancel; a handler that only writes elsewhere is seen by the linter alone.
|
|
7696
7732
|
- **Shadowed names.** The rule uses no scope analysis, so an inner variable named `signal` can hide a lost signal.
|
|
7697
7733
|
|
|
7734
|
+
---
|
|
7735
|
+
Source: docs/testing.md
|
|
7736
|
+
|
|
7737
|
+
# Test time with diagrams
|
|
7738
|
+
|
|
7739
|
+
> **Level B.** Read first: [Policies](policies.md).
|
|
7740
|
+
|
|
7741
|
+
A test of `latest`, `debounce`, `queue`, `retry` or `timeout` is a test of time. With fake timers the time hides in numbers (`advanceTimersByTime(30)`), and you check a list of calls by hand. This page shows how to write the schedule and the expectation as two short diagrams, as RxJS marble tests do.
|
|
7742
|
+
|
|
7743
|
+
You need a test runner with fake timers (Vitest or Jest). The helper does not import one.
|
|
7744
|
+
|
|
7745
|
+
## Test a policy with a diagram
|
|
7746
|
+
|
|
7747
|
+
**Problem.** You want a test that says: a second search cancels the first one, and only the second finishes.
|
|
7748
|
+
|
|
7749
|
+
**When.** A policy or an effect decides what runs when, and the answer depends on the time between events.
|
|
7750
|
+
|
|
7751
|
+
1. Create a bus with `createMarbleBus`. It records the trace of its tasks and gives you `run`.
|
|
7752
|
+
2. Register the handler on `marbles.bus`, as you do in your app.
|
|
7753
|
+
3. Call `run` with a diagram of the emits. One character is one frame (10 ms by default).
|
|
7754
|
+
4. Call `expect` with a diagram of the phases that you expect.
|
|
7755
|
+
|
|
7756
|
+
```js
|
|
7757
|
+
// search.test.js
|
|
7758
|
+
import { it, vi } from "vitest";
|
|
7759
|
+
import { latest } from "nanoeffects/policies";
|
|
7760
|
+
import { createMarbleBus, fakeTimersClock } from "nanoeffects/testing";
|
|
7761
|
+
|
|
7762
|
+
// a search that takes 50 ms
|
|
7763
|
+
function search(query) {
|
|
7764
|
+
return new Promise((resolve) => setTimeout(resolve, 50));
|
|
7765
|
+
}
|
|
7766
|
+
|
|
7767
|
+
it("latest cancels the search that is running", async () => {
|
|
7768
|
+
vi.useFakeTimers();
|
|
7769
|
+
|
|
7770
|
+
// createMarbleBus: a bus that records its trace, and a run that moves time frame by frame
|
|
7771
|
+
const marbles = createMarbleBus({ clock: fakeTimersClock(vi) });
|
|
7772
|
+
|
|
7773
|
+
// latest: a new search cancels the one that is running
|
|
7774
|
+
marbles.bus.on("search/changed", latest(search), { traceId: "search" });
|
|
7775
|
+
|
|
7776
|
+
// "a-b": emit "x" at frame 0 and "xy" at frame 2
|
|
7777
|
+
const result = await marbles.run({
|
|
7778
|
+
emits: { "search/changed": { marble: "a-b", values: { a: "x", b: "xy" } } },
|
|
7779
|
+
frames: 12,
|
|
7780
|
+
});
|
|
7781
|
+
|
|
7782
|
+
// s start, c cancel, d done: at frame 2 the second search cancels the first, and it is done at frame 7
|
|
7783
|
+
result.expect({ "search/changed:latest": "s-(cs)----d----" });
|
|
7784
|
+
});
|
|
7785
|
+
```
|
|
7786
|
+
|
|
7787
|
+
When a row differs, `expect` throws an error with both diagrams one under the other:
|
|
7788
|
+
|
|
7789
|
+
```
|
|
7790
|
+
marble row "search/changed:latest" differs
|
|
7791
|
+
expected s-(cs)----d----
|
|
7792
|
+
received s-(cs)---d-----
|
|
7793
|
+
```
|
|
7794
|
+
|
|
7795
|
+
The same test for `queue` and `debounce` is in [`examples/testing`](../examples/testing). Run it with `pnpm vitest run examples/testing`.
|
|
7796
|
+
|
|
7797
|
+
## Read the diagrams
|
|
7798
|
+
|
|
7799
|
+
A diagram has one character, or one group in parentheses, for each frame.
|
|
7800
|
+
|
|
7801
|
+
| Character | In `emits` | In the result |
|
|
7802
|
+
| --------- | ---------- | ------------- |
|
|
7803
|
+
| `-` | nothing happens | nothing happens |
|
|
7804
|
+
| a letter or digit | emits the event with `values[character]` (the character itself without `values`) | `s` start, `d` done, `e` error, `c` cancel, `x` drop |
|
|
7805
|
+
| `(ab)` | two emits in one frame, in this order | two phases in one frame, in the order they happened |
|
|
7806
|
+
|
|
7807
|
+
Other characters (`|`, spaces) throw an error that names the diagram and the position.
|
|
7808
|
+
|
|
7809
|
+
A task has a row in the result named `type:effect`: `search/changed:latest` is the task of the `latest` policy, `search:run` is the listener named `search`. Call `result.rows()` to print every row, then copy the ones you want into `expect`. In `expect` you can write the effect alone (`latest`) when one row has it. If two rows have it, the error asks for the full key.
|
|
7810
|
+
|
|
7811
|
+
## Set the frame and the number of frames
|
|
7812
|
+
|
|
7813
|
+
A frame is 10 ms. Pass `frame` to `createMarbleBus` to change it. The frame of an event is its time divided by the frame, rounded down: a timer of 100 ms that starts at frame 0 ends in frame 10, so `frames` must be 11 or more to show it.
|
|
7814
|
+
|
|
7815
|
+
`frames` is the number of frames to run. Without it the helper runs as many as the longest `emits` diagram has. Work that outlives the diagram is cut, so set `frames` when a handler takes time.
|
|
7816
|
+
|
|
7817
|
+
## Use another clock
|
|
7818
|
+
|
|
7819
|
+
`fakeTimersClock(vi)` moves fake timers and reads `Date.now()`. A test turns fake timers on itself (`vi.useFakeTimers()`) and leaves `Date` faked, which is the default. Jest works the same way: `fakeTimersClock(jest)`.
|
|
7820
|
+
|
|
7821
|
+
Any object with `advance(ms)` and `now()` is a clock. `advance` may return a promise.
|
|
7822
|
+
|
|
7823
|
+
## Know what is not there
|
|
7824
|
+
|
|
7825
|
+
- **It needs a tracer.** The helper reads the trace of the bus, so there is no `notrace` build of `nanoeffects/testing`.
|
|
7826
|
+
- **One row for all calls.** Two calls of one listener share a row, so `(sd)` shows the order in which phases happened, not which call they belong to.
|
|
7827
|
+
- **No payloads in diagrams.** The diagram shows when, not what. Check the values with your test runner as usual.
|
|
7828
|
+
- **Not the RxJS alphabet.** There are no hot or cold sources and no `|` for the end of a stream.
|
|
7829
|
+
|
|
7698
7830
|
---
|
|
7699
7831
|
Source: docs/tracing.md
|
|
7700
7832
|
|
|
@@ -7713,6 +7845,8 @@ Tracing is optional. A bus works the same without it, and it costs almost nothin
|
|
|
7713
7845
|
- [Show which subscription began a chain](#show-which-subscription-began-a-chain)
|
|
7714
7846
|
- [Follow one flow with a traceGroupId](#follow-one-flow-with-a-tracegroupid)
|
|
7715
7847
|
- [Name a listener](#name-a-listener)
|
|
7848
|
+
- [List who listens](#list-who-listens)
|
|
7849
|
+
- [Find the line of a listener](#find-the-line-of-a-listener)
|
|
7716
7850
|
- [Keep the chain: `ctx.emit`, not `bus.emit`](#keep-the-chain-ctxemit-not-busemit)
|
|
7717
7851
|
- [Turn the names off](#turn-the-names-off)
|
|
7718
7852
|
- [Use built-in loggers](#use-built-in-loggers)
|
|
@@ -7886,7 +8020,7 @@ The emitters take it too: `useEmitter(cartChanged, cart, { traceId: "Cart", trac
|
|
|
7886
8020
|
|
|
7887
8021
|
**When.** An event has more than one listener and you read the trace to see which one did the work.
|
|
7888
8022
|
|
|
7889
|
-
|
|
8023
|
+
A listener is named by its function when you register one with a name (`function saveName() {}`), so a log of an app that nobody annotated is already readable. An inline arrow has no name and stays as it is. To choose the name, or to name an arrow, give the listener a `traceId` when you register it; it wins over the function name. The plugin makes each call of a named listener a task with that name, and what it emits with `ctx.emit` is below it. A minifier can shorten function names in a production build: use `traceId` where a name must stay stable, and for a handler that a policy returns (`latest(fn)`), which has no name of its own. `off` works as before. It also works in a module (`m.on(event, handler, { traceId })`) and on an instance made by `extendBus`.
|
|
7890
8024
|
|
|
7891
8025
|
```js
|
|
7892
8026
|
import { createBus } from "nanoeffects";
|
|
@@ -7909,6 +8043,88 @@ bus.once("name/changed", (name) => console.log(name), { traceId: "auditLog" });
|
|
|
7909
8043
|
[nanoeffects] saveNotifier · run done
|
|
7910
8044
|
```
|
|
7911
8045
|
|
|
8046
|
+
## List who listens
|
|
8047
|
+
|
|
8048
|
+
**Problem.** To know what an emit will start, you search the code for every `bus.on` of that event.
|
|
8049
|
+
|
|
8050
|
+
**When.** You read an app that you did not write, or a test must guard the wiring of the bus.
|
|
8051
|
+
|
|
8052
|
+
`describeBus(bus)` returns the listeners that each event has right now, by name and in the order they were added. A name is the `traceId`, else the function name, else `"<anonymous>"`. It reads what `tracePlugin` keeps, so it returns `{}` on a bus without the plugin or a tracer, and in the `notrace` build. It does not run anything and does not change the bus.
|
|
8053
|
+
|
|
8054
|
+
```js
|
|
8055
|
+
import { createBus } from "nanoeffects";
|
|
8056
|
+
import { consoleLogger, createTracer, describeBus, tracePlugin } from "nanoeffects/trace";
|
|
8057
|
+
|
|
8058
|
+
function saveName(name) {
|
|
8059
|
+
console.log("save", name);
|
|
8060
|
+
}
|
|
8061
|
+
|
|
8062
|
+
function audit(name) {
|
|
8063
|
+
console.log("audit", name);
|
|
8064
|
+
}
|
|
8065
|
+
|
|
8066
|
+
const trace = createTracer(consoleLogger());
|
|
8067
|
+
|
|
8068
|
+
const bus = createBus({ trace })
|
|
8069
|
+
.use(tracePlugin());
|
|
8070
|
+
|
|
8071
|
+
bus.on("name/changed", saveName);
|
|
8072
|
+
bus.on("name/changed", audit);
|
|
8073
|
+
bus.on("saved", () => {}, { traceId: "refreshView" });
|
|
8074
|
+
|
|
8075
|
+
// describeBus: the map of events to listener names
|
|
8076
|
+
console.log(describeBus(bus));
|
|
8077
|
+
```
|
|
8078
|
+
|
|
8079
|
+
```
|
|
8080
|
+
{ "name/changed": ["saveName", "audit"], saved: ["refreshView"] }
|
|
8081
|
+
```
|
|
8082
|
+
|
|
8083
|
+
## Find the line of a listener
|
|
8084
|
+
|
|
8085
|
+
**Problem.** The log says that `saveNotifier` ran, and you must search the code for the `bus.on` that registered it. An inline arrow has no name at all, so it is not in the log.
|
|
8086
|
+
|
|
8087
|
+
**When.** You debug in development and want to jump from a log line to the code.
|
|
8088
|
+
|
|
8089
|
+
Pass `source: true` to `tracePlugin`. It reads the place of each `bus.on` and `bus.once` call once, when the listener is registered, and never on `emit`. The events of the listener get a `source` (`file:line:column`), `consoleLogger({ source: true })` prints it, and `describeBus(bus, { source: true })` lists it. An anonymous listener is reported too, under the type of its event.
|
|
8090
|
+
|
|
8091
|
+
```js
|
|
8092
|
+
import { createBus } from "nanoeffects";
|
|
8093
|
+
import { consoleLogger, createTracer, describeBus, tracePlugin } from "nanoeffects/trace";
|
|
8094
|
+
|
|
8095
|
+
// source: print where the listener was registered
|
|
8096
|
+
const trace = createTracer(consoleLogger({ source: true }));
|
|
8097
|
+
|
|
8098
|
+
// source: read the place of each bus.on, once at registration
|
|
8099
|
+
const bus = createBus({ trace })
|
|
8100
|
+
.use(tracePlugin({ source: true }));
|
|
8101
|
+
|
|
8102
|
+
function saveName(name) {
|
|
8103
|
+
console.log("save", name);
|
|
8104
|
+
}
|
|
8105
|
+
|
|
8106
|
+
bus.on("name/changed", saveName);
|
|
8107
|
+
bus.on("name/changed", (name) => console.log("audit", name));
|
|
8108
|
+
|
|
8109
|
+
bus.emit("name/changed", "Eva");
|
|
8110
|
+
|
|
8111
|
+
// describeBus: the same places, without running anything
|
|
8112
|
+
console.log(describeBus(bus, { source: true }));
|
|
8113
|
+
```
|
|
8114
|
+
|
|
8115
|
+
```
|
|
8116
|
+
[nanoeffects] saveName · run start (file:///app/src/user.js:13:5)
|
|
8117
|
+
[nanoeffects] name/changed · run start (file:///app/src/user.js:14:5)
|
|
8118
|
+
{ "name/changed": ["saveName (file:///app/src/user.js:13:5)", "<anonymous> (file:///app/src/user.js:14:5)"] }
|
|
8119
|
+
```
|
|
8120
|
+
|
|
8121
|
+
Know the limits:
|
|
8122
|
+
|
|
8123
|
+
- **Minified or bundled code** gives the line of the bundle. Turn on source maps (`node --enable-source-maps`, or the browser's) to see the original line.
|
|
8124
|
+
- **`ctx.on` called by hand** inside a handler shows the line in the library as its place. The `on` of a module and of an instance made by `extendBus`, and the `on` of `matchPlugin`, `signalPlugin` and `devPlugin`, show your line, in any order of plugins and in a bundle.
|
|
8125
|
+
- **No stack**, as with `Error.stackTraceLimit = 0`, gives no `source`. The listener runs as usual.
|
|
8126
|
+
- **The default is off.** Reading a stack costs a little for each registration, so turn it on in development.
|
|
8127
|
+
|
|
7912
8128
|
## Keep the chain: `ctx.emit`, not `bus.emit`
|
|
7913
8129
|
|
|
7914
8130
|
Inside a handler, emit with `ctx.emit`. It keeps the chain: what it starts is below the handler, and its events have the `rootId` of the chain. A plain `bus.emit` inside a handler starts a new root with no `parentId` and no `rootId`, so the trace loses the link. The bus cannot warn about it, because it does not know which handler is running.
|
|
@@ -8165,6 +8381,146 @@ conditions: ["notrace"]
|
|
|
8165
8381
|
|
|
8166
8382
|
In a build from the sources, `define: { __NANOEFFECTS_TRACE__: "false" }` does the same. With the condition set, that build’s types have no `trace` option: `createBus({ trace })` is a type error. `nanoeffects/trace` has no `notrace` build. The saving is about 0.4 kB gzip of the whole library.
|
|
8167
8383
|
|
|
8384
|
+
---
|
|
8385
|
+
Source: docs/debugging-compared.md
|
|
8386
|
+
|
|
8387
|
+
# Debugging compared with RxJS, Effector and mitt
|
|
8388
|
+
|
|
8389
|
+
> **Level F.** Read first: [Trace tasks](tracing.md#attach-a-tracer).
|
|
8390
|
+
|
|
8391
|
+
Read this page if you know RxJS, Effector or mitt and want to know what nanoeffects gives you when something goes wrong, and what it does not. It compares what each tool shows, then answers three questions you ask in a debugger. It is not a migration guide: for that, see [RxJS](migrating-from-rxjs.md), [Effector](migrating-from-effector.md) and [mitt](migrating-from-mitt.md).
|
|
8392
|
+
|
|
8393
|
+
## On this page
|
|
8394
|
+
|
|
8395
|
+
- [Compare what you can see](#compare-what-you-can-see)
|
|
8396
|
+
- [Find who listens to an event](#find-who-listens-to-an-event)
|
|
8397
|
+
- [Find which task began a chain](#find-which-task-began-a-chain)
|
|
8398
|
+
- [Find out why a request stopped](#find-out-why-a-request-stopped)
|
|
8399
|
+
- [Know what is missing](#know-what-is-missing)
|
|
8400
|
+
|
|
8401
|
+
## Compare what you can see
|
|
8402
|
+
|
|
8403
|
+
| Question | nanoeffects | RxJS | Effector | mitt / nanoevents |
|
|
8404
|
+
| -------- | ----------- | ---- | -------- | ----------------- |
|
|
8405
|
+
| Which task started which? | Yes: every task has `parentId` and `rootId` ([Trace tasks](tracing.md)) | You add `tap` per stream, or a tool such as [rxjs-spy](https://github.com/cartant/rxjs-spy) | Yes, through [`effector-logger`](https://github.com/effector/logger) and the [inspector](https://github.com/effector/inspector) | No |
|
|
8406
|
+
| Was a call cancelled or dropped? | Yes: the phases `cancel` and `drop` | An unsubscribe shows no event unless you add one | — | No |
|
|
8407
|
+
| A log of every emit | `tracePlugin` reports each emit, also with no listener | `tap` per stream | A logger over the units | A `"*"` listener |
|
|
8408
|
+
| A map of the app | `describeBus` before a run, `graphLogger` after ([Find and cut event loops](debugging-loops.md)) | Not built in | The graph of units, with names from the Babel/SWC plugin | `emitter.all` holds the handlers of each event (mitt) |
|
|
8409
|
+
| Find a loop | `graphLogger`, then `loopGuardPlugin` cuts it | — | — | No |
|
|
8410
|
+
| Test a flow | [`createMarbleBus`](testing.md): emits and phases as diagrams on fake timers; [`createTraceRecorder`](tracing.md#keep-the-last-events-for-an-incident) keeps the events | [Marble tests](https://rxjs.dev/guide/testing/marble-testing) | `fork` gives an isolated scope | You wire it yourself |
|
|
8411
|
+
|
|
8412
|
+
A dash means that this page does not compare it. Read the table as a map of where to look, not as a score. Effector and RxJS also hold state and streams, which nanoeffects does not, so their tools cover more ground. nanoeffects covers one thing in depth: why an async handler ran, and why it stopped.
|
|
8413
|
+
|
|
8414
|
+
## Find who listens to an event
|
|
8415
|
+
|
|
8416
|
+
**Problem.** You read an emit and want to know what it starts.
|
|
8417
|
+
|
|
8418
|
+
Name the listeners with functions or a `traceId`, use `tracePlugin`, and call `describeBus`:
|
|
8419
|
+
|
|
8420
|
+
```js
|
|
8421
|
+
import { createBus } from "nanoeffects";
|
|
8422
|
+
import { consoleLogger, createTracer, describeBus, tracePlugin } from "nanoeffects/trace";
|
|
8423
|
+
|
|
8424
|
+
function saveName(name) {
|
|
8425
|
+
console.log("save", name);
|
|
8426
|
+
}
|
|
8427
|
+
|
|
8428
|
+
function audit(name) {
|
|
8429
|
+
console.log("audit", name);
|
|
8430
|
+
}
|
|
8431
|
+
|
|
8432
|
+
const trace = createTracer(consoleLogger());
|
|
8433
|
+
|
|
8434
|
+
const bus = createBus({ trace })
|
|
8435
|
+
.use(tracePlugin());
|
|
8436
|
+
|
|
8437
|
+
bus.on("name/changed", saveName);
|
|
8438
|
+
bus.on("name/changed", audit);
|
|
8439
|
+
|
|
8440
|
+
// describeBus: the listeners of each event, in the order they run
|
|
8441
|
+
console.log(describeBus(bus));
|
|
8442
|
+
```
|
|
8443
|
+
|
|
8444
|
+
```
|
|
8445
|
+
{ "name/changed": ["saveName", "audit"] }
|
|
8446
|
+
```
|
|
8447
|
+
|
|
8448
|
+
Details: [List who listens](tracing.md#list-who-listens).
|
|
8449
|
+
|
|
8450
|
+
## Find which task began a chain
|
|
8451
|
+
|
|
8452
|
+
**Problem.** A request ran and you do not know what asked for it.
|
|
8453
|
+
|
|
8454
|
+
Every task of a trace has a `rootId` and a `parentId`. The recorder keeps them, so you can walk up from the request to the emit that began it:
|
|
8455
|
+
|
|
8456
|
+
```js
|
|
8457
|
+
import { createBus } from "nanoeffects";
|
|
8458
|
+
import { createTraceRecorder, createTracer, tracePlugin } from "nanoeffects/trace";
|
|
8459
|
+
|
|
8460
|
+
// createTraceRecorder: keeps the last events in memory
|
|
8461
|
+
const recorder = createTraceRecorder();
|
|
8462
|
+
const trace = createTracer(recorder);
|
|
8463
|
+
|
|
8464
|
+
const bus = createBus({ trace })
|
|
8465
|
+
.use(tracePlugin());
|
|
8466
|
+
|
|
8467
|
+
function loadUser(id, ctx) {
|
|
8468
|
+
ctx.emit("user/loading", id);
|
|
8469
|
+
}
|
|
8470
|
+
|
|
8471
|
+
bus.on("user/open", loadUser);
|
|
8472
|
+
bus.emit("user/open", 7);
|
|
8473
|
+
|
|
8474
|
+
// each event says which task is its parent
|
|
8475
|
+
for (const event of recorder.events) {
|
|
8476
|
+
console.log(event.id, event.parentId, event.type, event.phase);
|
|
8477
|
+
}
|
|
8478
|
+
```
|
|
8479
|
+
|
|
8480
|
+
Details: [Show which subscription began a chain](tracing.md#show-which-subscription-began-a-chain) and [Keep the chain: `ctx.emit`, not `bus.emit`](tracing.md#keep-the-chain-ctxemit-not-busemit).
|
|
8481
|
+
|
|
8482
|
+
## Find out why a request stopped
|
|
8483
|
+
|
|
8484
|
+
**Problem.** A search request never finished and no error appeared.
|
|
8485
|
+
|
|
8486
|
+
A policy that stops a call reports `cancel` or `drop` in the trace. Pick the call and read its last phase:
|
|
8487
|
+
|
|
8488
|
+
```js
|
|
8489
|
+
import { createBus } from "nanoeffects";
|
|
8490
|
+
import { latest } from "nanoeffects/policies";
|
|
8491
|
+
import { createTraceRecorder, createTracer, tracePlugin } from "nanoeffects/trace";
|
|
8492
|
+
|
|
8493
|
+
const recorder = createTraceRecorder();
|
|
8494
|
+
const trace = createTracer(recorder);
|
|
8495
|
+
|
|
8496
|
+
const bus = createBus({ trace })
|
|
8497
|
+
.use(tracePlugin());
|
|
8498
|
+
|
|
8499
|
+
// latest: a new search stops the one that is still running
|
|
8500
|
+
const search = latest(async (query, ctx) => {
|
|
8501
|
+
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
8502
|
+
ctx.emit("search/loaded", query);
|
|
8503
|
+
});
|
|
8504
|
+
|
|
8505
|
+
bus.on("search/changed", search, { traceId: "search" });
|
|
8506
|
+
bus.emit("search/changed", "a");
|
|
8507
|
+
bus.emit("search/changed", "ab");
|
|
8508
|
+
|
|
8509
|
+
// a "cancel" phase on the first call says that the second one stopped it
|
|
8510
|
+
const phases = recorder.events.map((event) => `${event.type}:${event.phase}`);
|
|
8511
|
+
console.log(phases);
|
|
8512
|
+
```
|
|
8513
|
+
|
|
8514
|
+
Details: [Trace tasks](tracing.md) and [Cancel stale requests](cancel-stale-requests.md).
|
|
8515
|
+
|
|
8516
|
+
## Know what is missing
|
|
8517
|
+
|
|
8518
|
+
- **No browser extension or UI of its own.** Use [Redux DevTools](tracing.md#configure-redux-devtools), the console or the Performance panel. Effector has an inspector for this.
|
|
8519
|
+
- **No map from the source code.** `describeBus` lists the listeners registered so far, and `graphLogger` shows the events that happened. A listener that is not registered yet is not on the map.
|
|
8520
|
+
- **No click-through from the log to the code.** With `tracePlugin({ source: true })` an event carries the `file:line:column` of its listener ([Find the line of a listener](tracing.md#find-the-line-of-a-listener)), but a link in a UI is yours to build.
|
|
8521
|
+
- **No names from a compiler.** Function names give a name for free; a minifier can shorten them, so use `traceId` where a name must stay stable.
|
|
8522
|
+
- **No replay and no time travel.** The recorder keeps what happened and cannot run it again.
|
|
8523
|
+
|
|
8168
8524
|
---
|
|
8169
8525
|
Source: docs/debugging-loops.md
|
|
8170
8526
|
|
package/llms.txt
CHANGED
|
@@ -60,7 +60,9 @@ Rules that generated code often gets wrong:
|
|
|
60
60
|
|
|
61
61
|
- [Semantics](docs/semantics.md): exact rules of emit, abort and ordering
|
|
62
62
|
- [Keep the signal through a handler](docs/pass-the-signal.md): every way a policy handler loses `ctx.signal`, and the lint rules and `devPlugin` check that find it
|
|
63
|
+
- [Test time with diagrams](docs/testing.md): `createMarbleBus` and `fakeTimersClock`; emits and phases as diagrams on fake timers
|
|
63
64
|
- [Trace tasks](docs/tracing.md): loggers, Redux DevTools, `graphLogger`, the `notrace` build
|
|
65
|
+
- [Debugging compared with RxJS, Effector and mitt](docs/debugging-compared.md): what you can see in each, and three debugging cases
|
|
64
66
|
- [Find and cut event loops](docs/debugging-loops.md): symptoms, `graphLogger`, the graph as Mermaid, Graphviz or JSON, Redux DevTools
|
|
65
67
|
- [Cut a loop with loopGuardPlugin](docs/loop-guard.md): limits on repeats, depth and emits from outside
|
|
66
68
|
- [Turn events into Observables](docs/observable.md): `createObserve`, `Subject`, `events` (an event as a `for await` loop)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nanoeffects",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.32.0",
|
|
4
4
|
"description": "Business logic and side effects outside UI components, as plain async functions. Tiny, no dependencies.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"event-bus",
|
|
@@ -114,6 +114,10 @@
|
|
|
114
114
|
"types": "./dist/trace.d.ts",
|
|
115
115
|
"import": "./dist/trace.js"
|
|
116
116
|
},
|
|
117
|
+
"./testing": {
|
|
118
|
+
"types": "./dist/testing.d.ts",
|
|
119
|
+
"import": "./dist/testing.js"
|
|
120
|
+
},
|
|
117
121
|
"./redux": {
|
|
118
122
|
"notrace": {
|
|
119
123
|
"types": "./dist/notrace/redux.d.ts",
|
|
@@ -232,7 +236,7 @@
|
|
|
232
236
|
{
|
|
233
237
|
"name": "actions (all)",
|
|
234
238
|
"path": "dist/actions.js",
|
|
235
|
-
"limit": "3.
|
|
239
|
+
"limit": "3.4 kB"
|
|
236
240
|
},
|
|
237
241
|
{
|
|
238
242
|
"name": "match (plugin)",
|
|
@@ -254,6 +258,11 @@
|
|
|
254
258
|
"path": "dist/guard.js",
|
|
255
259
|
"limit": "1 kB"
|
|
256
260
|
},
|
|
261
|
+
{
|
|
262
|
+
"name": "testing (marble bus)",
|
|
263
|
+
"path": "dist/testing.js",
|
|
264
|
+
"limit": "4.1 kB"
|
|
265
|
+
},
|
|
257
266
|
{
|
|
258
267
|
"name": "trace: graphLogger",
|
|
259
268
|
"path": "dist/trace.js",
|
|
@@ -263,7 +272,7 @@
|
|
|
263
272
|
{
|
|
264
273
|
"name": "oop (class entry)",
|
|
265
274
|
"path": "dist/oop.js",
|
|
266
|
-
"limit": "2.
|
|
275
|
+
"limit": "2.62 kB"
|
|
267
276
|
},
|
|
268
277
|
{
|
|
269
278
|
"name": "scope (plugin and effect)",
|
package/dist/context-B5Z2RpJt.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{t as e}from"./onAbort-BgMfspK4.js";import{t}from"./emit-key-C6FL7Ewn.js";const n=t=>{let n=new AbortController;return{controller:n,unlink:e({signal:t},e=>n.abort(e))}},r=typeof __NANOEFFECTS_TRACE__>`u`||__NANOEFFECTS_TRACE__,i=/* @__PURE__ */ new WeakMap;let a;const o=()=>a,s=()=>{},c=(e,t,n,a)=>{let o=r&&i.get(e);o&&o.tracer.report(o.ref,t,n,a)},l=(e,t)=>{let n=r&&i.get(e);n&&n.tracer.rename?.(n.ref,t)},u=(e,t)=>{let n=r&&i.get(e);return n?n.tracer.settler(n.ref,t):s},d=(e,t,n)=>{let a=r&&i.get(e);return a?a.tracer.run(a.ref,t,e.signal,n):n()},f=Symbol(`nanoeffects.addContext`),p=(e,t)=>typeof e==`function`?e(t):e,m=({event:o,bus:c,tracer:l,parent:u})=>{let{controller:h,unlink:g}=n(u?.signal),{signal:_}=h,v=r&&l?{tracer:l,ref:l.task(o,u?.ref)}:void 0,y=(...e)=>{if(_.aborted&&!S[t])return;let n=c?.emit,r=a;a=v?.ref;try{return n?.(...e)}finally{a=r}},b=(...t)=>{if(_.aborted)return s;let n=c?.on,r=n?.(...t);if(!r)return s;let i=e({signal:_},r);return()=>{i(),r()}},x=async(e,...t)=>{_.throwIfAborted();let n=t[0],r=m({event:{type:o.type,payload:n},bus:c,tracer:l,parent:{signal:_,ref:v?.ref}});try{return await d(r.ctx,`run`,()=>e(n,r.ctx))}finally{r.unlink()}},S={...p(c?.ctx,o),type:o.type,payload:o.payload,signal:_,abort:e=>h.abort(e),emit:y,on:b,off:c?.off??s,run:x,[f]:c?.addContext};return c?.addContext?.(S),v&&i.set(S,v),{ctx:S,unlink:g}},h=(e,t)=>{let n=r?i.get(e):void 0;return m({event:{type:t??e.type??``,payload:e.payload},bus:{emit:e.emit,on:e.on,off:e.off,ctx:e,addContext:Reflect.get(e,f)},tracer:n?.tracer,parent:{signal:e.signal,ref:n?.ref}})};export{l as a,r as c,h as i,m as n,d as o,o as r,c as s,u as t};
|