{"_id":"@abradley2/dommy","_rev":"2-9a93e54ae42849e95fcea0cf95c4fb4a","name":"@abradley2/dommy","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@abradley2/dommy","version":"1.0.0","description":"Tiny-to-the-point-of-almost-being-a-joke virtual DOM utility","main":"dist/index.js","scripts":{"test":"standard ./index.js && parcel serve test.html --open","build":"parcel build index.js"},"repository":{"type":"git","url":"git+https://github.com/abradley2/dommy.git"},"keywords":["Custom Elements","Virtual DOM","Webcomponents"],"author":{"name":"Tony Bradley"},"license":"MIT","bugs":{"url":"https://github.com/abradley2/dommy/issues"},"homepage":"https://github.com/abradley2/dommy#readme","devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-transform-react-jsx":"^7.0.0","@webcomponents/webcomponentsjs":"^2.1.3","parcel-bundler":"^1.10.2","standard":"^12.0.1","tape":"^4.9.1"},"dependencies":{"morphdom":"^2.3.3"},"standard":{"env":"browser"},"gitHead":"0b4a31dbf9d134bd809b30a0c243839eaf918dee","_id":"@abradley2/dommy@1.0.0","_shasum":"cf23d07a6f7a23fef5ac3309ce0dd80ed25d752b","_from":".","_npmVersion":"3.5.2","_nodeVersion":"8.10.0","_npmUser":{"name":"abradley2","email":"antbradley91@gmail.com"},"dist":{"shasum":"cf23d07a6f7a23fef5ac3309ce0dd80ed25d752b","tarball":"https://registry.npmjs.org/@abradley2/dommy/-/dommy-1.0.0.tgz","integrity":"sha512-nFRJfvYnM2ccjsvbXHj3gs9/x3e9aJMINGlqOCNoEt6eSe7RprQ/wdpy8j1wBw/Aij//od+9qXVLIWxj8Lzqag==","fileCount":14,"unpackedSize":1419107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbulVfCRA9TVsSAnZWagAAUd4P/AsKiL+OiyhcW+0sHo2l\nGru85GjHqpcCZjeDQEP8sn3P0ZNDaZifxlWKemmOKqhDMoO5a7uvZqGZZE14\n6FriFJlyoMKScRAmptf5BiBS08kQb4oe+mK5DndLWWHopJcaNTpESnu6JwZy\nd9FVzWUkEF3dNgJicTq1iFhZy46MKnZCql2uVMEFAVkixz0UeRC3uOUYc5Ef\nvCTSQaDsLiuiOa86pN2ZISN8UyNJxm3Qr83ATMMVgYmN0keOktQ1ZWeLoIW9\nVbF+ZDt+FUh1lSg6u24gelpFNz67Io6MT0/5mqcS6LSxhFG/EtsRDf0MpSd0\n4yDWWa+nQp45iqrPEHUoQktMD9I81GpIL8iPSauuK7QGCxs1ZGUE/U5pD687\nmhskzrZOZczxJCuhOnDR8p/EadrtwrnHqwxx0seywM37bqOqpsml7FGzwTp0\nuCcSW8lTJ8MbmoyPbB8Oqs3PJESzVc412f5hnTDNS8ZTrpAO9Rg8HdiiWlIQ\n/X7jbZ+CXG7L3wrR8TQ9CM3gmOVttAUewyr/5kyRDmjJcVoH/plSUi9RJJWU\nvC8rbciVDub93rp3sQ5ZUEn1StXx+tx78GXDvK05tSnPTQA+/DD1V2o4CzMF\n3XmvpD9rctQowHSD0Dis6lF7BKKxg2CJQxcQ1tQilQEoluLOA5hRMWIhIWvn\nc2CP\r\n=okaZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0AZKfDK2aXjmpq8UBULfNzmHIfsiVxQcip37JkUVY+AIgPT2qsToSzYVEoR1NlWWQnQU4NkXTJNUx6eBIb+30r+w="}]},"maintainers":[{"name":"abradley2","email":"antbradley91@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dommy_1.0.0_1538938206341_0.13335773195324685"},"_hasShrinkwrap":false},"1.0.1":{"name":"@abradley2/dommy","version":"1.0.1","description":"Tiny-to-the-point-of-almost-being-a-joke virtual DOM utility","main":"dist/index.js","scripts":{"test":"standard ./src/index.js && parcel serve ./test/test.html --open","build":"parcel build ./src/index.js"},"repository":{"type":"git","url":"git+https://github.com/abradley2/dommy.git"},"keywords":["Custom Elements","Virtual DOM","Webcomponents"],"author":{"name":"Tony Bradley"},"license":"MIT","bugs":{"url":"https://github.com/abradley2/dommy/issues"},"homepage":"https://github.com/abradley2/dommy#readme","devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-transform-react-jsx":"^7.0.0","@webcomponents/webcomponentsjs":"^2.1.3","babel-plugin-transform-react-jsx":"^6.24.1","parcel-bundler":"^1.10.2","standard":"^12.0.1","tape":"^4.9.1"},"dependencies":{"morphdom":"^2.3.3"},"standard":{"env":"browser"},"gitHead":"39def3751f3bf861d305a6ee3a3b8d421a6bbe65","_id":"@abradley2/dommy@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.11.0","_npmUser":{"name":"abradley2","email":"antbradley91@gmail.com"},"dist":{"integrity":"sha512-FqI2LqKaXvM/o+BGrPXYvbyRMXobfakIDx1MnU92edzRJxM36CU1RqLTDyvPkeso7Lhw7IxTnFebSuAZZpRdFA==","shasum":"735c68ac350d60f72116ae31e1c70ff43f057154","tarball":"https://registry.npmjs.org/@abradley2/dommy/-/dommy-1.0.1.tgz","fileCount":13,"unpackedSize":1419552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbuloDCRA9TVsSAnZWagAAbs4P/3BGKowtfYyIqBzBaIes\njgg1yMRs8GGZ/zYFXnkk3znrO0dYMX2OxNLWNkd2MLCj2Hx/1lnazPWH5aQ3\nc884r/W1NApwTdu33ZkKGE8V7zRDBrvRat4s2FckC3ZCfX+/2Jb9xmxLFZbB\nuM7Hputy+mHWOlGMAZQ5XE2uAq5iO0BKMX5A8t/xpvgrBPxq8lOZyvHzlGkz\nTqlEmwl9iU++uCmST0DM45GriNqyw4pMIwuCnITp2F9VgOf/j8F0RE2UgDyk\ncrBEcJ2+Xvv/LD04KHHP65/adIzdapeAiTVNjv75qhd16UwSF4OoHwO/weYr\npitiQ1kZQG87bJ0bmlQb28pxAviXGj+G2XwjQzC/bXEKTpXB8jA6IaeBeayt\no57FBm+9a7G7TwgJV6uNqCp4mEKhbahQzJTnpNY+cibEwTDdHPBZNaaU6NL5\n72bNrPPM62hBURE7SD1ieoug5fjqrN1E2rQ9D9Vox2ZNNoeQFcL+BOUhMCJC\nfNYM7dwKcX9FFgu+6sJAyMadrh72PmQoteaoekf+TNtnGwAkEZ+VDOfTLl15\nVlIVwgv/iRtS+iwsrYz/zCWTIACObI6Vtz5XmcKGZRxdcXbYQbONnvRhxdwK\nvbU9VkXdNAOPE1cGOX8kslAzAlTUMfwCn4XMyIegY0MOa41cVEM91bBmTYBn\nAx4E\r\n=sknM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVDqmx6ktZZuYQOSKpAdzGXz1PnX8AU8caCAbFcGSgqAiEA8cWHR42KYlcCsqSVMjo76OYHcFF1KxTbNvEt7BSYDnI="}]},"maintainers":[{"name":"abradley2","email":"antbradley91@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/dommy_1.0.1_1538939394668_0.4701458874836246"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-07T18:50:06.179Z","1.0.0":"2018-10-07T18:50:06.634Z","modified":"2022-04-04T11:01:36.997Z","1.0.1":"2018-10-07T19:09:54.907Z"},"maintainers":[{"name":"abradley2","email":"antbradley91@gmail.com"}],"description":"Tiny-to-the-point-of-almost-being-a-joke virtual DOM utility","homepage":"https://github.com/abradley2/dommy#readme","keywords":["Custom Elements","Virtual DOM","Webcomponents"],"repository":{"type":"git","url":"git+https://github.com/abradley2/dommy.git"},"author":{"name":"Tony Bradley"},"bugs":{"url":"https://github.com/abradley2/dommy/issues"},"license":"MIT","readme":"# DOMMY\n\nCustom Element rendering for dummies.  \n\n**Installation**\n`npm install --save @abradley2/dommy`  \n\n# Motivation\n\nI wanted a convenience function for rendering in custom elements, without importing a library like Polymer that completely redefines how I create custom elements. I just want to render stuff without losing functionality, and with the same \"diff/patch\" virtual DOM efficiency libraries like React gives me.\n\nThis library uses [morphdom](https://github.com/patrick-steele-idem/morphdom) under the hood as the diffing engine, similar to [yo-yo](https://github.com/maxogden/yo-yo). But unlike **yo-yo**, uses a **createElement** function instead of ES6 template tags in favor of supporting JSX.\n\n# API\n\n_DOMMY_ has two functions. Only one of which you will use directly.   \n\n**createElement**  \nThis is just for using JSX. With `babel-plugin-transform-react-jsx` or any other source transform that lets you use a custom jsx pragma, simply do:\n```\n/** @jsx createElement */\nimport { createElement } from '@abradley2/dommy'\n```\nKewl. Now you can use JSX with _DOMMY_ just as you would with React.\n\n**render**  \nThis is the only function of _DOMMY_ you'll actually use.\n```\n/** @jsx createElement */\nimport { createElement, render } from '@abradley2/dommy'\n\nvar count = 0\n\nconst update = () => \n  render(\n    this,\n    <div>\n      <button\n        onclick={() => {\n          count += 1\n          update()\n        }}\n      >\n        {`Clicked ${count} times`}\n      </button>\n    </div>\n  )\n\nupdate() // initial render\n```\n\n# Guide: Usage With Custom Elements\n\nThis is the main motivation behind _DOMMY_ and if it's not what you're using it for there's 100% definitely a better solution for you out there. \n\nLet's start with a simple counter element like in the original example. Hardly anything changes here.\n\n```\nclass MyCounter extends HTMLElement {\n  connectedCallback () {\n    var count = 0\n\n    this.update = () => {\n      render(\n        this,\n        <div>\n          <button\n            onclick={() => {\n              count += 1\n              this.update()\n            }}\n          >\n            {`Clicked ${count} times`}\n          </button>\n        </div>\n      )\n    }\n\n    this.update()\n  }\n}\n```\n\nOk. Kewl. Now let's allow the application to pass in an attribute called \"buttontitle\" to our custom element and use it in the render function. Really, we're just doing what we normally do with custom elements: using `this.getAttribute` to handle data passed in from the parent.\n\n```\nthis.update = () => {\n  render(\n    this,\n    <div>\n      <h3>{this.getAttribute(\"buttontitle\")}</h3>\n      <button\n        onclick={() => {\n          count += 1\n          this.update()\n        }}\n      >\n        {`Clicked ${count} times`}\n      </button>\n    </div>\n  )\n}\n```\n\nAwesome. But `buttontitle` might not always be the same as it was when the component was mounted. Once again, the solution is just doing what we normally do with web components.\n\n```\nclass MyCounter extends HTMLElement {\n  static get observedAttributes () {\n    return ['buttontitle']\n  }\n\n  attributeChangedCallback() {\n    if (this.update) this.update()\n  }\n```\n\n\n\n","readmeFilename":"README.md"}