Dependency injection
Typed service tokens, factories and parent/child containers.
01 / Live preview● Interactive
Interact with the component. The source on the right is the actual code.
di.tsx
● Zidom
import { signal, onCleanup } from '@zidomjs/core';import { createContainer, createToken } from '@zidomjs/di';interface GreetingService { hello(name: string): string;}const GREETING = createToken<GreetingService>('greeting');export default function DependencyInjectionDemo() { const root = createContainer(); root.registerFactory(GREETING, () => ({ hello: name => `Hello, ${name}!` })); const child = root.createChild(); onCleanup(() => { child.dispose(); root.dispose(); }); const result = signal(child.get(GREETING).hello('Zidom')); return ( <div className="example-card"> <p>Child containers resolve services registered by a parent.</p> <p className="demo-output">{result}</p> <button onClick={() => (result.value = child.get(GREETING).hello('Zidane'))} > Resolve greeting </button> </div> );}This website demo runs pinned Zidom beta.1 packages; the latest framework release is beta.2. See release details and limitations. Report a problem with this example.