A 4-level deep component hierarchy demonstrating Supplier's powerful context switching capabilities. Watch how configs flow and transform through the component tree.
A 4-level deep component hierarchy with dependency injection using Supplier
Welcome to the Supplier dependency injection example! This is the top-level component that starts our 4-level deep component hierarchy.
Context Switch: Level 2 resupplies Level 3 and 4 with a modified config. Notice how Level 4 will display different values than what Level 2 received!
This component renders Level 4, which displays the config information.
Level 1 (Root): The top-level component that starts the hierarchy
Level 2 (Context Switcher): Displays the original config AND resupplies Level 3 and 4 with a modified config using resupply()
Level 3: Passes through the modified config from Level 2
Level 4 (Deepest): Displays the modified config (different from what Level 2 shows!)
🚀 Context Switching Demo: Notice how Level 2 shows the original config, but Level 4 shows a completely different config! This demonstrates Supplier's powerful context switching capability with resupply().
Config Supply: The configuration is supplied at this page (entrypoint), flows to Level 2, gets modified, and the modified version flows to Level 4.
The top-level component that starts the hierarchy and passes the original config down.
⭐ The Magic Happens Here! Level 2 displays the original config AND creates a modified version that it supplies to Level 3 & 4 using resupply().
Receives the modified config from Level 2 and passes it to Level 4.
Displays the final modified config - completely different from what Level 2 originally received!
Notice how Level 2 shows the original blue theme, but Level 4 shows a completely different emerald theme! This demonstrates Supplier's powerful context switching - the same component tree can work with different configurations at different levels.
// Supply config at the root
const result = Level1Agent.supply(
parcel(ConfigResource.supply(defaultConfig))
);// Create modified config
const modifiedConfig = {
...currentConfig,
appName: "🚀 Modified by Level 2",
theme: { primaryColor: "#10b981" }
};
// Resupply with new context
const Level3Component = level3Agent.resupply(
parcel(ConfigResource.supply(modifiedConfig))
);const Level2Agent = register("level-2").asAgent({
team: [Level3Agent, ConfigRendererAgent],
factory: ($) => {
const config = $(ConfigResource.id);
const ConfigRenderer = $(ConfigRendererAgent.id);
// ... render logic
}
});Easily inject mock configurations for different test scenarios without changing your components.
Switch between development, staging, and production configs dynamically at runtime.
Override dependencies at any level of your component tree without affecting parent components.