@arckit/injection

Lightweight dependency injection container with React bindings, built on piqure.

📑 Table of Contents

• 🪧 About
• 📦 Installation
• 🚀 Usage
• 📖 API
• 🤗 Contributing
• 📝 License

A thin wrapper around piqure providing a pre-configured in-memory DI container, a React ClientBinder component for server-to-client dependency binding, and a withClientBinder middleware for page builder integration.

pnpm add @arckit/injection

Provide and inject

import { key, keyFor } from 'piqure';
import { inject, provide } from '@arckit/injection';

// key() uses Symbol() — unique, for server-side only
const LOGGER = key<Logger>('logger');
provide(LOGGER, consoleLogger);
const logger = inject(LOGGER);

// keyFor() uses Symbol.for() — global, safe to pass to React client components
const ACTION_KEY = keyFor<MyAction>('my.action');

React client binding

import { ClientBinder } from '@arckit/injection';

const Page = () => (
  <ClientBinder bind={ACTION_KEY} to={myAction}>
    <MyComponent />
  </ClientBinder>
);

Page builder middleware

import { withClientBinder } from '@arckit/injection';

export default pageBuilder()
  .use(withClientBinder(ACTION_KEY, myAction))
  .render(async () => <MyPage />);

Container

| Function | Description | |----------|-------------| | inject(key) | Retrieve a dependency by its injection key. Throws if not provided. | | provide(key, value) | Register a dependency with a static value. | | provideLazy(key, factory) | Register a dependency with a lazy factory function. |

React

| Component/Function | Description | |-------------------|-------------| | ClientBinder | React component that binds a dependency for client-side injection. Uses provideLazy with a ref guard to prevent duplicate bindings. | | withClientBinder(key, value) | Async middleware returning a provider configuration for page builders. |

See CONTRIBUTING.md for details.

MIT © Marc Gavanier