{"_id":"@briosheje/ipc-reactive-state-electron","_rev":"2-cdc39b3dd62c0273c672501a921d07dc","name":"@briosheje/ipc-reactive-state-electron","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@briosheje/ipc-reactive-state-electron","version":"0.0.1","dependencies":{"tslib":"^2.3.0"},"peerDependencies":{"electron":"^22.0.0"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","gitHead":"5a6466f89d71b7dc97052862902a4355bce0d6d1","description":"This library was generated with [Nx](https://nx.dev).","_id":"@briosheje/ipc-reactive-state-electron@0.0.1","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-k8asUfYp7L0pjLVP7tpR2yF/yod9W1JIbHQP5tLoNizC1sX43LWoKaYDG2Tx5ewAqj7QHOwRC2hCB+woPvNkZg==","shasum":"6b03306a9586ecb38df0ef243aa5b342fef5dde3","tarball":"https://registry.npmjs.org/@briosheje/ipc-reactive-state-electron/-/ipc-reactive-state-electron-0.0.1.tgz","fileCount":20,"unpackedSize":10801,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN2nXPOwBXhdMBpZ6/A/eyThK3OXgFvDT6ZZfBoaOxbAIhANdgaJyK72z+jY42vRYwGO2RamrH4UJAZ2kxXSu3wrQy"}]},"_npmUser":{"name":"briosheje","email":"uaesbriosheje@gmail.com"},"directories":{},"maintainers":[{"name":"briosheje","email":"uaesbriosheje@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ipc-reactive-state-electron_0.0.1_1694513875846_0.599617366594138"},"_hasShrinkwrap":false},"0.0.2":{"name":"@briosheje/ipc-reactive-state-electron","version":"0.0.2","dependencies":{"tslib":"^2.3.0"},"peerDependencies":{"electron":"^22.0.0"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","gitHead":"974f88e8ab25ce38de65c5952ec46631e77d01f7","description":"This library can be used in conjuction with a compatible frontend adapter (check the last section of this readme) to implement a one-way or two-way synced state between the electron main process and a react/vue application hosted in any renderer process(e","_id":"@briosheje/ipc-reactive-state-electron@0.0.2","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-dUBs+F5x9a9vyGEyKdKe86LmJlZLUqgLoSKOYV9Vmng+B5OyZiq0TOoITZcaauNg49hHPIQ2r7HVCOW/1rgNZA==","shasum":"577ea2e0ab56eca8dc0a49fe342ac5b13ff68e54","tarball":"https://registry.npmjs.org/@briosheje/ipc-reactive-state-electron/-/ipc-reactive-state-electron-0.0.2.tgz","fileCount":20,"unpackedSize":13767,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHT2XPZ44eVXGbyqvjX8iv+GWJiFVpzHdWkbJjDvhsqAIgYasGgkNzwRhaOIcdp27Bk8SUFlKXKOQywORAvsbfAEY="}]},"_npmUser":{"name":"briosheje","email":"uaesbriosheje@gmail.com"},"directories":{},"maintainers":[{"name":"briosheje","email":"uaesbriosheje@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ipc-reactive-state-electron_0.0.2_1694518801731_0.4286956656671692"},"_hasShrinkwrap":false},"0.0.3":{"name":"@briosheje/ipc-reactive-state-electron","version":"0.0.3","dependencies":{"tslib":"^2.3.0"},"peerDependencies":{"electron":">=22.0.0"},"type":"commonjs","main":"./src/index.js","typings":"./src/index.d.ts","gitHead":"f671835e3885cbecea059715b6a66c1687f12a0a","description":"This library can be used in conjuction with a compatible frontend adapter (check the last section of this readme) to implement a one-way or two-way synced state between the electron main process and a react/vue application hosted in any renderer process(e","_id":"@briosheje/ipc-reactive-state-electron@0.0.3","_nodeVersion":"18.15.0","_npmVersion":"9.5.0","dist":{"integrity":"sha512-YivZTyuJLJcfjoeUhawpV+M699n0qFtNbNRTtPi2f2ZeveP2r3NGkVg3pPbdcwd6CkRMWWpxq4O+b3wMfBX6Xg==","shasum":"2c7bb7d13e7545758ee18fe4be59ee6a8a5ab9bc","tarball":"https://registry.npmjs.org/@briosheje/ipc-reactive-state-electron/-/ipc-reactive-state-electron-0.0.3.tgz","fileCount":20,"unpackedSize":13768,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYcz9JS0UnczFjT21yBfbKxLIKvUkGSCH7fKiutKh0UgIhAKs0fyWN9JvnAOxa+uPEsiRciu36J76MC7pW1Az0u1DQ"}]},"_npmUser":{"name":"briosheje","email":"uaesbriosheje@gmail.com"},"directories":{},"maintainers":[{"name":"briosheje","email":"uaesbriosheje@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ipc-reactive-state-electron_0.0.3_1694521813321_0.25706403228142505"},"_hasShrinkwrap":false}},"time":{"created":"2023-09-12T10:17:55.734Z","0.0.1":"2023-09-12T10:17:56.072Z","modified":"2023-09-12T12:30:13.640Z","0.0.2":"2023-09-12T11:40:01.989Z","0.0.3":"2023-09-12T12:30:13.464Z"},"maintainers":[{"name":"briosheje","email":"uaesbriosheje@gmail.com"}],"description":"This library can be used in conjuction with a compatible frontend adapter (check the last section of this readme) to implement a one-way or two-way synced state between the electron main process and a react/vue application hosted in any renderer process(e","readme":"# ipc-reactive-state-electron\n\nThis library can be used in conjuction with a compatible frontend adapter (check the last section of this readme)\nto implement a one-way or two-way synced state between the electron main process and a react/vue application hosted\nin any renderer process(es).\n\n## Installation\n\nInstall the library using:\n\n```sh\nnpm i @briosheje/ipc-reactive-state-electron --save\n```\n\n# Usage & Getting started\n\nThere are two steps needed to use the library:\n\n- Mounting the preload event handlers and DOM augmentation.\n- Creating a state (or more than one state).\n\n## Mounting on preload\n\nAdd this in your `preload.js` or `preload.ts` file:\n```ts\nimport { mountReactiveStateListeners } from \"@briosheje/ipc-reactive-state-electron\"\n// or const { mountReactiveStateListeners } = require(\"@briosheje/ipc-reactive-state-electron\")\n\nmountReactiveStateListeners();\n```\n\n## Create a reactive state in the main process\n### Example with typescript\n```ts\nimport { createReactiveIpcState } from '@briosheje/ipc-reactive-state-electron';\n\ninterface MyState = {\n  name: string;\n  lastName: string;\n  age: number;\n}\n\nconst stateKey = 'my-state';\n\nconst initialState: MyState = {\n  name: 'Hello',\n  lastName: 'World',\n  age: 30\n};\nconst { state } = createReactiveIpcState<MyState>(\n  stateKey, initialState\n);\n```\n\nThen, whenever you will change a property to the state object, like:\n```ts\nstate.name = 'Helloooooo';\n```\n\nThe change will be automatically propagated in electron after 50 milliseconds.\nYou can change the amount of milliseconds needed to sync the state with the \nthird option of the `createReactiveIpcState` function, by providing an object and\nspecifying the desired throttle.\n\nThe throttle was implemented so that sequential changes are batched. As an example, if you\nwrite this:\n\n```ts\nstate.name = 'Helloooooo';\nstate.lastName = 'wooooorld';\nstate.age = 10\n```\n\nThere will only be one IPC message sent from the main to the renderer processes.\n\n### How to listen to state changes\n\nThe `createReactiveIpcState` function returns the state and an EventEmitter.\nSuch EventEmitter is typed out of box for typescript users and allow to intercept\nchanges to the state from the client side.\n\nExample:\n```ts\nimport { createReactiveIpcState } from '@briosheje/ipc-reactive-state-electron';\n\ninterface MyState = {\n  name: string;\n  lastName: string;\n  age: number;\n}\n\nconst stateKey = 'my-state';\n\nconst initialState: MyState = {\n  name: 'Hello',\n  lastName: 'World',\n  age: 30\n};\nconst { state, events } = createReactiveIpcState<MyState>(\n  stateKey, initialState\n);\n\nevents.on('onStateUpdateRequestReceived', (s) => {\n  console.log('client requested to update the state.')\n})\n\nevents.on('onStateUpdateSentToClient', (s) => {\n  console.log('A change propagated in the main process was sent to renderer processes.')\n})\n\nevents.on('onStateUpdated', (s) => {\n  console.log('A change requested to update the state was applied to the state.')\n})\n```\n\n### How do I use the library on the client side?\n\nYou can use one of the adapters available:\n\n- Vanilla: coming soon\n- Vue: `@briosheje/ipc-reactive-state-vue`\n- React: `@briosheje/ipc-reactive-state-angular`\n- Solid JS: coming soon\n- Svelte: coming soon\n- Angular: coming soon\n- Qwik: coming soon\n","readmeFilename":"README.md"}