@typewirets/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 TypeWireTS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

package/README.md

@@ -0,0 +1,205 @@
+# TypeWire React
+
+React integration for TypeWireTS - seamlessly integrate TypeWire dependency injection with React components.
+
+## Installation
+
+```bash
+npm install @typewirets/react @typewirets/core
+```
+
+## Quick Start
+
+The most effective pattern for using TypeWire with React is with an async main function:
+
+```tsx
+import { TypeWireContainer, typeWireGroupOf } from "@typewirets/core";
+import { ResolutionContextProvider } from "@typewirets/react";
+import ReactDOM from "react-dom/client";
+import { ApiWire } from "./wires/api.wire";
+import { UserStoreWire } from "./wires/user-store.wire";
+import { App } from "./App";
+
+async function main() {
+  // Create the container
+  const container = new TypeWireContainer();
+  
+  // Group all your TypeWires
+  const wireGroup = typeWireGroupOf([
+    ApiWire,
+    UserStoreWire,
+    // Add all your application wires here
+  ]);
+
+  // Apply all wires to the container at once
+  await wireGroup.apply(container);
+  
+  // Render your React app with the container
+  const rootEl = document.getElementById("root");
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(<App container={container} />);
+}
+
+// Start your application
+main().catch(console.error);
+```
+
+Then in your App component:
+
+```tsx
+import { ResolutionContextProvider } from "@typewirets/react";
+import type { ResolutionContext } from "@typewirets/core";
+import { Suspense } from "react";
+
+export function App({ container }: { container: ResolutionContext }) {
+  return (
+    <ResolutionContextProvider resolutionContext={container}>
+      <Suspense fallback={<div>Loading application...</div>}>
+        <YourComponents />
+      </Suspense>
+    </ResolutionContextProvider>
+  );
+}
+```
+
+## Defining TypeWires for React
+
+When defining TypeWires for React, use the `createWith` pattern for better dependency management:
+
+```tsx
+// api.wire.ts
+import { typeWireOf } from "@typewirets/core";
+
+export const ApiWire = typeWireOf({
+  token: "Api",
+  createWith() {
+    return {
+      async fetchUsers() {
+        const response = await fetch("/api/users");
+        return response.json();
+      },
+      async updateUser(id: string, data: any) {
+        // Implementation
+      }
+    };
+  },
+});
+
+// user-store.wire.ts
+import { typeWireOf } from "@typewirets/core";
+import { create } from "zustand";
+import { ApiWire } from "./api.wire";
+
+export const UserStoreWire = typeWireOf({
+  token: "UserStore",
+  imports: {
+    api: ApiWire,
+  },
+  createWith({ api }) {
+    return create((set) => ({
+      users: [],
+      loading: false,
+      error: null,
+      
+      fetchUsers: async () => {
+        set({ loading: true });
+        try {
+          const users = await api.fetchUsers();
+          set({ users, loading: false });
+        } catch (error) {
+          set({ error, loading: false });
+        }
+      },
+      
+      updateUser: async (id: string, data: any) => {
+        // Implementation
+      }
+    }));
+  },
+});
+```
+
+## Using TypeWires in Components
+
+Access your TypeWires in React components with the `useTypeWire` hook:
+
+```tsx
+import { useTypeWire } from "@typewirets/react";
+import { UserStoreWire } from "./wires/user-store.wire";
+import { useEffect } from "react";
+
+export function UserList() {
+  const userStore = useTypeWire(UserStoreWire);
+  const { users, loading, error, fetchUsers } = userStore;
+  
+  useEffect(() => {
+    fetchUsers();
+  }, [fetchUsers]);
+  
+  if (loading) return <div>Loading users...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+  
+  return (
+    <ul>
+      {users.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+## Handling Async TypeWires
+
+When using TypeWires with async initialization, React Suspense handles the loading state:
+
+```tsx
+// Component that depends on an async TypeWire
+function UserDashboard() {
+  const userStore = useTypeWire(UserStoreWire);
+  
+  // If UserStoreWire has async initialization,
+  // React Suspense will catch the promise and show the fallback
+  
+  return <UserList />;
+}
+
+// In your parent component
+function App({ container }) {
+  return (
+    <ResolutionContextProvider resolutionContext={container}>
+      <Suspense fallback={<div>Loading dashboard...</div>}>
+        <UserDashboard />
+      </Suspense>
+    </ResolutionContextProvider>
+  );
+}
+```
+
+## Core Components
+
+- **ResolutionContextProvider**: Provides TypeWire container to React components
+- **useTypeWire**: Hook to access TypeWire instances in components
+- **useContainer**: Direct access to the ResolutionContext (advanced use cases)
+
+## Best Practices
+
+1. **Initialize TypeWires in a main function**:
+   - Group your TypeWires with `typeWireGroupOf`
+   - Apply them all at once before rendering
+
+2. **Use state management libraries with TypeWire**:
+   - Zustand, Redux, or MobX work well with TypeWire
+   - Inject TypeWires as dependencies using `imports` and `createWith`
+
+3. **Structure your application by features**:
+   - Group related TypeWires by feature
+   - Co-locate TypeWires with their React components
+
+4. **Ensure proper cleanup**:
+   - If your TypeWires need cleanup, register cleanup handlers
+   - Use React's useEffect for component-level cleanup
+
+## License
+
+MIT 

package/dist/cjs/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type ResolutionContext, type TypeSymbol, type TypeWire } from "@typewirets/core";
+export declare class ReactResolutionContext {
+    #private;
+    constructor(resolutionContext: ResolutionContext);
+    getSync<T>(typeSymbol: TypeSymbol<T>): T;
+    get<T>(typeSymbol: TypeSymbol<T>): Promise<T>;
+}
+export declare const ContainerContext: React.Context<ResolutionContext>;
+export declare function useContainer(): ResolutionContext;
+export declare function useTypeWire<T>(typeWire: TypeWire<T>): T;
+export declare function ResolutionContextProvider(props: {
+    resolutionContext: ResolutionContext;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,QAAQ,EAGd,MAAM,kBAAkB,CAAC;AAE1B,qBAAa,sBAAsB;;gBAKrB,iBAAiB,EAAE,iBAAiB;IAIhD,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;IAOlC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;CAqBpD;AAED,eAAO,MAAM,gBAAgB,kCAE5B,CAAC;AAEF,wBAAgB,YAAY,sBAG3B;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAsCvD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAUA"}

package/dist/cjs/index.js

@@ -0,0 +1,136 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 _ReactResolutionContext_resolutionContext, _ReactResolutionContext_resolutions, _ReactResolutionContext_resolutionErrors;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContainerContext = exports.ReactResolutionContext = void 0;
+exports.useContainer = useContainer;
+exports.useTypeWire = useTypeWire;
+exports.ResolutionContextProvider = ResolutionContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const core_1 = require("@typewirets/core");
+class ReactResolutionContext {
+    constructor(resolutionContext) {
+        _ReactResolutionContext_resolutionContext.set(this, void 0);
+        _ReactResolutionContext_resolutions.set(this, new Map());
+        _ReactResolutionContext_resolutionErrors.set(this, new Map());
+        __classPrivateFieldSet(this, _ReactResolutionContext_resolutionContext, resolutionContext, "f");
+    }
+    getSync(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        return __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").getSync(typeSymbol);
+    }
+    async get(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        const promise = __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").get(typeSymbol.symbol);
+        if (promise) {
+            return promise;
+        }
+        const newResolution = __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").get(typeSymbol);
+        __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").set(typeSymbol.symbol, newResolution);
+        return newResolution
+            .catch((err) => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").set(typeSymbol.symbol, err);
+            throw err;
+        })
+            .finally(() => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").delete(typeSymbol.symbol);
+        });
+    }
+}
+exports.ReactResolutionContext = ReactResolutionContext;
+_ReactResolutionContext_resolutionContext = new WeakMap(), _ReactResolutionContext_resolutions = new WeakMap(), _ReactResolutionContext_resolutionErrors = new WeakMap();
+exports.ContainerContext = React.createContext(new ReactResolutionContext(new core_1.TypeWireContainer()));
+function useContainer() {
+    const container = React.useContext(exports.ContainerContext);
+    return container;
+}
+function useTypeWire(typeWire) {
+    const container = useContainer();
+    const [value, setValue] = React.useState(() => {
+        try {
+            return typeWire.getInstanceSync(container);
+        }
+        catch (err) {
+            if (err instanceof core_1.TypeWireError && err.retriable) {
+                return null;
+            }
+            throw err;
+        }
+    });
+    const promise = typeWire.getInstance(container);
+    React.useEffect(() => {
+        let mounted = false;
+        promise
+            .then((value) => {
+            if (mounted) {
+                console.log("we got the value", value);
+                setValue(() => value);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [promise]);
+    if (value) {
+        return value;
+    }
+    throw promise;
+}
+function ResolutionContextProvider(props) {
+    const resolutionContext = props.resolutionContext instanceof ReactResolutionContext
+        ? props.resolutionContext
+        : new ReactResolutionContext(props.resolutionContext);
+    return ((0, jsx_runtime_1.jsx)(exports.ContainerContext, { value: resolutionContext, children: props.children }));
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type ResolutionContext, type TypeSymbol, type TypeWire } from "@typewirets/core";
+export declare class ReactResolutionContext {
+    #private;
+    constructor(resolutionContext: ResolutionContext);
+    getSync<T>(typeSymbol: TypeSymbol<T>): T;
+    get<T>(typeSymbol: TypeSymbol<T>): Promise<T>;
+}
+export declare const ContainerContext: React.Context<ResolutionContext>;
+export declare function useContainer(): ResolutionContext;
+export declare function useTypeWire<T>(typeWire: TypeWire<T>): T;
+export declare function ResolutionContextProvider(props: {
+    resolutionContext: ResolutionContext;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,QAAQ,EAGd,MAAM,kBAAkB,CAAC;AAE1B,qBAAa,sBAAsB;;gBAKrB,iBAAiB,EAAE,iBAAiB;IAIhD,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;IAOlC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;CAqBpD;AAED,eAAO,MAAM,gBAAgB,kCAE5B,CAAC;AAEF,wBAAgB,YAAY,sBAG3B;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAsCvD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAUA"}

package/dist/esm/index.js

@@ -0,0 +1,96 @@
+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 _ReactResolutionContext_resolutionContext, _ReactResolutionContext_resolutions, _ReactResolutionContext_resolutionErrors;
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TypeWireError, TypeWireContainer, } from "@typewirets/core";
+export class ReactResolutionContext {
+    constructor(resolutionContext) {
+        _ReactResolutionContext_resolutionContext.set(this, void 0);
+        _ReactResolutionContext_resolutions.set(this, new Map());
+        _ReactResolutionContext_resolutionErrors.set(this, new Map());
+        __classPrivateFieldSet(this, _ReactResolutionContext_resolutionContext, resolutionContext, "f");
+    }
+    getSync(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        return __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").getSync(typeSymbol);
+    }
+    async get(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        const promise = __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").get(typeSymbol.symbol);
+        if (promise) {
+            return promise;
+        }
+        const newResolution = __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").get(typeSymbol);
+        __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").set(typeSymbol.symbol, newResolution);
+        return newResolution
+            .catch((err) => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").set(typeSymbol.symbol, err);
+            throw err;
+        })
+            .finally(() => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").delete(typeSymbol.symbol);
+        });
+    }
+}
+_ReactResolutionContext_resolutionContext = new WeakMap(), _ReactResolutionContext_resolutions = new WeakMap(), _ReactResolutionContext_resolutionErrors = new WeakMap();
+export const ContainerContext = React.createContext(new ReactResolutionContext(new TypeWireContainer()));
+export function useContainer() {
+    const container = React.useContext(ContainerContext);
+    return container;
+}
+export function useTypeWire(typeWire) {
+    const container = useContainer();
+    const [value, setValue] = React.useState(() => {
+        try {
+            return typeWire.getInstanceSync(container);
+        }
+        catch (err) {
+            if (err instanceof TypeWireError && err.retriable) {
+                return null;
+            }
+            throw err;
+        }
+    });
+    const promise = typeWire.getInstance(container);
+    React.useEffect(() => {
+        let mounted = false;
+        promise
+            .then((value) => {
+            if (mounted) {
+                console.log("we got the value", value);
+                setValue(() => value);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [promise]);
+    if (value) {
+        return value;
+    }
+    throw promise;
+}
+export function ResolutionContextProvider(props) {
+    const resolutionContext = props.resolutionContext instanceof ReactResolutionContext
+        ? props.resolutionContext
+        : new ReactResolutionContext(props.resolutionContext);
+    return (_jsx(ContainerContext, { value: resolutionContext, children: props.children }));
+}
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/types/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type ResolutionContext, type TypeSymbol, type TypeWire } from "@typewirets/core";
+export declare class ReactResolutionContext {
+    #private;
+    constructor(resolutionContext: ResolutionContext);
+    getSync<T>(typeSymbol: TypeSymbol<T>): T;
+    get<T>(typeSymbol: TypeSymbol<T>): Promise<T>;
+}
+export declare const ContainerContext: React.Context<ResolutionContext>;
+export declare function useContainer(): ResolutionContext;
+export declare function useTypeWire<T>(typeWire: TypeWire<T>): T;
+export declare function ResolutionContextProvider(props: {
+    resolutionContext: ResolutionContext;
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,UAAU,EACf,KAAK,QAAQ,EAGd,MAAM,kBAAkB,CAAC;AAE1B,qBAAa,sBAAsB;;gBAKrB,iBAAiB,EAAE,iBAAiB;IAIhD,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC;IAOlC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;CAqBpD;AAED,eAAO,MAAM,gBAAgB,kCAE5B,CAAC;AAEF,wBAAgB,YAAY,sBAG3B;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAsCvD;AAED,wBAAgB,yBAAyB,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAUA"}

package/dist/types/index.js

@@ -0,0 +1,96 @@
+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 _ReactResolutionContext_resolutionContext, _ReactResolutionContext_resolutions, _ReactResolutionContext_resolutionErrors;
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TypeWireError, TypeWireContainer, } from "@typewirets/core";
+export class ReactResolutionContext {
+    constructor(resolutionContext) {
+        _ReactResolutionContext_resolutionContext.set(this, void 0);
+        _ReactResolutionContext_resolutions.set(this, new Map());
+        _ReactResolutionContext_resolutionErrors.set(this, new Map());
+        __classPrivateFieldSet(this, _ReactResolutionContext_resolutionContext, resolutionContext, "f");
+    }
+    getSync(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        return __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").getSync(typeSymbol);
+    }
+    async get(typeSymbol) {
+        if (__classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").has(typeSymbol.symbol)) {
+            throw __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").get(typeSymbol.symbol);
+        }
+        const promise = __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").get(typeSymbol.symbol);
+        if (promise) {
+            return promise;
+        }
+        const newResolution = __classPrivateFieldGet(this, _ReactResolutionContext_resolutionContext, "f").get(typeSymbol);
+        __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").set(typeSymbol.symbol, newResolution);
+        return newResolution
+            .catch((err) => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutionErrors, "f").set(typeSymbol.symbol, err);
+            throw err;
+        })
+            .finally(() => {
+            __classPrivateFieldGet(this, _ReactResolutionContext_resolutions, "f").delete(typeSymbol.symbol);
+        });
+    }
+}
+_ReactResolutionContext_resolutionContext = new WeakMap(), _ReactResolutionContext_resolutions = new WeakMap(), _ReactResolutionContext_resolutionErrors = new WeakMap();
+export const ContainerContext = React.createContext(new ReactResolutionContext(new TypeWireContainer()));
+export function useContainer() {
+    const container = React.useContext(ContainerContext);
+    return container;
+}
+export function useTypeWire(typeWire) {
+    const container = useContainer();
+    const [value, setValue] = React.useState(() => {
+        try {
+            return typeWire.getInstanceSync(container);
+        }
+        catch (err) {
+            if (err instanceof TypeWireError && err.retriable) {
+                return null;
+            }
+            throw err;
+        }
+    });
+    const promise = typeWire.getInstance(container);
+    React.useEffect(() => {
+        let mounted = false;
+        promise
+            .then((value) => {
+            if (mounted) {
+                console.log("we got the value", value);
+                setValue(() => value);
+            }
+        })
+            .catch((err) => {
+            console.error(err);
+        });
+        return () => {
+            mounted = false;
+        };
+    }, [promise]);
+    if (value) {
+        return value;
+    }
+    throw promise;
+}
+export function ResolutionContextProvider(props) {
+    const resolutionContext = props.resolutionContext instanceof ReactResolutionContext
+        ? props.resolutionContext
+        : new ReactResolutionContext(props.resolutionContext);
+    return (_jsx(ContainerContext, { value: resolutionContext, children: props.children }));
+}
+//# sourceMappingURL=index.js.map

package/dist/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,aAAa,EACb,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,OAAO,sBAAsB;IAKjC,YAAY,iBAAoC;QAJvC,4DAAsC;QACtC,8CAA8C,IAAI,GAAG,EAAE,EAAC;QACxD,mDAA0C,IAAI,GAAG,EAAE,EAAC;QAG3D,uBAAA,IAAI,6CAAsB,iBAAiB,MAAA,CAAC;IAC9C,CAAC;IAED,OAAO,CAAI,UAAyB;QAClC,IAAI,uBAAA,IAAI,gDAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YAClD,MAAM,uBAAA,IAAI,gDAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,uBAAA,IAAI,iDAAmB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACrD,CAAC;IAED,KAAK,CAAC,GAAG,CAAI,UAAyB;QACpC,IAAI,uBAAA,IAAI,gDAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;YAClD,MAAM,uBAAA,IAAI,gDAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACtD,CAAC;QAED,MAAM,OAAO,GAAG,uBAAA,IAAI,2CAAa,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAe,CAAC;QACvE,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,MAAM,aAAa,GAAG,uBAAA,IAAI,iDAAmB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC9D,uBAAA,IAAI,2CAAa,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACxD,OAAO,aAAa;aACjB,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,uBAAA,IAAI,gDAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YACnD,MAAM,GAAG,CAAC;QACZ,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,uBAAA,IAAI,2CAAa,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;IACP,CAAC;CACF;;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CACjD,IAAI,sBAAsB,CAAC,IAAI,iBAAiB,EAAE,CAAC,CACpD,CAAC;AAEF,MAAM,UAAU,YAAY;IAC1B,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;IACrD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,MAAM,UAAU,WAAW,CAAI,QAAqB;IAClD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC5C,IAAI,CAAC;YACH,OAAO,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;QAC7C,CAAC;QAAC,OAAO,GAAY,EAAE,CAAC;YACtB,IAAI,GAAG,YAAY,aAAa,IAAI,GAAG,CAAC,SAAS,EAAE,CAAC;gBAClD,OAAO,IAAI,CAAC;YACd,CAAC;YAED,MAAM,GAAG,CAAC;QACZ,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAChD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,OAAO,GAAG,KAAK,CAAC;QAEpB,OAAO;aACJ,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;YACd,IAAI,OAAO,EAAE,CAAC;gBACZ,OAAO,CAAC,GAAG,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;gBACvC,QAAQ,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE;YACb,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACrB,CAAC,CAAC,CAAC;QACL,OAAO,GAAG,EAAE;YACV,OAAO,GAAG,KAAK,CAAC;QAClB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,OAAO,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,KAGzC;IACC,MAAM,iBAAiB,GACrB,KAAK,CAAC,iBAAiB,YAAY,sBAAsB;QACvD,CAAC,CAAC,KAAK,CAAC,iBAAiB;QACzB,CAAC,CAAC,IAAI,sBAAsB,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;IAC1D,OAAO,CACL,KAAC,gBAAgB,IAAC,KAAK,EAAE,iBAAiB,YACvC,KAAK,CAAC,QAAQ,GACE,CACpB,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@typewirets/react",
+  "version": "0.1.0",
+  "description": "React adapter for TypeWire dependency injection",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src/*.ts",
+    "src/*.tsx",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/__tests__/**",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "typescript",
+    "dependency-injection",
+    "di",
+    "react",
+    "adapter",
+    "typewire"
+  ],
+  "author": "Rex Kim",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/typewirets/typewirets.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/typewirets/typewirets/issues"
+  },
+  "homepage": "https://github.com/typewirets/typewirets#readme",
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/node": "^22.13.10",
+    "@types/react": "^19.1.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.1.0",
+    "react": "^19.1.0",
+    "rimraf": "^6.0.1",
+    "typescript": "5.8.2",
+    "vitest": "^3.0.8",
+    "zustand": "^5.0.3",
+    "@typewirets/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@typewirets/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "pnpm clean && pnpm --filter '@typewirets/react' --parallel '/^build:.*/'",
+    "build:cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module Commonjs --moduleResolution Node",
+    "build:esm": "tsc --project tsconfig.build.json --outDir dist/esm --module ES2020 --moduleResolution Node",
+    "build:types": "tsc --project tsconfig.build.json --outDir dist/types --declaration --declarationMap",
+    "dev": "pnpm clean && pnpm --filter '@typewirets/react' --parallel '/^dev:.*/'",
+    "dev:cjs": "tsc --watch --project tsconfig.build.json --outDir dist/cjs --module Commonjs --moduleResolution Node",
+    "dev:esm": "tsc --watch --project tsconfig.build.json --outDir dist/esm --module ES2020 --moduleResolution Node",
+    "dev:types": "tsc --watch --project tsconfig.build.json --outDir dist/types --declaration --declarationMap",
+    "clean": "rimraf dist",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,111 @@
+import * as React from "react";
+import {
+  type ResolutionContext,
+  type TypeSymbol,
+  type TypeWire,
+  TypeWireError,
+  TypeWireContainer,
+} from "@typewirets/core";
+
+export class ReactResolutionContext {
+  readonly #resolutionContext: ResolutionContext;
+  readonly #resolutions: Map<symbol, Promise<unknown>> = new Map();
+  readonly #resolutionErrors: Map<symbol, unknown> = new Map();
+
+  constructor(resolutionContext: ResolutionContext) {
+    this.#resolutionContext = resolutionContext;
+  }
+
+  getSync<T>(typeSymbol: TypeSymbol<T>): T {
+    if (this.#resolutionErrors.has(typeSymbol.symbol)) {
+      throw this.#resolutionErrors.get(typeSymbol.symbol);
+    }
+    return this.#resolutionContext.getSync(typeSymbol);
+  }
+
+  async get<T>(typeSymbol: TypeSymbol<T>): Promise<T> {
+    if (this.#resolutionErrors.has(typeSymbol.symbol)) {
+      throw this.#resolutionErrors.get(typeSymbol.symbol);
+    }
+
+    const promise = this.#resolutions.get(typeSymbol.symbol) as Promise<T>;
+    if (promise) {
+      return promise;
+    }
+
+    const newResolution = this.#resolutionContext.get(typeSymbol);
+    this.#resolutions.set(typeSymbol.symbol, newResolution);
+    return newResolution
+      .catch((err) => {
+        this.#resolutionErrors.set(typeSymbol.symbol, err);
+        throw err;
+      })
+      .finally(() => {
+        this.#resolutions.delete(typeSymbol.symbol);
+      });
+  }
+}
+
+export const ContainerContext = React.createContext<ResolutionContext>(
+  new ReactResolutionContext(new TypeWireContainer()),
+);
+
+export function useContainer() {
+  const container = React.useContext(ContainerContext);
+  return container;
+}
+
+export function useTypeWire<T>(typeWire: TypeWire<T>): T {
+  const container = useContainer();
+  const [value, setValue] = React.useState(() => {
+    try {
+      return typeWire.getInstanceSync(container);
+    } catch (err: unknown) {
+      if (err instanceof TypeWireError && err.retriable) {
+        return null;
+      }
+
+      throw err;
+    }
+  });
+
+  const promise = typeWire.getInstance(container);
+  React.useEffect(() => {
+    let mounted = false;
+
+    promise
+      .then((value) => {
+        if (mounted) {
+          console.log("we got the value", value);
+          setValue(() => value);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+    return () => {
+      mounted = false;
+    };
+  }, [promise]);
+
+  if (value) {
+    return value;
+  }
+
+  throw promise;
+}
+
+export function ResolutionContextProvider(props: {
+  resolutionContext: ResolutionContext;
+  children?: React.ReactNode;
+}) {
+  const resolutionContext =
+    props.resolutionContext instanceof ReactResolutionContext
+      ? props.resolutionContext
+      : new ReactResolutionContext(props.resolutionContext);
+  return (
+    <ContainerContext value={resolutionContext}>
+      {props.children}
+    </ContainerContext>
+  );
+}