{"_id":"@atomic-design/di","_rev":"2-0fb1ed706abcf64ee4705d907b4b53a9","name":"@atomic-design/di","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.2":{"name":"@atomic-design/di","version":"0.1.2","_id":"@atomic-design/di@0.1.2","maintainers":[{"name":"atomic-design","email":"designtokensnpm@gmail.com"}],"dist":{"shasum":"8a445408a07f47453d0676335227c4dc7314e295","tarball":"https://registry.npmjs.org/@atomic-design/di/-/di-0.1.2.tgz","fileCount":8,"integrity":"sha512-owJKus4DiaIID4phflNWHwxZePUE2tbTsHbq8Ejl5rFctnRE1lySmSj0R2g9Jya4VD2uOhs1elwsWusEunJN9w==","signatures":[{"sig":"MEQCIAxPGd1QInMtSVyQPRyC/1UVVJEux/if/I2TQPih54JPAiAzDKYVAmDsgFycvDATAsBkcAu7oN3fvOSG5m90FP4Unw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15332},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"277c77588d9e3067bbd02e25511f2847a34ae559","scripts":{"dev":"vite dev","lint":"eslint .","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"atomic-design","actor":{"name":"atomic-design","type":"user","email":"designtokensnpm@gmail.com"},"email":"designtokensnpm@gmail.com"},"_npmVersion":"10.8.2","description":"> **Dependency Injection** utilities for Atomic Design contexts in React.","directories":{},"_nodeVersion":"20.19.2","dependencies":{"react":"^19.1.0","react-dom":"^19.1.0","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.2.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^6.2.4","eslint":"^9.23.0","codools":"^0.2.17","globals":"^16.0.0","prettier":"^3.5.3","@eslint/js":"^9.23.0","typescript":"^5.8.2","@types/node":"^22.14.0","@types/react":"^19.0.12","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.0.4","typescript-eslint":"^8.29.0","eslint-plugin-react":"^7.37.4","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.5"},"_npmOperationalInternal":{"tmp":"tmp/di_0.1.2_1750434035449_0.515675554918247","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@atomic-design/di","version":"0.1.3","description":"Lightweight, type-safe dependency inversion utilities for Atomic Design architectures in React","keywords":["atomic-design","dependency-injection","dependency-inversion","di","react","react-context","react-hooks","design-system","variants","typescript","ssr","csr"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"scripts":{"install_and_build":"npm i && npm run build","dev":"vite dev","build":"vite build","preview":"vite preview","lint":"eslint ."},"peerDependencies":{"react":"^18.2.0 || ^19.0.0","react-dom":"^18.2.0 || ^19.0.0"},"devDependencies":{"@types/node":"^22.14.0","@types/react":"^19.0.12","@types/react-dom":"^19.0.4","codools":"^0.2.17","prettier":"^3.5.3","typescript":"^5.8.2","typescript-eslint":"^8.29.0","vite":"^6.3.5","vite-plugin-dts":"^4.5.3","react":"^19.1.0","react-dom":"^19.1.0"},"_id":"@atomic-design/di@0.1.3","gitHead":"1f4020bcb72c2992fc63affd64bc176674669571","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-BjxQsfbMuHcl589zAG1Fvz/xoAhKX4/k6/Bhem4BFh3GWr3U2Gf/ljdsWlozXL5eRiWBIDEUn1MtetSh3WofbA==","shasum":"2320e269d084ced3823b7d87b6530f9d8c79e0a8","tarball":"https://registry.npmjs.org/@atomic-design/di/-/di-0.1.3.tgz","fileCount":8,"unpackedSize":15465,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHm4YkRwHAVUT/BjUdURO/sxBBlNvGbR1m1G367lhhEmAiA1oBtkQpP3mimTVLcSsadasKqVrEGEbk4v4z0D4ef7GA=="}]},"_npmUser":{"name":"atomic-design","email":"designtokensnpm@gmail.com"},"directories":{},"maintainers":[{"name":"atomic-design","email":"designtokensnpm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/di_0.1.3_1755257304110_0.7248966205191714"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T15:40:35.355Z","modified":"2025-08-15T11:28:24.531Z","0.1.2":"2025-06-20T15:40:35.649Z","0.1.3":"2025-08-15T11:28:24.363Z"},"description":"Lightweight, type-safe dependency inversion utilities for Atomic Design architectures in React","maintainers":[{"name":"atomic-design","email":"designtokensnpm@gmail.com"}],"readme":"# @atomic-design/di\n\n> **Dependency Injection** utilities for Atomic Design contexts in React.\n\n## Overview\n\n`@atomic-design/di` provides a lightweight, type-safe dependency injection system tailored for Atomic Design architectures. It enables:\n\n* **Context-based injection** of styles, atoms, molecules, and custom services into React components.\n* **Named variants**: Swap implementations at runtime (e.g., feature flags, themes).\n* **Server-ready components**: Support for SSR/CSR via React Server Components and Suspense.\n* **Automatic dependency wiring**: Components don’t need manual prop drilling for shared dependencies.\n\n## Installation\n\n```bash\nnpm install @atomic-design/di\n# or\nyarn add @atomic-design/di\n```\n\n## Key Concepts\n\n### Spaces & Variants\n\n* **Space**: A logical group of dependencies (e.g., `styles`, `atoms`, `molecules`, or your own service spaces).\n* **Variant**: A named version of a space (e.g., `default`, `v1`, `v2`) that can provide different implementations.\n\n### Hooks & Providers\n\n* **`useAtomic()`**: Hook to access the merged dependencies for the current React tree.\n* **`AtomicProvider`**: React component to set variants for a subtree.\n* **`getServerReadyComponent(space, name)`**: Wraps a component for server rendering without needing `deps` prop.\n\n### Automatic Injection\n\n* **`extractComponentDeps()`**: Wraps a set of components so they automatically receive a `deps` prop from context.\n* **`blankDeps()`**: Utility to create a stub dependency context (useful for testing or simple values).\n\n## Usage\n\n### Creating a Variants Context\n\n```tsx\nimport { createVariantsContext, extractComponentDeps, blankDeps } from '@atomic-design/di';\nimport { usePathname } from 'next/navigation';\n\n// Define how each space is loaded (async or sync)\nconst atomicContext = {\n  styles: async () => blankDeps((await import('@atomic-design/styles-base')).stylesContext.styles),\n  atoms: async () => extractComponentDeps((await import('@atomic-design/atoms-base')).atomsContext.atoms),\n  molecules: async () => extractComponentDeps((await import('@atomic-design/molecules-base')).moleculesContext.molecules),\n  // Custom helper space\n  moleculesHelpers: () => blankDeps({\n    useIsActiveLink: (href?: string) => {\n      const pathname = usePathname() || '/';\n      return href ? (href === '/' ? pathname === href : pathname.startsWith(href)) : false;\n    }\n  })\n};\n\n// Optional variants for a custom \"contextName\" space\nconst variantsBySpace = {\n  contextName: {\n    v1: () => blankDeps('Variant 1'),\n    v2: () => blankDeps('Variant 2'),\n  }\n};\n\nconst [useAtomic, AtomicProvider, getServerReadyComponent] =\n  createVariantsContext(atomicContext, variantsBySpace);\n```\n\n### Providing Variants\n\n```tsx\n<AtomicProvider space=\"contextName\" variant=\"v1\">\n  <App />\n</AtomicProvider>\n```\n\nYou can nest multiple providers to switch variants for subtrees.\n\n### Using Dependencies in Components\n\n```tsx\nimport React from 'react';\n\nfunction MyButton(props) {\n  const { atoms: { Button } } = useAtomic();\n  return <Button {...props}>Click me</Button>;\n}\n```\n\n### Server-Ready Components\n\nInstead of manually wiring `deps`, you can export:\n\n```tsx\nexport const Link = getServerReadyComponent('molecules', 'Link');\n```\n\nThen in your UI code:\n\n```tsx\n<Link href=\"/about\">About us</Link>\n```\n\n## API Reference\n\n### `createVariantsContext(context, variantsBySpace)`\n\n* **`context`**: Record of space loaders (`() => WrappedPromise<Context, AllSpaces>`).\n* **`variantsBySpace`**: Optional record defining named variants per space.\n\n**Returns**: `[useAtomic, AtomicProvider, getServerReadyComponent]`\n\n---\n\n### `extractComponentDeps(components)`\n\nWraps components so each receives `deps` automatically from the nearest `AtomicProvider`.\n\n* **`components`**: Object mapping names to React components expecting a `deps` prop.\n\n**Returns**: `{ output: wrappedComponents, setDepsHook }`\n\n---\n\n### `blankDeps(output)`\n\nCreates a stub context with a fixed `output` and no-op `setDepsHook`.\n\n## Contributing\n\n1. Fork the repo.\n2. Create your feature branch: `git checkout -b feature/foo`.\n3. Commit your changes.\n4. Push to the branch.\n5. Open a Pull Request.\n\nPlease follow existing code conventions (TypeScript, React JSX, ESLint, Prettier).\n\n## License\n\n[MIT](LICENSE)\n \n","readmeFilename":"README.md","keywords":["atomic-design","dependency-injection","dependency-inversion","di","react","react-context","react-hooks","design-system","variants","typescript","ssr","csr"]}