{"_id":"@besync/react-use-graphstore-channel","_rev":"2-109332bf0c1cfd9579fe7cad34affadd","name":"@besync/react-use-graphstore-channel","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.8":{"name":"@besync/react-use-graphstore-channel","version":"1.0.8","main":"dist/cjs/index.ts","module":"dist/esm/index.js","typings":"dist/index.d.ts","ts:main":"src/index.ts","repository":{"type":"git","url":"https://github.com/besync/graphstore"},"author":{"name":"BeSync"},"license":"Apache-2.0","dependencies":{"@besync/graphstore":"^1.0.8","@besync/react-use-graphstore":"^1.0.8","tslib":"^1.9.3"},"peerDependencies":{"react":"next"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"berun-dev clean","build":"berun-dev build && berun-dev build -- -m CommonJS --outDir dist/cjs","prepare":"berun-dev build -- --emitDeclarationOnly","test":"berun-dev test --env=jsdom","coverage":"berun-dev test --env=jsdom --coverage","prepublishOnly":"yarn lint && yarn build","lint":"berun-dev lint"},"gitHead":"e615349a58c02e387768ee15044fbda237c6818b","description":"## About","_id":"@besync/react-use-graphstore-channel@1.0.8","dist":{"shasum":"5998e4e4ff3afd1533a39ffb7885e1c37e94600e","integrity":"sha512-FLYOPg02Lc317Z+CbHXHvuPIZIqVXXIesNEzEi2JZV4dN9JQbT32TJemHyVAVtMR2Jkng34WDPJhnSEtyX5cuw==","tarball":"https://registry.npmjs.org/@besync/react-use-graphstore-channel/-/react-use-graphstore-channel-1.0.8.tgz","fileCount":23,"unpackedSize":33386,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb51TQCRA9TVsSAnZWagAAIqsP/14ON7Qv0Jjqya0uFFDU\nrb2otbYM9wLAE3aOm8H6+K7UUp5NwnfQLjdY1wbul6P2+TdVSJSQZwaYwxrf\ncBlV+Xk9nGF3z/YvtKH3+qeZtqebB40zPOqJKTH56/iZe8GwJqlRDrzYqLcq\njd5YKME+IVlHo+hoxg/f7UYg0wu7NfzoFTjgnc3IrN8fKik84VVTb4z71S/y\n5QvEuq9Js1iuS1ORP6xEzqHqzuEjsiwwgCMfLcdwRtk4UdTIqZIprtK9Whw8\nfC/8V7bBuXXAnDOQu6S3pJWNrBr5ShURxXOl/R2NVjerrxpr/gstdvHfWINY\nChjqWr5qSF4yQGTOu+oQUaCaHlBN5Uds96bySLMH3CHK/LRWKnpzTCbqILvH\nYEE7dkaiRtbxicNNV6BGfyf4u8V7G5lolaguVRZDKgV4DvYhXXZsXj2tYuPt\nDYy8yjTYNcwL155xFsTEcclSnQYEZbReBwWPKByguNz44vkIA8akT8iSK6xM\n8JX4j56BL44vmr0AJAjmQcnUbKBWp+cG7pADmfYrl1vEJO++B17M1nclREIF\nwWeawT9zTOf3dTAaRC3S1MJMKakBiU5hopca9MwUznt3CxatpFcd6CykCt/9\nS7MWiZyaSgD1a/MfxRqKmazP2PFXWzm0TMjuBmx0tt/u0WddwmXoMqnP7I9K\nOplF\r\n=nQB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+GQ76/o242QSdN09lOFvgZq1EVS2ZijCRubzEn9SyPgIgTYGvZ3kiLvbQ5OJli44EAHyi+K/DBaxTG2KdNsLCO34="}]},"maintainers":[{"name":"guycreate","email":"guy@nodekit.io"}],"_npmUser":{"name":"guycreate","email":"guy@nodekit.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-graphstore-channel_1.0.8_1541887183781_0.44825081974322245"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-10T21:59:43.732Z","1.0.8":"2018-11-10T21:59:43.956Z","modified":"2022-04-04T18:33:58.668Z"},"maintainers":[{"email":"admin@tinia.org","name":"tinialabs1"},{"email":"guy-nodekit@barnardmail.net","name":"guycreate"}],"description":"## About","repository":{"type":"git","url":"https://github.com/besync/graphstore"},"author":{"name":"BeSync"},"license":"Apache-2.0","readme":"# React GraphStore Channel Hook\n\n## About\n\nThis is a light-weight React Hook for for sharing observable state Between Parent and Child Iframe, Worker, etc.\n\nIt solves the issues associated with passing objects, events and function calls between parent and child, especially in Cross Domain situations. This allows expensive work and/or security-sensitive work to be offloaded to sandboxed child iframes.\n\nOptionally includes a zero-configuration, batteries included, runner for Webpack that adds decorator syntax to Babel.\n\n## Features\n\n- Written for modern (2019+) React\n- Designed to complemnent `@besync/react-use-iframe`\n- Secure, two way communication between host and child\n- Works for both same domain and cross domain situations\n- includes definitions for memory store\n- roadmap: definitions for Firebase realtime database and Firestore\n- Typescript definitions included\n- No component classes or separate state manager required, pure React Hooks that can be used in function components\n\n## Requirements\n\nReact 16.7 or later\n\n## installation\n\n```bash\n$ npm install @besync/react-use-graphstore-channel\n```\n\n```js\nimport { useMemoryChannel } from ' @besync/react-use-graphstore-channel'\n```\n\n```js\nimport { useChildMemoryChannel } from '@besync/react-use-graphstore-channel'\n```\n\n## Usage: IFrame Container Example\n\n```js\nimport { useOnce, Observer } from '@besync/react-use-graphstore-channel'\nimport { useMemoryChannel } from '@besync/react-use-graphstore-channel'\nimport { useFrame } from '@besync/react-use-iframe'\n\nconst { initialState, stores } from '...'  // your model\n\nconst App = props => {\n\n  const iframe = useFrame({ src: './frame.html' }, useMemoryChannel(initialState))\n  const post = useOnce(() => stores.PostStore.getbyId('1'))\n\n  return (\n    <Observer>\n      {() => (\n        <div>\n          HELLO {post.title}\n          {iframe}\n          <button onClick={() => { post.title = 'UPDATED' }} />\n        </div>\n      )}\n    </Observer>\n  )\n}\n```\n\n## Usage: IFrame child of above container\n\n```js\nimport { useOnce, Observer } from '@besync/react-use-graphstore-channel'\nimport { useChildMemoryChannel } from '@besync/react-use-graphstore-channel'\nimport { useChildFrame } from '@besync/react-use-iframe'\n\nconst { stores } from '...'  // your model\nconst initialState = { posts: { 1: { title: 'loading' } } }\n\nconst App = props => {\n\n   const framehelper = useChildFrame(useChildMemoryChannel(initialState))\n   const post = useOnce(() => stores.PostStore.getbyId('1'))\n\n  return (\n    <Observer>\n      {() => (\n        <div>\n          IFRAME START\n          <p>{post.title}</p>\n          <button onClick={() => { post.title = 'UPDATEDFRAME' }} />\n          <h2>{post.title}</h2>\n          IFRAME END\n          {framehelper}\n        </div>\n      )}\n    </Observer>\n  )\n}\n```\n\n## Webpack Build\n\nYou need to make sure there are two separate entry points in Webpack (one for the main\njavascript, one for the iFrame specific javascript) and two separate HTML files created by the HTML Plugin.\n\nThe simplest way to do this is with [`@breun/scripts`](https://github.com/bestyled/berun):\n\n### @berun configuration\n\n```js\n// config/berun.config.js\nmodule.exports = {\n  use: [\n    '@berun/preset-react',\n    '@berun/runner-eslint',\n    require('@besync/react-use-iframe/berun'),\n    require('@besync/react-use-graphstore-channel/berun')\n  ]\n}\n```\n\n`package.json`\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"berun-scripts start\",\n    \"build\": \"berun-scripts build\",\n    \"format\": \"berun-scripts lint\",\n    \"test\": \"berun-scripts test --env=jsdom\",\n    \"eject\": \"berun-scripts eject\"\n  },\n  \"dependencies\": {\n    \"react\": \"next\",\n    \"react-dom\": \"next\",\n    \"@besync/react-use-graphstore\": \"...\"\n  },\n  \"devDependencies\": {\n    \"@berun/scripts\": \"...\",\n    \"@berun/preset-react\": \"...\",\n    \"@berun/runner-eslint\": \"...\"\n  },\n  \"resolutions\": {\n    \"babel-core\": \"^7.0.0-bridge.0\"\n  }\n}\n```\n\n## Prior Art\n\n- `@besync/graphstore` - Used to provide the observable store in both parent and worker childs; query the store using a simple Document/Collection based interface, then get and set properties on the underlying result with auto-refresh whenever the underlying store changes (locally, in child worker, or remotely)\n- `@evecalm/message-hub` - Used for the two way RPC between parent and child, although any similar API-compatible channel can be used instead\n- `@bestyled/berun` - Used to provide a zero configuration, batteries included, Webpack build, similar to `create-react-app`\n- `react-use` - Used as inspiration for the React Hooks introduced in React 16.7; not used as a dependency\n- `useState`, `useRef`, and `useEffects` introduced in React 16.7\n\n## License\n\nApache 2.0\n","readmeFilename":"README.md"}