{"_id":"@beisen/storybook-react-simple-di","_rev":"4-d38a450a863069f8a969f879ec2bab44","name":"@beisen/storybook-react-simple-di","dist-tags":{"latest":"1.3.1"},"versions":{"1.3.0":{"name":"@beisen/storybook-react-simple-di","version":"1.3.0","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"license":"MIT","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"prepublish":". ./scripts/prepublish.sh","lint":"eslint ./lib","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","test":"npm run lint && npm run testonly"},"devDependencies":{"nodemon":"1.7.x","mocha":"2.x.x","chai":"3.x.x","eslint":"1.7.x","eslint-plugin-react":"3.x.x","babel-eslint":"4.x.x","eslint-plugin-babel":"2.x.x","babel-cli":"6.x.x","babel-core":"6.x.x","babel-polyfill":"6.x.x","babel-preset-es2015":"6.x.x","babel-preset-stage-2":"6.x.x","babel-preset-react":"6.x.x","babel-plugin-transform-runtime":"6.x.x","react":"^15.0.0","react-dom":"^15.0.0","react-addons-test-utils":"^15.0.0","enzyme":"^2.2.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"6.x.x","@beisen/create-react-class":"^15.6.3","hoist-non-react-statics":"1.x.x","prop-types":"^15.6.0"},"bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"homepage":"https://github.com/storybooks/react-simple-di#readme","_id":"@beisen/storybook-react-simple-di@1.3.0","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-A0+jurQ8Va5ZZ7ZtVIP8r7QdU3r3yVujcTE4fcuy3pfmBcbsH+X4f2bY1IQCWYgHJTc3Kd76+3YK9xLzDAhFCw==","shasum":"1b3cf83721ab331721156ba76021e48df4eceb01","tarball":"https://registry.npmjs.org/@beisen/storybook-react-simple-di/-/storybook-react-simple-di-1.3.0.tgz","fileCount":8,"unpackedSize":9391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/6zkCRA9TVsSAnZWagAAn/MP/0HSNBBVEBtx4GFal+Zg\nZsQvDQAotfQGwNlAfM7YUH565rG4SAHvs/O0VLlhFJNLJ5XA9NO/cZECDILt\nY8qO84jZRRV5SDIk0ij/sQXo6qQPrYU0G80ts4YGbFhZId6MoyhPgxH6Q/kn\nnSWnmj2sgQxGJcKVps14hUP0z0Q/dadQb7O62hhFtkhc/oOnVAztU4EsNzCm\nMbQKB8Lc5IelpQ0kpbco+ZakV4vycEAraQxDikmf3rKUUhxjcuQS4riL0tUp\nKOKi9MZokjo9uo2ffgzsHhsiBmII4cK+rldrr63JQ3KJCwnaYhH6/uuD81J1\naVeaiJxvmPvU7B6VaUbqaIgI2/5p6p6a3j3dp5Mn+/8pHEz3O+4hTRYtZOfs\n+aX0XHXe3JRaJusKpYXANO0jORy+tQGjIUBieKW2+d/BfRovbYE6s1rfPuyk\n8Yk6rWEYmJ/QHtZOvADNk/Pf117pPsw/WobnAsFQNIiZC8cI48Gl1yNMCSgM\nVsnkTegXabSk5BRAlFMLeFjIAzmOp6KXU/wVBH6yJ9LHT1VYySzSmtnKNPlC\n8grxIJZX6LXkhnEiFMf3pWiG8aB+MG4FxjjnJjBHsMvP958h15yZEEb6S7Ep\nuT4NAzEnfWb+MZCMEt2qqnq7KcpjSobHQ3vwz1CacxM+mG2DWDvO0Jjmu8Yd\n3wl/\r\n=Pd9I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqIDSZT5UPlfTrl3AaXHHc2egERDa1Hz7vpeKHiI8RjAiEAziX74R3f4PLEvJFAbg82I880dCCs7joS8Fa6KG4QV+w="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-react-simple-di_1.3.0_1543482595571_0.48116486540897996"},"_hasShrinkwrap":false},"1.3.1":{"name":"@beisen/storybook-react-simple-di","version":"1.3.1","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"license":"MIT","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"prepublish":". ./scripts/prepublish.sh","lint":"eslint ./lib","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","test":"npm run lint && npm run testonly"},"devDependencies":{"nodemon":"1.7.x","mocha":"2.x.x","chai":"3.x.x","eslint":"1.7.x","eslint-plugin-react":"3.x.x","babel-eslint":"4.x.x","eslint-plugin-babel":"2.x.x","babel-cli":"6.x.x","babel-core":"6.x.x","babel-polyfill":"6.x.x","babel-preset-es2015":"6.x.x","babel-preset-stage-2":"6.x.x","babel-preset-react":"6.x.x","babel-plugin-transform-runtime":"6.x.x","react":"^15.0.0","react-dom":"^15.0.0","react-addons-test-utils":"^15.0.0","enzyme":"^2.2.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"6.x.x","@beisen/create-react-class":"^15.6.3","hoist-non-react-statics":"1.x.x","prop-types":"^15.6.0"},"bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"homepage":"https://github.com/storybooks/react-simple-di#readme","_id":"@beisen/storybook-react-simple-di@1.3.1","_npmVersion":"6.1.0","_nodeVersion":"10.7.0","_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"dist":{"integrity":"sha512-vW4844adkT54hwmvpo2COsb/6UB40JEkqdU5CTasHW+o41/SrRUdO19nJutIxWkJ2SNquCBicZ2KwFJAZZSDCg==","shasum":"50d86411f7b9c512fe45040ab100b4ec48bf1d5d","tarball":"https://registry.npmjs.org/@beisen/storybook-react-simple-di/-/storybook-react-simple-di-1.3.1.tgz","fileCount":8,"unpackedSize":9399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/7fQCRA9TVsSAnZWagAAmlEP/0tQDmJAVsYF0pHWTn3z\nmepIBs33juikNI8vPFrmx6mylR/SwzXIc5jj0IVmIqg0jXnUJQ4UBaoi+ofF\n+87JP/BG66OhFx+xSmklAnIoVyPHeb44cCm6maDWsfhzwH8PTVDPYk7TDx1e\naZiNvuoBsHqUZguSqMYGh/uizsmaUae+5wG2RB1U0fMVJzX2syBNP8orenhV\npbpFS3ohhj487GFBP10PnLdO7uxHO2r/2DeTPyo9HQlcDwtGmOlT4EzEUN35\niOPQQsv8Bhro5hu2l2pEX8+E0u8eclA65dde5+UNNxTTOu+9a954neEZMQDI\nsEpRzVNExysMA7hbFquS60EOXGyk/+3YJRtnp9FvWIk2qSjaBJaa981Q2OkQ\nWQfuKMVUN/H8IfxlUAZIa6YRTS/dQfIRLlAFFD2mo88nF0wvOoim6ivWzcT6\nAI1y1jAkUVHbHb2Qhl8imae5qnjSTMAqtUEW8Dx5G01/JxULmRLLnShVdFs0\n4ve0QFhQ8Dwhzy9jt33CsJkKVZQ8Hutr7Dtb8OgzBA0AWfLA5ClJjeSPnjkk\nVBvvqY/NxAZQmaGpHjzpN4goBltb60LDMpd6w1U6b5v/uxpwpbforFMYQeaP\nn1Nve42td3gWTNhq4wwNuO2pweKr7DNvC3KEI1WuzNP8U/RwNiEjWUSZ6+ut\nvsAd\r\n=Sff/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwxHdMhwrfltpdFXe9OT/A3WapdzuQLTtiaLVJi9nsqgIgVDY7I9gF1KaEF+xiMTiJt6LCcTDlRwzwQGc4/yzZbGA="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-react-simple-di_1.3.1_1543485392314_0.29402360034014796"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-29T09:09:55.429Z","1.3.0":"2018-11-29T09:09:55.670Z","modified":"2022-04-04T18:19:22.489Z","1.3.1":"2018-11-29T09:56:32.463Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"Simple Dependancy Injection Solution for React","homepage":"https://github.com/storybooks/react-simple-di#readme","repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"license":"MIT","readme":"# react-simple-di\n\nSimple dependancy injection solution for React.\n\n### Installation\n\n```\nnpm i react-simple-di\n```\n\n### Intro\n\nIn `react-simple-di`, we've two types of dependencies, they are:\n\n1. context - These are usually, configurations, models and client for different remote data solutions.\n2. actions - Actions are simple functions which used to perform business logic with the help of the above context.\n\n> Every action will receive the `context` as it's first argument.\n\n### Injecting Dependancies\n\nFirst, we need to inject dependencies to a root level React component. Mostly, this will be the main layout component of our app.\n\nHere are our dependencies:\n```js\nconst context = {\n    DB,\n    Router,\n    appName: 'My Blog'\n};\n\nconst actions = {\n    posts: {\n        create({DB, Router}, title, content) {\n            const id = String(Math.random());\n            DB.createPost(id, title, content);\n            Router.go(`/post/${id}`);\n        }\n    }\n};\n```\n\nFirst we've defined our context. Then, we have our actions. Here actions must follow a structure like mentioned above.\n\nLet's inject our dependencies:\n\n```js\nimport {injectDeps} from 'react-simple-di';\nimport Layout from './layout.jsx';\n\n// Above mentioned actions and context are defined here.\n\nconst LayoutWithDeps = injectDeps(context, actions)(Layout);\n```\n\nNow you can use `LayoutWithDeps` anywhere in your app.\n\n## Using Depedencies\n\nAny component rendered inside `LayoutWithDeps` can access both context and actions. \n\nWhen using dependecies it will compose a new React component and pass dependencies via props to the original component.\n\nFirst let's create our UI component. Here it will expect dependecies to come via props `appName` and `createPost`.\n\n```js\nclass CreatePost extends React.Component {\n    render() {\n        const {appName} = this.props;\n        return (\n            <div>\n                Create a blog post on app: ${appName}. <br/>\n                <button onClick={this.create.bind(this)}>Create Now</button>\n            </div>\n        );\n    }\n\n    create() {\n        const {createPost} = this.props;\n        createPost('My Blog Title', 'Some Content');\n    }\n}\n```\n\nSo, let's use dependencies:\n\n```js\nimport {useDeps} from 'react-simple-di';\n\n// Assume above mentioned CreatePost react component is\n// defined here.\n\nconst depsToPropsMapper = (context, actions) => ({\n    appName: context.appName,\n    createPost: actions.posts.create\n});\n\nconst CreatePostWithDeps = useDeps(depsToPropsMapper)(CreatePost);\n```\n\nThat's it. \n\n> Note: Here when calling the `actions.posts.create` action, you don't need to provide the context as the first argument. It'll handle by `react-simple-di`.\n\n**Default Mapper**\n\nIf you didn't provide a mapper function, useDeps will use a default mapper function will allows you to get context and props directy. Here's that default mapper:\n\n```js\nconst mapper = (context, actions) => ({\n    context: () => context,\n    actions: () => actions\n});\n```\n","readmeFilename":"README.md"}