OBSERVER / PRACTICE
One order.
A changing audience.
You met Observer at a weather station. Now keep an order's listeners up to date.
YOUR BRIEF
One display works. A log is next.
A customer display shows the order's latest status. Now an activity log needs every update too—and the customer can close the display while the order keeps moving. Make listeners independent of the publisher.
One immutable OrderUpdate carries an order ID and status. Every registered listener receives the same event through update(event). Removing one subscription must leave the others working.
The working starting point
let customerStatus = "Packed";
function publish(status: string): void {
customerStatus = status;
}One output is easy. The new requirement is a changing set of listeners, each with its own reaction.
01 / ASSEMBLE
Let listeners come and go.
Choose the contract, the broadcast, and what happens when a listener leaves.
Your assembled code
TypeScript preview. Highlighting follows the selected execution.
One event · one listener contract
// Choose the listener contract above.OrderTracker · the publisher
// Choose how the publisher delivers updates.Caller · setup
// Complete the contract and delivery choices first.02 / RUN & OBSERVE
Who gets the next update?
Publish Packed. The display and log should both receive it.
Your broadcast goes hereReady to test your assembly.
Delivery and design feedback will appear here.
- ○ Both listeners receive Packed — run to verify
- ○ Closed display stops receiving updates — run to verify
Each test starts a fresh local tracker. Recorded callbacks drive this animation; no real order or message is sent. Delivery is synchronous, in registration order, without replay on subscribe.
03 / TRANSFER THE IDEA
An audit log wants updates too.
Add AuditLog as another listener. Which parts need to change?
First pass both test cases with a publisher that uses subscriptions.
Compare with a complete solution
No timer and no attempt limit. Try another assembly, use a hint, or reveal the answer when it helps.