@migration-planner-ui/ioc 0.0.33 → 0.0.36

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2026 Red Hat, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,224 @@
+# @migration-planner-ui/ioc
+
+A lightweight Inversion of Control (IoC) container solution for React applications, inspired by InversifyJS.
+
+## Installation
+
+```bash
+npm install @migration-planner-ui/ioc --save
+```
+
+or
+
+```bash
+yarn add @migration-planner-ui/ioc
+```
+
+## Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `react` ^18.3.1
+- `react-dom` ^18.3.1
+- `react-router-dom` ^6.26.0
+
+## Usage
+
+### 1. Define Symbols for Your Dependencies
+
+Create a symbols file to define unique identifiers for your dependencies:
+
+```typescript
+// Symbols.ts
+export const Symbols = Object.freeze({
+  MyService: Symbol.for("MyService"),
+  ApiClient: Symbol.for("ApiClient"),
+});
+```
+
+### 2. Create and Configure the Container
+
+Create a container instance and register your dependencies:
+
+```typescript
+import { Container } from "@migration-planner-ui/ioc";
+import { Symbols } from "./Symbols";
+import { MyService } from "./services/MyService";
+import { ApiClient } from "./clients/ApiClient";
+
+function getConfiguredContainer(): Container {
+  const container = new Container();
+  
+  // Register dependencies
+  container
+    .register(Symbols.MyService, new MyService())
+    .register(Symbols.ApiClient, new ApiClient());
+  
+  return container;
+}
+```
+
+### 3. Provide the Container to Your App
+
+Wrap your application with the `Provider` component:
+
+```typescript
+import { Provider } from "@migration-planner-ui/ioc";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+const container = getConfiguredContainer();
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Provider container={container}>
+      <App />
+    </Provider>
+  </React.StrictMode>
+);
+```
+
+### 4. Use Dependencies in Components
+
+Use the `useInjection` hook to retrieve dependencies in your React components:
+
+```typescript
+import { useInjection } from "@migration-planner-ui/ioc";
+import { Symbols } from "./Symbols";
+import type { MyServiceInterface } from "./services/MyService";
+
+export const MyComponent: React.FC = () => {
+  const myService = useInjection<MyServiceInterface>(Symbols.MyService);
+  
+  // Use the injected service
+  const handleClick = () => {
+    myService.doSomething();
+  };
+  
+  return <button onClick={handleClick}>Click me</button>;
+};
+```
+
+## API Reference
+
+### `Container`
+
+A singleton-scoped dependency injection container.
+
+#### Methods
+
+##### `register<T>(symbol: symbol, value: T): Container`
+
+Registers a dependency with the container.
+
+- **Parameters:**
+  - `symbol`: A unique symbol identifier for the dependency
+  - `value`: The value to register
+- **Returns:** The container instance (for method chaining)
+
+##### `get<T>(symbol: symbol): T | undefined`
+
+Retrieves a registered dependency from the container.
+
+- **Parameters:**
+  - `symbol`: The symbol identifier of the dependency to retrieve
+- **Returns:** The registered dependency value, or `undefined` if not registered.
+
+### `Provider`
+
+A React context provider component that makes the container available to child components.
+
+#### Props
+
+- `container: Container` - The container instance to provide
+- `children: React.ReactNode` - Child components
+
+### `useInjection<T>(symbol: symbol): T`
+
+A React hook that retrieves a dependency from the container.
+
+- **Parameters:**
+  - `symbol`: The symbol identifier of the dependency to retrieve
+- **Returns:** The registered dependency value
+- **Throws:** `ReferenceError` if used outside a `Provider`
+
+## Example
+
+Here's a complete example demonstrating the full usage:
+
+```typescript
+// 1. Define symbols
+export const Symbols = Object.freeze({
+  UserApi: Symbol.for("UserApi"),
+});
+
+// 2. Create and configure container
+import { Container, Provider } from "@migration-planner-ui/ioc";
+import { UserApi } from "./api/UserApi";
+
+const container = new Container();
+container.register(Symbols.UserApi, new UserApi());
+
+// 3. Provide container to app
+function App() {
+  return (
+    <Provider container={container}>
+      <UserProfile />
+    </Provider>
+  );
+}
+
+// 4. Use dependency in component
+import { useInjection } from "@migration-planner-ui/ioc";
+
+function UserProfile() {
+  const userApi = useInjection(Symbols.UserApi);
+  const [user, setUser] = useState(null);
+  
+  useEffect(() => {
+    userApi.getUser().then(setUser);
+  }, [userApi]);
+  
+  return <div>{user?.name}</div>;
+}
+```
+
+## Features
+
+- **Simple API**: Minimal surface area with just a few core concepts
+- **Type-safe**: Full TypeScript support with generics
+- **React-friendly**: Designed specifically for React applications
+- **Lightweight**: No external dependencies beyond React
+- **Singleton scope**: All dependencies are singleton-scoped
+
+## Development
+
+### Building
+
+```bash
+yarn build
+```
+
+### Code Quality
+
+```bash
+# Check code
+yarn check
+
+# Fix code issues
+yarn check:fix
+
+# Format code
+yarn format
+```
+
+### Cleaning
+
+```bash
+yarn clean
+```
+
+## License
+
+[Apache 2.0](LICENSE)
+

package/dist/Container.d.ts

@@ -0,0 +1,8 @@
+/** A naive, singleton-scoped dependency injection container */
+export declare class Container {
+    #private;
+    constructor();
+    get<T>(registeredInterfaceSymbol: symbol): T;
+    register<T = unknown>(registeredInterfaceSymbol: symbol, value: T): Container;
+}
+//# sourceMappingURL=Container.d.ts.map

