{"_id":"@capitec/omni-widget","_rev":"1-b89964cd9eb550bd3cc0e8aa576ebaa1","name":"@capitec/omni-widget","dist-tags":{"latest":"0.1.1","beta":"0.1.0-beta"},"versions":{"0.1.1":{"name":"@capitec/omni-widget","version":"0.1.1","description":"Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content with bi-directional communication.","type":"module","main":"dist/index.js","types":"dist/index.d.ts","engines":{"node":">=16.x"},"scripts":{"build":"tsc","test":"npx playwright test","lint":"eslint src/**/*.{js,ts}","docs":"npm run docs:api && npm run docs:copy && npm run docs:contributors","docs:api":"npx typedoc --out docs/api src/index.ts","docs:contributors":"npx all-contributors generate","docs:copy":"copyfiles -a \"./docs/logos/*\" \"./.oss-docs.json\" \"./docs/api\"","contributors:add":"npx all-contributors add","prepublish":"npm run build","serve":"((node -e \"if (! require('fs').existsSync('./example/node_modules')) {process.exit(1)} \" && cd ./example) || (cd ./example && npm i)) && npm run start"},"repository":{"type":"git","url":"git+https://github.com/capitec/omni-widget.git"},"keywords":["web components","widget"],"author":{"name":"Capitec"},"license":"MIT","bugs":{"url":"https://github.com/capitec/omni-widget/issues"},"homepage":"https://capitec.github.io/open-source/docs/omni-widget/","devDependencies":{"@playwright/test":"^1.31.2","@typescript-eslint/eslint-plugin":"^5.23.0","@typescript-eslint/parser":"^5.23.0","all-contributors-cli":"^6.20.0","copyfiles":"^2.4.1","command-line-args":"^5.2.1","eslint":"^8.15.0","eslint-plugin-tsdoc":"^0.2.16","istanbul-lib-coverage":"^3.2.0","istanbul-lib-report":"^3.0.0","istanbul-reports":"^3.1.5","package-json":"^8.1.0","typedoc":"^0.22.15","typescript":"^4.6.4","v8-to-istanbul":"^9.1.0"},"gitHead":"1190c338481b9a82e6aefcc253f8628e8220899c","_id":"@capitec/omni-widget@0.1.1","_nodeVersion":"16.20.0","_npmVersion":"8.19.4","dist":{"integrity":"sha512-ZsXq7/3bd+GBk2v5eeEpNxh4+8E1ift2l9J4Woh6Q3oOZnnRaGj8p2bfa7WQI4NAT8OI37Fm1/yT4bdRR2Xj0g==","shasum":"6e321eb1c96bf468c94c4d5bb22a62ecfa122050","tarball":"https://registry.npmjs.org/@capitec/omni-widget/-/omni-widget-0.1.1.tgz","fileCount":13,"unpackedSize":83568,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIZLKs60vVMtDEj1HyNW6ncT0u5joj37w8meo0BMQ0kAiEAtrjq/hMbvvUijiifGdz4y5EKAujGpCmvc3OOeBCA3xw="}]},"_npmUser":{"name":"capitec-oss","email":"opensource@capitecbank.co.za"},"directories":{},"maintainers":[{"name":"chromaticwaster","email":"kabasi.freeman@gmail.com"},{"name":"b0tlanner","email":"b0tlanner.npm@gmail.com"},{"name":"stefan505","email":"stefan505@gmail.com"},{"name":"capitec-oss","email":"opensource@capitecbank.co.za"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/omni-widget_0.1.1_1683876673272_0.7793472744792951"},"_hasShrinkwrap":false},"0.1.0-beta":{"name":"@capitec/omni-widget","version":"0.1.0-beta","description":"Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.","type":"module","main":"dist/index.js","types":"dist/index.d.ts","engines":{"node":">=16.x"},"scripts":{"build":"tsc","test":"npx playwright test","lint":"eslint src/**/*.{js,ts}","docs":"npm run docs:api && npm run docs:copy && npm run docs:contributors","docs:api":"npx typedoc --out docs/api src/index.ts","docs:contributors":"npx all-contributors generate","docs:copy":"copyfiles -a \"./docs/logos/*\" \"./.oss-docs.json\" \"./docs/api\"","contributors:add":"npx all-contributors add","prepublish":"npm run build","serve":"((node -e \"if (! require('fs').existsSync('./example/node_modules')) {process.exit(1)} \" && cd ./example) || (cd ./example && npm i)) && npm run start"},"repository":{"type":"git","url":"git+https://github.com/capitec/omni-widget.git"},"keywords":["web components","widget"],"author":{"name":"Capitec"},"license":"MIT","bugs":{"url":"https://github.com/capitec/omni-widget/issues"},"homepage":"https://capitec.github.io/open-source/docs/omni-widget/","devDependencies":{"@playwright/test":"^1.31.2","@typescript-eslint/eslint-plugin":"^5.23.0","@typescript-eslint/parser":"^5.23.0","all-contributors-cli":"^6.20.0","copyfiles":"^2.4.1","command-line-args":"^5.2.1","eslint":"^8.15.0","eslint-plugin-tsdoc":"^0.2.16","istanbul-lib-coverage":"^3.2.0","istanbul-lib-report":"^3.0.0","istanbul-reports":"^3.1.5","package-json":"^8.1.0","typedoc":"^0.22.15","typescript":"^4.6.4","v8-to-istanbul":"^9.1.0"},"readme":"<br>\n\n<p align=\"center\"><img src=\"./docs/logos/omni.png\" width=\"128\" height=\"128\"/></p>\n\n<h3 align=\"center\">Omni Widget</h3>\n<p align=\"center\"><strong><code>@capitec/omni-widget</code></strong></p>\n<p align=\"center\">Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content.</p>\n\n<br />\n\n<p align=\"center\">\n\t<a href=\"https://npmcharts.com/compare/@capitec/omni-widget?minimal=true\"><img alt=\"Downloads per week\" src=\"https://img.shields.io/npm/dw/@capitec/omni-widget.svg\" height=\"20\"/></a>\n\t<a href=\"https://www.npmjs.com/package/@capitec/omni-widget\"><img alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@capitec/omni-widget.svg\" height=\"20\"/></a>\n\t<a href=\"https://github.com/capitec/omni-widget/actions/workflows/build.yml\"><img alt=\"GitHub Build\" src=\"https://github.com/capitec/omni-widget/actions/workflows/build.yml/badge.svg\" height=\"20\"/></a>\n\t<a href=\"https://github.com/capitec/omni-widget/blob/develop/LICENSE\"><img alt=\"MIT License\" src=\"https://img.shields.io/github/license/capitec/omni-widget\" height=\"20\"/></a>\n</p>\n<p align=\"center\">\n\t<a href=\"https://capitec.github.io/open-source/docs/omni-widget\"><img alt=\"Docs\" src=\"https://img.shields.io/static/v1?label=docs&message=capitec.github.io/open-source&color=blue&style=flat-square\" /></a>\n</p>\n\n<br/>\n\n<p align=\"center\">\n\t[<a href=\"#introduction\">Introduction</a>]\n\t[<a href=\"#usage\">Usage</a>]\n\t[<a href=\"#contributors\">Contributors</a>]\n\t[<a href=\"#license\">License</a>]\n</p>\n\n<br/>\n\n---\n\n<br />\n\n## Introduction\n\n-   The `<omni-widget>` is a web component that makes hosting external web content easier, with bi-directional communication capabilities.\n-   The `Widget` class exposes static functions to make it easier for hosted external web content to interact with its `omni-widget` host.\n\n<br />\n\n## Usage\n\n1️⃣ &nbsp; Install the library in your project.\n\n```bash\nnpm install @capitec/omni-widget\n```\n\n### For hosted widgets\n\n2️⃣ &nbsp; Import the `Widget` class from the package and use relevant static functions for initialisation, event handling and messaging.\n\n```js\nimport { Widget } from '@capitec/omni-widget';\n\nif (!Widget.isHosted) {\n    console.log('Not hosted as a widget!');\n} else {\n    Widget.initialise(async function (identifier) {\n        console.log(`Widget loaded with identifier: '${identifier}'`);\n        const response = await Widget.messageApplicationAsync(Widget.currentIdentifier, 'some-event-from-the-widget', {\n            message: 'This is event detail.'\n        });\n    });\n    Widget.addEventListener('some-event-for-the-widget', async function (e) {\n        console.log(`Widget message: '${JSON.stringify(e.content)}'`);\n        e.callback('This is a response');\n    });\n}\n```\n\n### For hosting widgets\n\n2️⃣ &nbsp; Import the package\n\n```js\n// JS import\nimport '@capitec/omni-widget';\n\n// or HTML import\n<script type=\"module\" src=\"/node_modules/omni-widget/dist/index.js\"></script>;\n```\n\n3️⃣ &nbsp; Use the web component to host the widget.\n\n```html\n<omni-widget src=\"https://some-widget-url.html\"></omni-widget>\n```\n\n4️⃣ &nbsp; Use instance functions on the component to send messages to the widget.\n\n```js\nconst widgetResponse = await document\n    .querySelector('omni-widget')\n    .messageWidgetAsync('some-event-for-the-widget', { message: 'This is event detail.' });\n```\n\n5️⃣ &nbsp; Use event listeners to receive messages from the widget.\n\n```js\ndocument.querySelector('omni-widget').addEventListener('some-event-from-the-widget', function (e) {\n    const widgetEventInfo = e.detail;\n    console.log('Widget event data: ' + JSON.stringify(widgetEventInfo.content));\n    widgetEventInfo.callback('This is a response.');\n});\n```\n\n<br>\n\n### 🚩 Example Usage Project\n\nAn example project is available in the [example directory](https://github.com/capitec/omni-widget/tree/develop/example).\n\n<br>\n\n## Contributors\n\nMade possible by these fantastic people. 💖\n\nSee the [`CONTRIBUTING.md`](./CONTRIBUTING.md) guide to get involved.\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tbody>\n    <tr>\n      <td align=\"center\" valign=\"top\" width=\"14.28%\"><a href=\"https://github.com/BOTLANNER\"><img src=\"https://avatars.githubusercontent.com/u/16349308?v=4?s=100\" width=\"100px;\" alt=\"BOTLANNER\"/><br /><sub><b>BOTLANNER</b></sub></a><br /><a href=\"https://github.com/capitec/omni-widget/commits?author=BOTLANNER\" title=\"Code\">💻</a> <a href=\"#tool-BOTLANNER\" title=\"Tools\">🔧</a></td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- markdownlint-restore -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\n<br>\n\n## License\n\nLicensed under [MIT](LICENSE)\n\n<br>\n<br>\n<hr>\n<br>\n<br>\n<br>\n<p align=\"center\">\n    <picture>\n        <source media=\"(prefers-color-scheme: dark)\" srcset=\"./docs/logos/capitec-logo-white.svg\">\n        <img alt=\"Capitec Logo\" src=\"./docs/logos/capitec-logo-color.svg\" height=\"28\">\n    </picture>\n</p>\n<p align=\"center\">We are hiring 🤝 Join us! 🇿🇦</p>\n<p align=\"center\">\n    <a href=\"https://www.capitecbank.co.za/about-us/careers\">https://www.capitecbank.co.za/about-us/careers</a>\n</p>\n\n<br>\n<br>\n","readmeFilename":"README.md","gitHead":"9956a4611cdeee5e48063bed2940bac9e40e2323","_id":"@capitec/omni-widget@0.1.0-beta","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-G0+gH3M0u1Bf1u6vpwQtLBRV8nid5+uaiwyBDcFlKTgnzLPUtItYjoo7FysWyUMvC0pZcD7ZLAo/+qt5DYtbzQ==","shasum":"60ea7d982e38a2076de9a3cc4b35b16b6e7bf84e","tarball":"https://registry.npmjs.org/@capitec/omni-widget/-/omni-widget-0.1.0-beta.tgz","fileCount":13,"unpackedSize":83505,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoLrsjXVqImkmXhotmCfX3CzQYLQ138fRwtQLc1kYQvwIgEweYbfwckP8t2B5yHTLoFFO/rroj13xFcnDqXBpKTyw="}]},"_npmUser":{"name":"capitec-oss","email":"opensource@capitecbank.co.za"},"directories":{},"maintainers":[{"name":"chromaticwaster","email":"kabasi.freeman@gmail.com"},{"name":"b0tlanner","email":"b0tlanner.npm@gmail.com"},{"name":"stefan505","email":"stefan505@gmail.com"},{"name":"capitec-oss","email":"opensource@capitecbank.co.za"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/omni-widget_0.1.0-beta_1710396094483_0.5891396445268333"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-12T07:31:13.177Z","0.1.1":"2023-05-12T07:31:13.461Z","modified":"2024-03-14T06:01:35.151Z","0.1.0-beta":"2024-03-14T06:01:34.624Z"},"maintainers":[{"name":"chromaticwaster","email":"kabasi.freeman@gmail.com"},{"name":"b0tlanner","email":"b0tlanner.npm@gmail.com"},{"name":"stefan505","email":"stefan505@gmail.com"},{"name":"capitec-oss","email":"opensource@capitecbank.co.za"}],"description":"Framework agnostic, zero dependency web utilities to enable embedding externally hosted web content with bi-directional communication.","homepage":"https://capitec.github.io/open-source/docs/omni-widget/","keywords":["web components","widget"],"repository":{"type":"git","url":"git+https://github.com/capitec/omni-widget.git"},"author":{"name":"Capitec"},"bugs":{"url":"https://github.com/capitec/omni-widget/issues"},"license":"MIT","readme":"","readmeFilename":""}