Remove change event

.storybook/preview-head.html

@@ -1,4 +1,4 @@
 <script>
   window.global = window;
-  window.__debug_react_done_tracker = true;
+  // window.__debug_react_done_tracker = true;
 </script>

README.md

@@ -312,22 +312,28 @@ import { ForkLeafDoneTracker } from "react-done-tracker";
 
 In certain situations, it's useful to know when the children of a certain component have changed, e.g. when you want to screenshot those components after a change. On first load, you can wait for a `done` event. But when the children change in a non-async way, there will not be a second `done` event.
 
-Because of that, you can trigger the `change` event if you want a parent component to know that the children have changed.
+Previously, this library had a `change` event, but we now recommend to provide your own change emitters:
 
 ```tsx
-// child
-useEffect(() => {
-  doneTracker.signalChange();
-}, [doneTracker, dep]);
-
-// parent
-useDoneTrackerSubscription(doneTracker, {
-  change: () => console.log("children have changed")
-});
+class ChangeEmitter {
+  private listeners: (() => void)[] = [];
+  emit = () => {
+    this.listeners.forEach((listener) => listener());
+  }
+  subscribe = (listener: () => void) => {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners.splice(this.listeners.indexOf(listener), 1);
+    };
+  }
+  fork = (): ChangeEmitter => {
+    const emitter = new ChangeEmitter();
+    this.listeners.push(emitter.emit);
+    return emitter;
+  }
+}
 ```
 
-The `change` event is not part of the "core" of this library. It was added because it's commonly needed.
-
 ## Caveats
 
 ### Slow hooks

src/base-done-tracker.ts

@@ -11,7 +11,6 @@ export class BaseDoneTracker
   abortListeners: DoneTrackerListener<"abort">[] = [];
   errorListeners: DoneTrackerListener<"error">[] = [];
   resetListeners: DoneTrackerListener<"reset">[] = [];
-  changeListeners: DoneTrackerListener<"change">[] = [];
 
   addEventListener: DoneTracker["addEventListener"] = (event, listener) => {
     if (event === "done") {
@@ -22,8 +21,6 @@ export class BaseDoneTracker
       this.errorListeners.push(listener as any);
     } else if (event === "reset") {
       this.resetListeners.push(listener as any);
-    } else if (event === "change") {
-      this.changeListeners.push(listener as any);
     }
   };
 
@@ -48,11 +45,6 @@ export class BaseDoneTracker
         this.resetListeners.indexOf(listener as any),
         1
       );
-    } else if (event === "change") {
-      this.changeListeners.splice(
-        this.changeListeners.indexOf(listener as any),
-        1
-      );
     }
   };
 
@@ -68,8 +60,6 @@ export class BaseDoneTracker
       this.errorListeners.forEach((fn) => fn(arg as any));
     } else if (event === "reset") {
       this.resetListeners.forEach((fn) => fn(arg as any));
-    } else if (event === "change") {
-      this.changeListeners.forEach((fn) => fn(arg as any));
     }
   }
 }

src/components/ImperativeTrackDone.tsx

