{"_id":"@dorilama/uce-dragonbinder","_rev":"3-74f25be73cf28981a22c8d7174561801","name":"@dorilama/uce-dragonbinder","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.1":{"name":"@dorilama/uce-dragonbinder","version":"0.1.1","description":"µce Custom Elements with Dragonbinder for state management","main":"./cjs/index.js","scripts":{"build":"npm run cjs && npm run rollup:es && npm run rollup:index && npm run fix:default && npm run test","cjs":"ucjs --no-default esm cjs","rollup:es":"rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck","rollup:index":"rollup --config rollup/index.config.js","fix:default":"sed -i 's/({})/({}).default/' index.js && sed -i 's/({})/({}).default/' es.js","coveralls":"nyc report --reporter=text-lcov | coveralls","test":"nyc node test/index.js"},"keywords":[],"author":{"name":"dorilama"},"license":"MIT","devDependencies":{"basichtml":"^2.3.0","coveralls":"^3.1.0","dragonbinder":"^2.2.0","nyc":"^15.0.1","rollup":"^2.11.2","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^6.1.0","uce":"^0.13.1","ucjs":"^0.1.1"},"module":"./esm/index.js","type":"module","exports":{"import":"./esm/index.js","default":"./cjs/index.js"},"unpkg":"es.js","gitHead":"5f9e4399e6aa18a1d497f2319d7a2d155e0eb1bb","_id":"@dorilama/uce-dragonbinder@0.1.1","_nodeVersion":"14.1.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-CXdarA/iO+kHcCDQNvtiowqLyxE3m3V3CvzoruZHbw8Kx08b+To1IZdEMCMs279A+sayucPTH0QSi4BhC6oEXg==","shasum":"9750a5613d74e93a22bfdaa55aefbca2b03d0ded","tarball":"https://registry.npmjs.org/@dorilama/uce-dragonbinder/-/uce-dragonbinder-0.1.1.tgz","fileCount":8,"unpackedSize":10613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe08/ZCRA9TVsSAnZWagAAMHEQAJI1PN6d6VuC2vOQk8G4\nNJpHCZF6OOYJ4BkSGNEOf7BEmJlTbts+Gu7uI8xP5UkbxPDbMVPptk158+4l\n/wcyPSEGYGis7+Vm1nt0vdbXvJhp9ItjrcQ3WPJ6rlkLmTgKPJ/o09baVO4X\nHEkWPT3b+BN2OKlqx1SaxB+YKv9ioQNTN+zIf5PrwCG459MratOpJzSE2MJP\n6OgM837FuetiWK3C3262jBxeFKPTZBZ2UzzXiPWbElQfjQCUExuHVA8Z0RRS\nobRHmBMh/eEhCuOr8bwpemsKKpDQjv8TyhtkVPiJJNnuj4q7Ni5vVaPbKAoR\n4urkcPq93iOeZ0qf9AVdhsbFdBcrwOJsTJ1CQKA1Z6+6TrYPxZ+T2v4PNvmT\nVyvLT5xs4PQtVudlz5BqucA+uhRxPw1hS52okwU4mYCzJIByyH1hSnaN3DMx\ncSYbyqHdwfDKMoEZYsI3dyz1dIhgvPvnRpvyuQA66xIzA3udn6ki1tXduw8+\nSO5BTrP/fpUqVkOee+LxGglsnmQwy3wzoliPFAXjDHUBlfL2guQAS+qb7Zyy\nfAJw3/cIdVUQMlI0USpkA3ZmxxtAdAt0QVC5VbNjFq+4pQHMUEMF7YAHWvKd\nZ4+Xb06JRZkA0fL1idpFdJ3c8/qTmD8ifeR1LTB0PA1NSykXAfhYFWKMYvED\nRvOP\r\n=BjDF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCv7MgLLXITXajv2gz7PE0kxbbVfJ6jtO+Lo/3rqwP4PQIgHSE71shqDvecDSTue4TJJSdMxYa/dpsAt/fmGhAKutY="}]},"maintainers":[{"name":"dorilama","email":"assioma.xi@gmail.com"}],"_npmUser":{"name":"dorilama","email":"assioma.xi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/uce-dragonbinder_0.1.1_1590939608920_0.4709781748701254"},"_hasShrinkwrap":false,"deprecated":"This was a learning project."},"0.2.0":{"name":"@dorilama/uce-dragonbinder","version":"0.2.0","description":"µce Custom Elements with Dragonbinder for state management","main":"./cjs/index.js","scripts":{"build":"npm run cjs && npm run rollup:es && npm run rollup:index && npm run fix:default && npm run test","cjs":"ucjs --no-default esm cjs","rollup:es":"rollup --config rollup/es.config.js && sed -i.bck 's/^var /self./' es.js && rm -rf es.js.bck","rollup:index":"rollup --config rollup/index.config.js","fix:default":"sed -i 's/({})/({}).default/' index.js && sed -i 's/({})/({}).default/' es.js","coveralls":"nyc report --reporter=text-lcov | coveralls","test":"nyc node test/index.js"},"keywords":[],"author":{"name":"dorilama"},"license":"MIT","devDependencies":{"basichtml":"^2.3.0","coveralls":"^3.1.0","dragonbinder":"^2.2.0","nyc":"^15.1.0","rollup":"^2.18.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^6.1.0","uce":"^1.2.1","ucjs":"^0.1.1"},"module":"./esm/index.js","type":"module","exports":{"import":"./esm/index.js","default":"./cjs/index.js"},"unpkg":"es.js","gitHead":"1c5a3fadb8ff6e9d5e224d7fdd4b1684ddb01cff","_id":"@dorilama/uce-dragonbinder@0.2.0","_nodeVersion":"14.1.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-uRxv6uqiRL+oEeb9EgI/y8NRCgnHIrTJWlFqSYhjoWdQ8pRL5NRupBG2gFxXbVJIQRZ1Va4sSX9EOw01FMxiaA==","shasum":"54690876bc3e63c40f1610facc4933b3c47269dd","tarball":"https://registry.npmjs.org/@dorilama/uce-dragonbinder/-/uce-dragonbinder-0.2.0.tgz","fileCount":8,"unpackedSize":9536,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82NLCRA9TVsSAnZWagAA6xwP/2gXzz3XIrTVGuJk3Abq\nRIPoo6qRwjwLot909mmrj2f8MlKEV5hdFzEZ/VSoYshqEwIG0ACUnEacXTts\nyUrlaejSnkV/a5EOekjl6hKXlwRn4zxk/nAGZh4yh6DPymvtqbipcXq40org\nsu/M7QREl51yyjR2oqQEJQn98CtHwaHEWekjqR0GC0k3LKDJ1qidQTwXJ+0H\nX0rdQYKDNqIvQ8AU4aUN/cKXOkpTEc6NqmXdmbmqiJvW4dGFZOW2x2YCOLOm\n9ym7++ZWkPegxxQbe6mR8SLASid8537SBoxugQRKotHnL9adMOvo8QtFt5ch\nV7LUlMh3OIIsDvghVWDB0Xq2Icg7J632oOPBRwvpvdEQ5tBOkN0UhumGiIfU\nyVWEb/worrHLg0Gcownk9SB2gr4kmn4q/DABtttu2lr+pnWtGrlQE2h/etXj\nVW7s3+dox1aPRjefFsOeaDirNDh4C88/Ay1nfZfceFymQgT8+HuRuzGEpiUi\nngXHZvChFnCr6/5DODqSdyjTfGFsN4VM4AM+J+/Qi6Jkjp8FPwuQtYUJhV+y\ndbxaA986v1H29VTvLvJgu0+dTvejgYt9QqXyaGaCESakpIVHRtNHeGlOe+zz\nsyO2+5aowLTSe7tmTi94ob/tsFPj2xDpkavF4sakEF9NpCHe7lbLfP9JegvC\nx68s\r\n=X08z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmVVugUFSXEhGxNdrPxROeYfpZF4SyeAWbroBWEQ2cxgIhAKfP1WFIVAGxxRIVO8L61UR7KQkkIv6E1m9hQNvkrETD"}]},"maintainers":[{"name":"dorilama","email":"assioma.xi@gmail.com"}],"_npmUser":{"name":"dorilama","email":"assioma.xi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/uce-dragonbinder_0.2.0_1593008971324_0.8511840820089795"},"_hasShrinkwrap":false,"deprecated":"This was a learning project."}},"time":{"created":"2020-05-31T15:40:08.885Z","0.1.1":"2020-05-31T15:40:09.090Z","modified":"2022-04-05T05:26:54.163Z","0.2.0":"2020-06-24T14:29:31.475Z"},"maintainers":[{"name":"dorilama","email":"assioma.xi@gmail.com"}],"description":"µce Custom Elements with Dragonbinder for state management","keywords":[],"author":{"name":"dorilama"},"license":"MIT","readme":"# µce-Dragonbinder\n\nUse Custom Elements defined with [µce](https://github.com/WebReflection/uce) connected to a [Dragonbinder](https://github.com/Masquerade-Circus/dragonbinder) store for state management.\n\n---\n\n## Disclaimer\n\nThis is a demo project for learning purposes.\n\n## Use\n\nLive example [here]()\n\n```javascript\n/* import the libraries*/\nimport \"https://unpkg.com/uce?module\";\nimport \"https://unpkg.com/dragonbinder\";\nimport { getConnectedObj } from \"https://unpkg.com/@dorilama/uce-dragonbinder?module\";\n\n/* Create a store with dragonbinder. */\nconst store = new Dragonbinder({\n  state: {\n    count: 0,\n    history: [],\n    otherCount: 0,\n  },\n  mutations: {\n    add(state, n) {\n      state.count += n;\n      state.history = [...state.history, n];\n    },\n    otherAdd(state) {\n      state.otherCount += 1;\n    },\n  },\n  actions: {\n    asyncAdd(store, n) {\n      return new Promise((resolve) => {\n        setTimeout(() => {\n          store.commit(\"add\", n);\n          resolve();\n        }, 500);\n      });\n    },\n  },\n  getters: {\n    average(state) {\n      const { length } = state.history;\n      const avg = state.history.reduce((a, c) => a + c / length, 0);\n      return Math.round((avg + Number.EPSILON) * 100) / 100;\n    },\n  },\n});\n\n/* Create the Object Literal with properties and methods to extend your Custom Element */\nconst connectedObj = getConnectedObj(store);\n\n/* Use µce to create your Custom Element and spread connectedObj in it. */\n/* It is safe to use the object spread because there are no setters or getters. */\ncustomElements.whenDefined(\"uce-lib\").then(() => {\n  const { define, render, html } = customElements.get(\"uce-lib\");\n  define(\"my-counter\", {\n    /*\n     * Spreading connectedObj add the fololowing properties:\n     *  - store: the Dragonbinder store.\n     *  - state: the store.state\n     *  - getters: the store.getters\n     *  and the following methods:\n     *  -commit: to commit mutations to the store\n     *  - dispatch: to dispatch actions to the store\n     *  - subscribeToStore: to add a listener to store 'set' events.\n     *                      this methods also add an unsubscribeToStore method to remove the listener.\n     *  - connected: as per µce docs.\n     *               the provided connected method calls subscribeToStore\n     *  - disconnected: as per µce docs.\n     *                  the provided connected method calls unsubscribeToStore\n     */\n    ...connectedObj,\n    init() {\n      this.render();\n    },\n    render() {\n      this.html`<p>${this.state.count}</p> <p>${this.getters.average}</p>\n              <button onclick=${() => {\n                this.commit(\"add\", 1);\n              }}>add 1</button>\n              <button onclick=${() => {\n                this.dispatch(\"asyncAdd\", 19);\n              }}>asyncAdd 19</button>`;\n    },\n  });\n  define(\"my-othercounter\", {\n    ...connectedObj,\n    init() {\n      this.render();\n    },\n    render() {\n      this.html`<p>${this.state.count}</p><p>${this.state.otherCount}</p> \n              <button onclick=${() => {\n                this.commit(\"otherAdd\");\n              }}>otherAdd 1</button>`;\n    },\n    /* If you overwrite the connected and disconnected method\n     *  remember to subscribe and unsubscribe to the store.\n     */\n    connected() {\n      console.log(\"connected\");\n      /* subscribe to the store */\n      this.subscribeToStore();\n    },\n    disconnected() {\n      console.log(\"disconnected\");\n      /* unsubscribe to the store */\n      this.unsubscribeToStore();\n    },\n  });\n});\n```\n","readmeFilename":"README.md"}