{"_id":"@bpmn-io/diagram-js-ui","_rev":"210978","name":"@bpmn-io/diagram-js-ui","description":"[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)","dist-tags":{"latest":"0.2.2"},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"time":{"modified":"2023-03-24T08:33:56.000Z","created":"2022-10-26T07:18:40.557Z","0.2.2":"2023-01-10T11:01:15.790Z","0.2.1":"2022-11-29T14:13:44.925Z","0.2.0":"2022-11-10T20:13:21.031Z","0.1.1":"2022-10-26T12:55:26.397Z","0.1.0":"2022-10-26T07:18:40.557Z"},"users":{},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"versions":{"0.2.2":{"name":"@bpmn-io/diagram-js-ui","version":"0.2.2","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","sideEffects":false,"scripts":{"all":"run-s lint test","lint":"eslint .","test":"karma start","dev":"karma start --auto-watch --no-single-run"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"license":"MIT","devDependencies":{"eslint":"^8.25.0","eslint-plugin-bpmn-io":"^0.16.0","karma":"^6.4.1","karma-chrome-launcher":"^3.1.1","karma-firefox-launcher":"^2.1.2","karma-mocha":"^2.0.1","karma-sinon-chai":"^2.0.2","karma-webpack":"^5.0.0","mocha":"^10.1.0","npm-run-all":"^4.1.5","sinon":"^14.0.1","sinon-chai":"^3.7.0","webpack":"^5.74.0"},"dependencies":{"htm":"^3.1.1","preact":"^10.11.2"},"gitHead":"c9c4ef064d4491e40d81e1ba888d6924ef67954d","description":"[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","_id":"@bpmn-io/diagram-js-ui@0.2.2","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"shasum":"f182476e820641901c10d0079dcfe7b5b022b9f6","size":1844,"noattachment":false,"key":"/@bpmn-io/diagram-js-ui/-/@bpmn-io/diagram-js-ui-0.2.2.tgz","tarball":"http://name.csiicloud.com:7001/@bpmn-io/diagram-js-ui/download/@bpmn-io/diagram-js-ui-0.2.2.tgz"},"_npmUser":{"name":"nikku","email":"git_nikku@nixis.de"},"directories":{},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagram-js-ui_0.2.2_1673348475586_0.5946772906116369"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-01-10T11:01:15.790Z","publish_time":1673348475790,"_cnpm_publish_time":1673348475790},"0.2.1":{"name":"@bpmn-io/diagram-js-ui","version":"0.2.1","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","scripts":{"all":"run-s lint test","lint":"eslint .","test":"karma start","dev":"karma start --auto-watch --no-single-run"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"license":"MIT","devDependencies":{"eslint":"^8.25.0","eslint-plugin-bpmn-io":"^0.16.0","karma":"^6.4.1","karma-chrome-launcher":"^3.1.1","karma-firefox-launcher":"^2.1.2","karma-mocha":"^2.0.1","karma-sinon-chai":"^2.0.2","karma-webpack":"^5.0.0","mocha":"^10.1.0","npm-run-all":"^4.1.5","sinon":"^14.0.1","sinon-chai":"^3.7.0","webpack":"^5.74.0"},"dependencies":{"htm":"^3.1.1","preact":"^10.11.2"},"gitHead":"3b1c942c62ca9cf4c3dabaca400cdeac0c8676b2","description":"[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","_id":"@bpmn-io/diagram-js-ui@0.2.1","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"shasum":"b1c26d58b382bc9548f5c2e487c0d4b244f1cdd3","size":1824,"noattachment":false,"key":"/@bpmn-io/diagram-js-ui/-/@bpmn-io/diagram-js-ui-0.2.1.tgz","tarball":"http://name.csiicloud.com:7001/@bpmn-io/diagram-js-ui/download/@bpmn-io/diagram-js-ui-0.2.1.tgz"},"_npmUser":{"name":"nikku","email":"git_nikku@nixis.de"},"directories":{},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagram-js-ui_0.2.1_1669731224740_0.7684849258003672"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-11-29T14:34:12.776Z","publish_time":1669731224925,"_cnpm_publish_time":1669731224925},"0.2.0":{"name":"@bpmn-io/diagram-js-ui","version":"0.2.0","main":"lib/index.js","module":"lib/index.js","types":"lib/index.d.ts","scripts":{"all":"run-s lint test","lint":"eslint .","test":"karma start","dev":"karma start --auto-watch --no-single-run"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"license":"MIT","devDependencies":{"eslint":"^8.25.0","eslint-plugin-bpmn-io":"^0.16.0","karma":"^6.4.1","karma-chrome-launcher":"^3.1.1","karma-firefox-launcher":"^2.1.2","karma-mocha":"^2.0.1","karma-sinon-chai":"^2.0.2","karma-webpack":"^5.0.0","mocha":"^10.1.0","npm-run-all":"^4.1.5","sinon":"^14.0.1","sinon-chai":"^3.7.0","webpack":"^5.74.0"},"dependencies":{"htm":"^3.1.1","preact":"^10.11.2"},"gitHead":"801222a4277c8b410ade3648a0a948432f67cdb9","description":"[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","_id":"@bpmn-io/diagram-js-ui@0.2.0","_nodeVersion":"16.18.0","_npmVersion":"8.19.2","dist":{"shasum":"23097b3bb545dc051ea59c96dc1d3fbb2d4387d3","size":1820,"noattachment":false,"key":"/@bpmn-io/diagram-js-ui/-/@bpmn-io/diagram-js-ui-0.2.0.tgz","tarball":"http://name.csiicloud.com:7001/@bpmn-io/diagram-js-ui/download/@bpmn-io/diagram-js-ui-0.2.0.tgz"},"_npmUser":{"name":"nikku","email":"git_nikku@nixis.de"},"directories":{},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagram-js-ui_0.2.0_1668111200811_0.5795628100460994"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-11-10T20:13:50.665Z","publish_time":1668111201031,"_cnpm_publish_time":1668111201031},"0.1.1":{"name":"@bpmn-io/diagram-js-ui","version":"0.1.1","main":"index.js","scripts":{"all":"run-s lint","lint":"eslint .","test":"karma start","dev":"karma start --auto-watch --no-single-run"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"license":"MIT","devDependencies":{"eslint":"^8.25.0","eslint-plugin-bpmn-io":"^0.16.0","eslint-plugin-import":"^2.26.0","eslint-plugin-react-hooks":"^4.2.0","npm-run-all":"^4.1.5","diagram-js":"^9.1.0","karma":"^6.4.1","karma-chrome-launcher":"^3.1.1","karma-firefox-launcher":"^2.1.2","karma-mocha":"^2.0.1","karma-sinon-chai":"^2.0.2","karma-webpack":"^5.0.0","mocha":"^10.1.0","mocha-test-container-support":"^0.2.0","sinon":"^14.0.1","sinon-chai":"^3.7.0","webpack":"^5.74.0"},"dependencies":{"htm":"^3.1.1","preact":"^10.11.2"},"gitHead":"0998106c25746f0dd509d8be68948f709048cb15","description":"This library provides a building block for creating and rendering Preact components in the context of the bpmn.io tools without directly importing Preact.","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","_id":"@bpmn-io/diagram-js-ui@0.1.1","_nodeVersion":"14.19.3","_npmVersion":"8.19.2","dist":{"shasum":"399a0daf5c27d1fdd81e4160cc18cbee04d62ddc","size":2040,"noattachment":false,"key":"/@bpmn-io/diagram-js-ui/-/@bpmn-io/diagram-js-ui-0.1.1.tgz","tarball":"http://name.csiicloud.com:7001/@bpmn-io/diagram-js-ui/download/@bpmn-io/diagram-js-ui-0.1.1.tgz"},"_npmUser":{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},"directories":{},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagram-js-ui_0.1.1_1666788926258_0.9622304810770712"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-10-26T13:44:17.909Z","publish_time":1666788926397,"_cnpm_publish_time":1666788926397},"0.1.0":{"name":"@bpmn-io/diagram-js-ui","version":"0.1.0","main":"index.js","scripts":{"all":"run-s lint","lint":"eslint .","test":"karma start","dev":"karma start --auto-watch --no-single-run"},"repository":{"type":"git","url":"git+https://github.com/bpmn-io/diagram-js-ui.git"},"author":{"name":"Beatriz Mendes","url":"https://github.com/smbea"},"license":"MIT","devDependencies":{"eslint":"^8.25.0","eslint-plugin-bpmn-io":"^0.16.0","eslint-plugin-import":"^2.26.0","eslint-plugin-react-hooks":"^4.2.0","htm":"^3.1.1","npm-run-all":"^4.1.5","preact":"^10.11.2","diagram-js":"^9.1.0","karma":"^6.4.1","karma-chrome-launcher":"^3.1.1","karma-firefox-launcher":"^2.1.2","karma-mocha":"^2.0.1","karma-sinon-chai":"^2.0.2","karma-webpack":"^5.0.0","mocha":"^10.1.0","mocha-test-container-support":"^0.2.0","sinon":"^14.0.1","sinon-chai":"^3.7.0","webpack":"^5.74.0"},"gitHead":"54454cb0c2258945422c98b5967eda5f3d19d51f","description":"This library provides a building block for creating and rendering Preact components in the context of the bpmn.io tools without directly importing Preact.","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","_id":"@bpmn-io/diagram-js-ui@0.1.0","_nodeVersion":"14.19.3","_npmVersion":"8.19.2","dist":{"shasum":"390201bd2412f33e734f7de8f93241ec347a05a9","size":2040,"noattachment":false,"key":"/@bpmn-io/diagram-js-ui/-/@bpmn-io/diagram-js-ui-0.1.0.tgz","tarball":"http://name.csiicloud.com:7001/@bpmn-io/diagram-js-ui/download/@bpmn-io/diagram-js-ui-0.1.0.tgz"},"_npmUser":{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},"directories":{},"maintainers":[{"name":"skaiir-camunda","email":"valentin.serra@camunda.com"},{"name":"marstamm","email":"martin.stamm@camunda.com"},{"name":"beatrizmendes","email":"beatriz.mendes@camunda.com"},{"name":"bpmn-io-admin","email":"bpmnio@camunda.com"},{"name":"nikku","email":"git_nikku@nixis.de"},{"name":"pinussilvestrus","email":"niklaskiefer@gmx.de"},{"name":"barmac","email":"maciejbarel@gmail.com"},{"name":"philippfromme","email":"philippfromme@outlook.com"},{"name":"maxtru","email":"maximilian.trumpf@camunda.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/diagram-js-ui_0.1.0_1666768720306_0.8780649023796536"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-10-26T07:50:20.635Z","publish_time":1666768720557,"_cnpm_publish_time":1666768720557}},"readme":"# diagram-js-ui\n\n[![CI](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/diagram-js-ui/actions/workflows/CI.yml)\n\nA wrapper around [`htm/preact`](https://github.com/developit/htm#usage) that exposes components for building reactive HTML widgets in the context of [diagram-js](https://github.com/bpmn-io/diagram-js) and extensions.\n\n\n## Usage\n\nThis module is available through `diagram-js/lib/ui`. Use it to create and mount your [Preact](https://preactjs.com/) components and render them through the [`htm` utility](https://github.com/developit/htm).\n\n```javascript\n// MyService.js\nimport { render, html } from 'diagram-js/lib/ui';\nimport MyCounter from './MyCounter';\n\nexport default function MyService() {\n  const parentElement = document.createElement('div');\n\n  render(html`<${MyCounter} />`, parentElement);\n}\n```\n\n```javascript\n// MyCounter.js\nimport { useState, html } from 'diagram-js/lib/ui';\n\nexport default function MyCounter(props) {\n  const counter = useState(0);\n\n  return html`\n    <div>Counter: ${counter}</div>\n  `;\n}\n```\n\n\n## Build and Run\n\n```sh\n# install all dependencies\nnpm install\n\n# lint and build the library\nnpm run all\n```\n\n\n## License\n\nMIT\n","_attachments":{},"homepage":"https://github.com/bpmn-io/diagram-js-ui#readme","bugs":{"url":"https://github.com/bpmn-io/diagram-js-ui/issues"},"license":"MIT"}