Tutorial
Walkthroughs / Program structure
Replacing copied stock-allocation code with a shared definition
Cart, checkout, and support repeat the same stock-allocation rule. Watch the real editor and tools turn those copies into calls to a shared definition.
Its maps and executions come from the browser compiler. Nothing compiles until you press Play or advance to a run step.
Read the six steps
- Read the stock rule and its repeated entry points.
- Run cart_units on the displayed inputs.
- Build the dependency map before changing code.
- Apply the shared fulfillable_units definition in the editor.
- Rebuild the same map and inspect the callers.
- Run the edited function on the same inputs.
Pause freezes the animation; a compilation already started may finish in the background. Take control stops playback and gives you the same editor and buttons. Restart restores the original source and discards edits in this example. Reduced-motion settings skip the pointer, scrolling, and typing animations; Next step remains available.
What this comparison establishes
The map reports definitions and dependencies extracted from each compiled source. Reusing one rule makes this particular policy easier to change consistently; more layers by themselves would not establish better organization.
The two executions use the same displayed stock, reservation, and requested quantity. Matching on that input is a useful check, not a proof of equivalence. The existing bounded execution comparison supplies more cases and states its scope.
Read the complete before source and after source, or use the unrestricted stock example and its recorded diagrams.
Why inspect structure before editing? · See the planned walkthroughs →
Where this fits
What this is about: Lenses and Diagrams