{"_id":"@agora-rte/rte-controller","_rev":"1-603f0b493c3c9088b5fb826100f76ab3","name":"@agora-rte/rte-controller","dist-tags":{"latest":"1.5.0-alpha.2"},"versions":{"1.5.0-alpha.1":{"name":"@agora-rte/rte-controller","version":"1.5.0-alpha.1","main":"lib/index.js","description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","license":"MIT","private":false,"keywords":["rte-controller"],"author":{"name":"xiaqin@agora.io"},"scripts":{"build:debug":"webpack --config ./webpack/webpack.debug.js","build":"webpack --config ./webpack/webpack.prod.js","package":"chmod +x package.sh && ./package.sh"},"publishConfig":{"access":"public"},"devDependencies":{"@babel/core":"^7.19.1","@babel/plugin-transform-runtime":"^7.19.1","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.19.1","@babel/preset-react":"^7.18.6","@types/react":"^16.8.25","@types/react-dom":"^16.8.6","autoprefixer":"^10.4.12","babel-loader":"^8.2.5","babel-plugin-transform-async-to-generator":"^6.24.1","clean-webpack-plugin":"^4.0.0","css-loader":"^6.7.1","css-minimizer-webpack-plugin":"^4.1.0","file-loader":"^6.2.0","html-webpack-plugin":"^5.5.0","html-withimg-loader":"^0.1.16","postcss-loader":"^7.0.1","react":"^16.8.6","react-dom":"^16.8.6","sass":"^1.55.0","sass-loader":"^13.0.2","style-loader":"^3.3.1","ts-loader":"^9.4.1","typescript":"^4.8.3","url-loader":"^4.1.1","webpack":"5.74.0","webpack-cli":"^4.10.0","webpack-dev-server":"^4.11.1","webpack-merge":"^5.8.0","webpackbar":"^5.0.2"},"peerDependencies":{"@types/react":"^16.8.25","@types/react-dom":"^16.8.6","react":"^16.8.6","react-dom":"^16.8.6"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"dependencies":{"@material-ui/core":"^4.12.4","@agora-rte/rte-controller-base":"^0.4.0-alpha.4"},"types":"./lib/index.d.ts","gitHead":"fdbfb7944dd3c7f05e0c03c8bd4fdfba305caa5a","_id":"@agora-rte/rte-controller@1.5.0-alpha.1","_nodeVersion":"18.9.1","_npmVersion":"8.19.1","dist":{"integrity":"sha512-ISWPFjaFRONpzmJcAlJHEXydOJbhoFqLjmdg6U6jwYs9yEn3A/MWB8YcltfkvC+g+wOVN+mTJ5QzUua1iq/A+g==","shasum":"247895b1b4f5a0e222472e96cbdc14197ed03934","tarball":"https://registry.npmjs.org/@agora-rte/rte-controller/-/rte-controller-1.5.0-alpha.1.tgz","fileCount":23,"unpackedSize":651202,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEesmuie9UaUAL9tJaBIr2xxkeLg0GK0B4piIIxc8F0yAiEA9zJ+WAicmNsX2c3k673gLvBvWIQ+cGi6oVaMClHT2q4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMrSUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVaw//Zw9lD6sC5FDZAMeCmXnWb5GAGCMMLmcDRbSRZ+ZznKJwb9p3\r\n9WT7A1bR6/5VEa5WhGxU1aXAgl2rHQBcvniYUaw0gMJM21v2+3pEL1BNs3js\r\nZkQztvk7i11O0IyCyRnFLREkiPQR48AKLOGyoHFFvzAvybsGUwRAd6w4f2FG\r\nQnkR1N5XnBxhPVlS3GbOzGFv6rlnkWXCSXpn400dQRQVA54MY/PsrU49rh7q\r\nHcCwiE4l5kGoUxzL4iryoD3RB06mThrLmIGPp7QHBmLTkwOYqbIEAJ+0qlsM\r\nCIJIHakht8mDPmR+IBuSF+RF3hGn7toM9uycEd0d/FwuG/yhkCsEXKvLEDqA\r\nIEPOApYXW7lbLbTGxLvVitdiliehxIBhBvzHODiyQwVcfj8sHG16I3BR1rzF\r\nmIlIStuKrMR1N/3O3foNwvJl0kcoUgNlw2vGrpbAhvjLdwMXtuaJXkXcLjcT\r\nzNeEObX0sruAQReIO5iSl1bwCHPhqBedzg/LXfA3UKR7sLRneIDiTB4/s36f\r\nrpsjkNsyNAvu8TUGkfoMG5J84XC0eufEL5VKV2LWamUXmlThultMDzVhI6cp\r\n6VxGcbEd0zQPMHlDTX/heI0212Zjxo19Nw6GLUEIu9+Pe64ifmdAGw+VwdU6\r\njyvfyqYb0fT3aQ45/rbwGVGvfCbFAZ8fkxs=\r\n=+TFt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"halajohn","email":"wei.hu.tw@gmail.com"},"directories":{},"maintainers":[{"name":"conqueror123","email":"renjingui@agora.io"},{"name":"adonia12","email":"adonia12@126.com"},{"name":"halajohn","email":"wei.hu.tw@gmail.com"},{"name":"xiaqin","email":"xiaqin@agora.io"},{"name":"deliberatekids","email":"deliberatekids@gmail.com"},{"name":"liziyuanzzz","email":"sunxilin@agora.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rte-controller_1.5.0-alpha.1_1664267412647_0.988563631524197"},"_hasShrinkwrap":false},"1.5.0-alpha.2":{"name":"@agora-rte/rte-controller","version":"1.5.0-alpha.2","main":"lib/index.js","description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","license":"MIT","private":false,"keywords":["rte-controller"],"author":{"name":"xiaqin@agora.io"},"scripts":{"build:debug":"webpack --config ./webpack/webpack.debug.js","build":"webpack --config ./webpack/webpack.prod.js","package":"chmod +x package.sh && ./package.sh"},"publishConfig":{"access":"public"},"devDependencies":{"@babel/core":"^7.19.1","@babel/plugin-transform-runtime":"^7.19.1","@babel/polyfill":"^7.12.1","@babel/preset-env":"^7.19.1","@babel/preset-react":"^7.18.6","@types/react":"^16.8.25","@types/react-dom":"^16.8.6","autoprefixer":"^10.4.12","babel-loader":"^8.2.5","babel-plugin-transform-async-to-generator":"^6.24.1","clean-webpack-plugin":"^4.0.0","css-loader":"^6.7.1","css-minimizer-webpack-plugin":"^4.1.0","file-loader":"^6.2.0","html-webpack-plugin":"^5.5.0","html-withimg-loader":"^0.1.16","postcss-loader":"^7.0.1","react":"^16.8.6","react-dom":"^16.8.6","sass":"^1.55.0","sass-loader":"^13.0.2","style-loader":"^3.3.1","ts-loader":"^9.4.1","typescript":"^4.8.3","url-loader":"^4.1.1","webpack":"5.74.0","webpack-cli":"^4.10.0","webpack-dev-server":"^4.11.1","webpack-merge":"^5.8.0","webpackbar":"^5.0.2"},"peerDependencies":{"@types/react":"^16.8.25","@types/react-dom":"^16.8.6","react":"^16.8.6","react-dom":"^16.8.6"},"peerDependenciesMeta":{"@types/react":{"optional":true},"@types/react-dom":{"optional":true}},"dependencies":{"@material-ui/core":"^4.12.4","@agora-rte/rte-controller-base":"^0.4.0-alpha.5"},"types":"./lib/index.d.ts","gitHead":"68c68443614ad0ce97d69d02f502f3fef2dd2e61","_id":"@agora-rte/rte-controller@1.5.0-alpha.2","_nodeVersion":"18.7.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-ghKOClSiFRDYJBwHfBXi2Tb7HztyfHnToZBFKnOGRLzs6jorObg+z95FdRDy9KaxpC7g83CMVCVg4x6ThU8sKA==","shasum":"aa8a64e0eb1d3d33346a5f4229d3ef33abf1e1ab","tarball":"https://registry.npmjs.org/@agora-rte/rte-controller/-/rte-controller-1.5.0-alpha.2.tgz","fileCount":33,"unpackedSize":5124108,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDb06pc9YxDbgtieJx229cCP+HeMyZfR+SMD4NxiZyriAIhAMNYEeQ0KMedCXNr/esX82a3IzoJ2qi7uL7BpNEj1LZv"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNRh2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpwAQ//SnxNbdrGbOr8UBDwyR/TNwED8TpbduVtXtn4u/FRrv8SWzBc\r\njdiIECToh2iVHIkMoPDKteY1oRKnosfC3zZOkE/c1Hs2pBf5U05G/XFsUzOW\r\n4VjtkRUBq4VvIKjoXARqT5SmyAn7Q3uOTGNlm6LxopxlTdyC6rAE4eh2zPG4\r\nmAvOw/mwd9HkWfX/aCabpD5Qyo+uHMDZQrrBm6gbaqaoWWctuU4d61hC177S\r\ngCe1dMmPC749hNrHvKbFmHLDycaRu3unUfsRR/mfwF7bfFty9AMSmVRJvrD4\r\n6i7MOlfnswdKENYC0Pij60ZWut+w18mB90eMdgFeNWSiiuaT1HdfPY0odOmu\r\nXKjDlfwEGNoCv0U1YdKQTKojgGA/wj60nClOwJMChFY4A30BgU6k+6PjW4oU\r\nNiKjSqGpQRB4yZi8Xcg5zNryJw7lWmrJeTWaFFVsbyLW0VwAoAcMcPAOwl7I\r\neomXAxKt2jZhZiq4ygvYUvDi4m3RweBTsQ9HR+13YCxE1m9JClMHHx1fPVfR\r\nL5AQr8upylUuPiECXHeq/s9v5nUrEQubIsFvaHLaoVLJZV7imjXEvU4xcD+B\r\nIPWf8vvGqdzfQdqpNpB2JiQcC5oDiBaMCwMXG4nN4oBePBQLGII5Cq+GII8b\r\n/U1mYqzFbddcY03jpzu+1+qFydW5kpHSFaY=\r\n=gIp4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"adonia12","email":"adonia12@126.com"},"directories":{},"maintainers":[{"name":"conqueror123","email":"renjingui@agora.io"},{"name":"adonia12","email":"adonia12@126.com"},{"name":"halajohn","email":"wei.hu.tw@gmail.com"},{"name":"xiaqin","email":"xiaqin@agora.io"},{"name":"deliberatekids","email":"deliberatekids@gmail.com"},{"name":"liziyuanzzz","email":"sunxilin@agora.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rte-controller_1.5.0-alpha.2_1664424054545_0.15507872989682503"},"_hasShrinkwrap":false}},"time":{"created":"2022-09-27T08:30:12.546Z","1.5.0-alpha.1":"2022-09-27T08:30:12.848Z","modified":"2022-09-29T04:00:54.962Z","1.5.0-alpha.2":"2022-09-29T04:00:54.835Z"},"maintainers":[{"name":"conqueror123","email":"renjingui@agora.io"},{"name":"adonia12","email":"adonia12@126.com"},{"name":"halajohn","email":"wei.hu.tw@gmail.com"},{"name":"xiaqin","email":"xiaqin@agora.io"},{"name":"deliberatekids","email":"deliberatekids@gmail.com"},{"name":"liziyuanzzz","email":"sunxilin@agora.io"}],"description":"RTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.","keywords":["rte-controller"],"author":{"name":"xiaqin@agora.io"},"license":"MIT","readme":"# RTE-Controller\n\nRTE UI controller is a module to be used in the UI resource itself to facilitate the integration with RTE world.\n\n## How to Use?\n\n### Install\n\n```bash\ncd path/to/your project\nnpm i rte-controller --save-dev\n```\n\n### Use\n\n#### Create RteContext instance\n\n* If the RTE App is running as a HTTP Server\n\n```typescript\nimport { createDefaultRteContext } from '@agora-rte/rte-controller';\n\nconst rteContext = await createDefaultRteContext({\n uri: 'http://127.0.0.1:8001/',\n graph_id: '0',\n extension_group: 'default_ui_gateway_extension_ts_group',\n extension: 'default_ui_gateway_extension_ts',\n});\n```\n\n* If the RTE App is running in the rendering thread of electron, you can specify `uri` to `localhost` or empty. Then rte-controller will transfer message between javascript function calls with the `Exported RTE` object.\n\n```typescript\nimport { createDefaultRteContext } from '@agora-rte/rte-controller';\n\nconst rteContext = await createDefaultRteContext({\n uri: 'http://127.0.0.1:8001/',\n graph_id: '0',\n extension_group: 'default_ui_gateway_extension_ts_group',\n extension: 'default_ui_gateway_extension_ts',\n});\n```\n\n#### Use with RTE layout template\n\nCreate RteContext first.\n\n```typescript\nimport { mountRteUiWidgets } from '@agora-rte/rte-controller';\n\n// Mount fetched UI widgets into DOM.\nawait mountRteUiWidgets(\n rteContext,\n document.getElementById('ui-container') as HTMLElement,\n);\n```\n\n#### Use with your own layout\n\nCreate RteContext first.\n\n```typescript\nReactDOM.render(\n <>\n \n \n \n \n \n \n ,\n targetRenderContainer,\n);\n```\n\nYou can use `widgetProps` in `ExtensionContainer` to define any props, which will be passed to the widget component directly. For example:\n\n```React\n {\n return
aaa
;\n },\n }}\n>\n```\n\n#### Define widget props in the UI Extension\n\nYou can define the widget props in the UI Extension, and `rte-controller` will fetch it from the UI Extension in rendering the widget. For example:\n\n```json\n{\n \"extension_group\": {\n \"addon\": \"default_extension_group\",\n \"name\": \"ui_extension_group\"\n },\n \"extension\": {\n \"addon\": \"default_ui_extension_ts\",\n \"name\": \"default_ui_extension_ts\"\n },\n \"prop\": {\n \"widget_props\": \"{\\\"mode\\\": \\\"demo\\\"}\"\n }\n}\n```\n\nThe `widget_props` will be parsed in JSON format.\n\n#### Customize the timing of receiving message\n\nBy default, rte-controller will start to receive message when all the widgets are mounted.\n\nYou can customize with `setWidgetMountedListener()` in `RteContext`. For example:\n\n```typescript\nimport {\n RteContext,\n RteUiWidgetInfo,\n} from '@agora-rte/rte-controller';\n\nrteContext.setWidgetMountedListener(\n (\n rteContext: RteContext,\n widget: RteUiWidgetInfo,\n error?: Error,\n ): void => {\n console.log(\n `The widget is ready, ${JSON.stringify(widget)}, error: ${error}`,\n );\n\n // Calling 'readyToReceiveExtensionMessage()' to open the message channel between the App and RTE Extension, and will receive events from RTE Extension if any.\n setTimeout(() => {\n rteContext.readyToReceiveExtensionMessage();\n }, 5000);\n },\n);\n```\n\n> Keep in mind that you have to call `readyToReceiveExtensionMessage()` yourself when the App is ready to receive messages from RTE Extension.\n\n#### Subscribe events\n\nYou can subscribe event from RTE Extension like the UI Widget with `subscribeEvent()` in `RteContext`. For example:\n\n```typescript\nrteContext.subscribeEvent({\n extension: 'default_ui_extension_ts',\n handler: (msg: RteUiWidgetMsg) => {\n console.log(\n `Receive message from default_ui_extension_ts: ${JSON.stringify(\n msg,\n )}`,\n );\n },\n});\n```\n\nThe `extension` and `type` are used to filter the events, you have to specify at least one. And of course, you can specify both of them.\n\nAnd you can use `unsubscribeEvent()` to cancel the subscription.\n","readmeFilename":"readme.md"}