@@ -12,7 +12,6 @@ export function ImperativeTrackDone({
   onDone,
   onError,
   onPending,
-  onChange,
 }: TrackComponentDoneProps<{
   children: (doneTracker: NodeDoneTracker) => any;
   forceRefreshRef?: MutableRefObject<(() => void) | null>;
@@ -29,7 +28,6 @@ export function ImperativeTrackDone({
     done: onDone,
     error: onError,
     pending: onPending,
-    change: onChange,
   });
 
   return (

src/components/TrackDone.tsx

@@ -13,7 +13,6 @@ export function TrackDoneRoot({
   onDone,
   onError,
   onPending,
-  onChange,
 }: TrackComponentDoneProps<{
   children: any;
   forceRefreshRef?: MutableRefObject<(() => void) | null>;
@@ -30,7 +29,6 @@ export function TrackDoneRoot({
     done: onDone,
     error: onError,
     pending: onPending,
-    change: onChange,
   });
 
   return (
@@ -46,7 +44,6 @@ export function ForkedTrackDone({
   onDone,
   onError,
   onPending,
-  onChange,
   forceRefreshRef,
 }: TrackComponentDoneProps<{
   name: string;
@@ -64,7 +61,6 @@ export function ForkedTrackDone({
     done: onDone,
     error: onError,
     pending: onPending,
-    change: onChange,
   });
 
   return (
@@ -82,7 +78,6 @@ export function TrackDone({
   onDone,
   onError,
   onPending,
-  onChange,
 }: TrackComponentDoneProps<{
   children: any;
   forceRoot?: boolean;
@@ -99,7 +94,6 @@ export function TrackDone({
         onDone={onDone}
         onError={onError}
         onPending={onPending}
-        onChange={onChange}
       >
         {children}
       </ForkedTrackDone>
@@ -113,7 +107,6 @@ export function TrackDone({
       onDone={onDone}
       onError={onError}
       onPending={onPending}
-      onChange={onChange}
     >
       {children}
     </TrackDoneRoot>

src/done-tracker-interface.ts

@@ -26,8 +26,6 @@ export interface DoneTracker {
   readonly erroredAt: number | null;
   readonly pendingAt: number;
 
-  readonly preventChangePropagation: boolean;
-
   addEventListener<K extends keyof DoneTrackerEventMap>(event: K, listener: DoneTrackerListener<K>): void;
 
   removeEventListener<K extends keyof DoneTrackerEventMap>(event: K, listener: DoneTrackerListener<K>): void;

src/leaf-done-tracker.ts

@@ -16,8 +16,6 @@ export class LeafDoneTracker extends BaseDoneTracker implements DoneTracker {
   private _erroredAt: number | null = null;
   private _pendingAt: number = performance.now();
 
-  public preventChangePropagation = false;
-
   get id() {
     return this._name ? `${this._id}:${this._name}` : this._id;
   }
@@ -127,19 +125,6 @@ export class LeafDoneTracker extends BaseDoneTracker implements DoneTracker {
     this.dispatchEvent("error", err, this);
   };
 
-  signalChange = () => {
-    if (this.aborted) {
-      warn("Already aborted, can't signal change", this.id);
-      return;
-    }
-    if (!this.done) {
-      debug("Not done, not signaling change", this.id);
-      return;
-    }
-    log("🌀 Signaling changed", this.id, "after");
-    this.dispatchEvent("change");
-  };
-
   reset = () => {
     if (this.aborted) {
       warn("Already aborted, can't repend", this.id);

src/node-done-tracker.ts

@@ -24,8 +24,6 @@ export class NodeDoneTracker extends BaseDoneTracker implements DoneTracker {
   private _erroredAt: number | null = null;
   private _pendingAt: number = performance.now();
 
-  public preventChangePropagation = false;
-
   get id() {
     return this._name ? `${this._id}:${this._name}` : this._id;
   }
@@ -131,15 +129,6 @@ export class NodeDoneTracker extends BaseDoneTracker implements DoneTracker {
       if (!canReset) return;
       this.reset();
     });
-    if (!child.preventChangePropagation) {
-      child.addEventListener("change", () => {
-        debug("Child of", this.id, "changed");
-        if (!this.done) return;
-        // needs to be available for useDoneTrackerSubscription
-        this.dispatchEvent("change");
-      });
-    }
-
     if (child.done) {
       debug("Child was already done when added", child.id);
       this.checkAndDispatchState();

src/stories/AsyncTree.stories.tsx

@@ -41,7 +41,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/Button.stories.tsx

@@ -14,7 +14,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/DelayedContainer.stories.tsx

@@ -16,7 +16,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 };

src/stories/DelayedContainerAndChildren.stories.tsx

@@ -24,7 +24,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/EmptyNode.stories.tsx

@@ -19,7 +19,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 const Tree = () => {

src/stories/Image.stories.tsx

@@ -15,7 +15,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/ImmediatelyDone.stories.tsx

@@ -30,7 +30,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/ImmediatelyDoneWithChildren.stories.tsx

@@ -24,7 +24,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/ImmediatelyErroring.stories.tsx

@@ -30,7 +30,6 @@ const { actions, actionsMockClear } = createSpyableActions({
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 });
 
 export default {

src/stories/ImperativeAsyncTree.stories.tsx

@@ -54,7 +54,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeAsyncTree2.stories.tsx

@@ -115,7 +115,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeAsyncTree3.stories.tsx

@@ -55,7 +55,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeButton.stories.tsx

@@ -12,7 +12,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeImage.stories.tsx

@@ -13,7 +13,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeInput.stories.tsx

@@ -40,7 +40,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeRecursiveTree.stories.tsx

@@ -99,7 +99,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/ImperativeSimpleAsyncTree.stories.tsx

@@ -43,7 +43,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/Intro.mdx

@@ -37,7 +37,6 @@ export const actions = {
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 };
 
 # React Done Tracker

src/stories/Intro.stories.tsx

@@ -29,7 +29,6 @@ const actions = {
   onAbort: action("abort"),
   onError: action("error"),
   onPending: action("pending"),
-  onChange: action("change"),
 };
 
 const VisualizedDelayedComponent = visualizeDoneWrapper(DelayedComponent);

src/stories/MixedUsage.stories.tsx

@@ -111,7 +111,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/NestedTrackDone.stories.tsx

@@ -39,7 +39,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;

src/stories/PropDelayer.stories.tsx

@@ -61,7 +61,6 @@ export default {
       onAbort: action("abort"),
       onError: action("error"),
       onPending: action("pending"),
-      onChange: action("change"),
     }),
   ],
 } as Meta;