package/dist/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../src/Container.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,qBAAa,SAAS;;;IAOpB,GAAG,CAAC,CAAC,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAC;IAK5C,QAAQ,CAAC,CAAC,GAAG,OAAO,EAClB,yBAAyB,EAAE,MAAM,EACjC,KAAK,EAAE,CAAC,GACP,SAAS;CAKb"}

package/dist/Container.js

@@ -0,0 +1,28 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _Container_registry;
+/** A naive, singleton-scoped dependency injection container */
+export class Container {
+    constructor() {
+        _Container_registry.set(this, void 0);
+        __classPrivateFieldSet(this, _Container_registry, {}, "f");
+    }
+    get(registeredInterfaceSymbol) {
+        const value = __classPrivateFieldGet(this, _Container_registry, "f")[registeredInterfaceSymbol];
+        return value;
+    }
+    register(registeredInterfaceSymbol, value) {
+        __classPrivateFieldGet(this, _Container_registry, "f")[registeredInterfaceSymbol] = value;
+        return this;
+    }
+}
+_Container_registry = new WeakMap();

package/dist/Context.d.ts

@@ -0,0 +1,3 @@
+import type { Container } from "./Container.js";
+export declare const Context: import("react").Context<Container>;
+//# sourceMappingURL=Context.d.ts.map

package/dist/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../src/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,eAAO,MAAM,OAAO,oCAAwC,CAAC"}

package/dist/Context.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const Context = createContext(null);

package/dist/Provider.d.ts

@@ -0,0 +1,5 @@
+import type { Container } from "./Container.js";
+export declare const Provider: React.FC<React.PropsWithChildren<{
+    container: Container;
+}>>;
+//# sourceMappingURL=Provider.d.ts.map

package/dist/Provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../src/Provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAGhD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAC7B,KAAK,CAAC,iBAAiB,CAAC;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,CAAC,CAIlD,CAAC"}

package/dist/Provider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Context } from "./Context.js";
+export const Provider = (props) => {
+    const { container, children } = props;
+    return _jsx(Context.Provider, { value: container, children: children });
+};

package/dist/hooks/UseInjection.d.ts

@@ -0,0 +1,2 @@
+export declare function useInjection<T>(registeredInterfaceSymbol: symbol): T;
+//# sourceMappingURL=UseInjection.d.ts.map

package/dist/hooks/UseInjection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseInjection.d.ts","sourceRoot":"","sources":["../../src/hooks/UseInjection.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,CAAC,EAAE,yBAAyB,EAAE,MAAM,GAAG,CAAC,CAOpE"}

package/dist/hooks/UseInjection.js

@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { Context } from "../Context.js";
+export function useInjection(registeredInterfaceSymbol) {
+    const container = useContext(Context);
+    if (!container) {
+        throw new ReferenceError("useInjection must be used inside its Provider");
+    }
+    return container.get(registeredInterfaceSymbol);
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Container.js";
+export * from "./Context.js";
+export * from "./hooks/UseInjection.js";
+export * from "./Provider.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@migration-planner-ui/ioc",
-  "version": "0.0.33",
+  "version": "0.0.36",
   "description": "A basic IoC solution for React apps (inspired by InversifyJs)",
   "author": "Jonathan Kilzi <jkilzi@redhat.com>",
   "license": "Apache-2.0",
@@ -46,5 +46,9 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.0"
   },
-  "stableVersion": "1.1.1"
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ]
 }

package/biome.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
-  "extends": "//",
-  "linter": {
-    "enabled": true,
-    "domains": {
-      "react": "recommended"
-    }
-  }
-}

package/src/Container.ts

@@ -1,22 +0,0 @@
-/** A naive, singleton-scoped dependency injection container */
-export class Container {
-  readonly #registry: Record<symbol, unknown>;
-
-  constructor() {
-    this.#registry = {};
-  }
-
-  get<T>(registeredInterfaceSymbol: symbol): T {
-    const value = this.#registry[registeredInterfaceSymbol] as T;
-    return value;
-  }
-
-  register<T = unknown>(
-    registeredInterfaceSymbol: symbol,
-    value: T,
-  ): Container {
-    this.#registry[registeredInterfaceSymbol] = value;
-
-    return this;
-  }
-}

package/src/Context.tsx

@@ -1,4 +0,0 @@
-import { createContext } from "react";
-import type { Container } from "./Container.ts";
-
-export const Context = createContext<Container | null>(null);

package/src/Provider.tsx

@@ -1,11 +0,0 @@
-import type React from "react";
-import type { PropsWithChildren } from "react";
-import type { Container } from "./Container.js";
-import { Context } from "./Context.js";
-
-export const Provider: React.FC<PropsWithChildren<{ container: Container }>> = (
-  props,
-) => {
-  const { container, children } = props;
-  return <Context.Provider value={container}>{children}</Context.Provider>;
-};

package/src/hooks/UseInjection.ts

@@ -1,11 +0,0 @@
-import { useContext } from "react";
-import { Context } from "../Context.js";
-
-export function useInjection<T>(registeredInterfaceSymbol: symbol): T {
-  const container = useContext(Context);
-  if (!container) {
-    throw new ReferenceError("useInjection must be used inside its Provider");
-  }
-
-  return container.get<T>(registeredInterfaceSymbol);
-}

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": ".tmp/tsconfig.tsbuildinfo",
-    "composite": true,
-    "declaration": true,
-    "declarationMap": true,
-    "outDir": "dist",
-    "rootDir": "src",
-    "target": "es6",
-    "module": "nodenext",
-    "moduleResolution": "nodenext",
-    "jsx": "react-jsx"
-  }
-}