{"_id":"@alexcambose/virtual-dom","_rev":"2-f84944ceb1ffd71cc49984d39db50e12","name":"@alexcambose/virtual-dom","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@alexcambose/virtual-dom","version":"1.0.0","description":"A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.","main":"index.js","scripts":{"test":"mocha --require babel-core/register","prod":"NODE_ENV=production webpack","build":"NODE_ENV=development webpack","watch":"NODE_ENV=development webpack --watch"},"repository":{"type":"git","url":"git+https://github.com/alexcambose/virtual-dom.git"},"keywords":["virtual-dom","algorithm","react","dom","api","diffing","dom-manipulation","dom-events","dom-tree"],"author":{"name":"Alexandru Cambose"},"license":"MIT","bugs":{"url":"https://github.com/alexcambose/virtual-dom/issues"},"homepage":"https://github.com/alexcambose/virtual-dom#readme","devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-env":"^2.4.1","babel-loader":"^7.1.4","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-object-rest-spread":"^6.26.0","chai":"^4.1.2","jsdom":"^11.10.0","mocha":"^5.1.1","uglifyjs-webpack-plugin":"^1.2.5","webpack":"^4.6.0","webpack-cli":"^2.0.15"},"gitHead":"bb6703d31fd2ab2588e6899fd2c33aa013cccb94","_id":"@alexcambose/virtual-dom@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"alexcambose","email":"alexcambose@yahoo.com"},"dist":{"integrity":"sha512-I5Z605Xjw3SR64IejH6KPhrvYDfe4BziTy3oXsjpoCDUTmG2kOqrVjM2A6Th64dR5W3yxqE5c8Mi82elH5vBwA==","shasum":"bd58af8b1cc55fb48da652b55cd2a18840d10c0f","tarball":"https://registry.npmjs.org/@alexcambose/virtual-dom/-/virtual-dom-1.0.0.tgz","fileCount":19,"unpackedSize":34905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9e1FCRA9TVsSAnZWagAAX/cP+wXS4kkSj7V04PocFqR5\nzcOL6QqmrPGUS0nQhDpfhmasds55Z2XAdgDfv+8TgoAmMhLVIPyhp/Zc+I6n\nPy4bSClEXnVs/ktGSE62GFUViL7dxbJRzts2JbgKK97MsNjvQMxiFQiVBb8l\ncuwLAhnL820z9s4LKJAdgwghI8gMObHTWbl7h6idyOyAtO3Y1u1oUl8C0YSz\nI265qA6PbH9fynyvzG7z/NFf0MQdtb9M1l2v1EbTwp0o4YroMQHtW95qOMXH\n0dgvRkVLJ3bFeTuOK/wIOBVI05Y4GydQZq/HlWHmJtlpGO5HqM49L4IRVDWY\ntSmSUQHa+K0iqtr8yguoDW0E+qw2UDBT0lnmVRRwjpGRBD2EgfhwJl1gB6F4\n9NUYp3CQ+dHB2YdsZcRKFVHwMJV3IElq9U3XfNzLXQL5sbe1sEcinmMWyfPk\nuv2AI6l9FPS1s1iK/W5MvcZIwnz1gG32yBrYWkgcF2Z6SJp+Smuq/ngeUQk5\nPLkiFm2yT4i6yrydnLoqyi3lKoyAqzgyUC/ZVDK5Av8+2vwjsSfyFdUw1AuC\nJarUojXPdoZ47Z+EIyMCAFLL847YFy/7jTSI4vk02H7QBjGHAT8PbPywcqAI\nczTw4xmcRFr23S0GgfuCh0FszbIvK9F2evwEE4dYHZtwYpuXtDQzXa+3cznS\nMU3j\r\n=KDGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw3tKvAaP5r9jAZKG59CrnNsPkNKQRAE44u97Qg6zuxwIhAL8ysj9E+VzhgY89qmsJUmZH+5tMCV0GL4KtLcKjWd5k"}]},"maintainers":[{"name":"alexcambose","email":"alexcambose@yahoo.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-dom_1.0.0_1526066500083_0.8041814961868341"},"_hasShrinkwrap":false},"1.0.1":{"name":"@alexcambose/virtual-dom","version":"1.0.1","description":"A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.","main":"src/index.js","scripts":{"test":"cross-env mocha --require babel-core/register","prod":"cross-env NODE_ENV=production webpack","build":"cross-env NODE_ENV=development webpack","watch":"cross-env NODE_ENV=development webpack --watch"},"repository":{"type":"git","url":"git+https://github.com/alexcambose/virtual-dom.git"},"keywords":["virtual-dom","algorithm","react","dom","api","diffing","dom-manipulation","dom-events","dom-tree"],"author":{"name":"Alexandru Cambose"},"license":"MIT","bugs":{"url":"https://github.com/alexcambose/virtual-dom/issues"},"homepage":"https://github.com/alexcambose/virtual-dom#readme","devDependencies":{"chai":"^4.1.2","jsdom":"^11.10.0","mocha":"^5.1.1","uglifyjs-webpack-plugin":"^1.2.5","webpack":"^4.6.0","webpack-cli":"^2.0.15","cross-env":"^5.1.5"},"dependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-env":"^2.4.1","babel-loader":"^7.1.4","babel-plugin-transform-es2015-modules-commonjs":"^6.26.2","babel-plugin-transform-object-rest-spread":"^6.26.0"},"gitHead":"1a618ce02b1d3aa8dba4f60c7162aaa55beb68a5","_id":"@alexcambose/virtual-dom@1.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"alexcambose","email":"alexcambose@yahoo.com"},"dist":{"integrity":"sha512-MIZJ9LIOLCLrBzJy88Jt5Yw47o2Qnmrx2Gz4Epu6MwnOvdbYI6HbZ3YZlvHUR1JqQxQ/6iTkO6riURzQZd/Ryw==","shasum":"e3c0e69a573be579138484432d05c372783e8cbd","tarball":"https://registry.npmjs.org/@alexcambose/virtual-dom/-/virtual-dom-1.0.1.tgz","fileCount":19,"unpackedSize":35639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+CIhCRA9TVsSAnZWagAAZncP/2GVtl6j4g2jKQ/rrqWD\nAFWgPj2nzn1r7MiPcmzadECVFTzSUqlAzeLJMP0rL2IOApD66CcYlaBxSR3C\nSjefuPLgrXV93FxiTBtJt3CeU/Oev3VoJjuVAIo/uYCrrsUqwozRRSgmSbHO\nK4RTatFMaKANQZBZcCFqMpdk4LOkHfBh7vYrUZRf6dmo0qSLST+evHZET+NY\n/1QxPMmxPPehip23vg+8yn7qIsMM+ht6B3ghG3xfC/F/wkldsgN0yKlyfaC5\nOBR29U5ikDjWvECXQZw0NP7wP+kCfldOn2JO/8Ank78Jv0bZ6B0udW6WJhvO\nviFKbDVXj12ixDmHHRObPHqO7SyjIcfKlc3i3HxXIc5FuQGrNxIkVYsJWpfC\nJhyiOi+H+XE55L+ylwhO5eFoBWvMUf0d2JEBPPdVsGauIgJ28NNz9ruwQbNR\nN4VGEgduZGZP4mb8r6RtnTwWihOuUNY6BnkJu28LU9/i8KeD7xYD0PW1Dnjn\n3s8oaMUvL+6sZ0QL3gfOfmj7WQN8JeF6NxUlwMt7lLEy7gfN6QI83MRqunEf\ndHnNCYY7PhIwsUQxsdhyXv74XeEOZXCg/aus2e7nrA4DiawCxdUO290cjfzb\nNbk5PBTMMUlt32LggbvMILppifkv3rIMqubIe973xEPPHm9uKDzkyMBgRCFe\nZF5D\r\n=0fML\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjCHOQbL82PbIfRAY9h0lM2bfl1IyHWyS6h88iLWhYhAiEApcusXDk2+/omGStw5awgElnPW9d9nTUf5U0C2o/+4mI="}]},"maintainers":[{"name":"alexcambose","email":"alexcambose@yahoo.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/virtual-dom_1.0.1_1526211104964_0.2798537507253964"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-11T19:21:40.027Z","1.0.0":"2018-05-11T19:21:40.196Z","modified":"2022-04-04T12:39:30.773Z","1.0.1":"2018-05-13T11:31:45.092Z"},"maintainers":[{"name":"alexcambose","email":"alexcambose@yahoo.com"}],"description":"A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.","homepage":"https://github.com/alexcambose/virtual-dom#readme","keywords":["virtual-dom","algorithm","react","dom","api","diffing","dom-manipulation","dom-events","dom-tree"],"repository":{"type":"git","url":"git+https://github.com/alexcambose/virtual-dom.git"},"author":{"name":"Alexandru Cambose"},"bugs":{"url":"https://github.com/alexcambose/virtual-dom/issues"},"license":"MIT","readme":"# virtual-dom\r\n\r\n[![Build Status](https://travis-ci.org/alexcambose/virtual-dom.svg?branch=master)](https://travis-ci.org/alexcambose/virtual-dom)\r\n\r\nA Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.\r\n\r\n### [**DEMO**](https://alexcambose.github.io/virtual-dom/)\r\n\r\n## Installation\r\nAs [npm](https://www.npmjs.com/package/@alexcambose/virtual-dom) package\r\n```bash\r\nnpm i -S @alexcambose/virtual-dom\r\n```\r\nStandalone script file\r\n```html\r\n<script src=\"dist/virtual-dom.js\"></script>\r\n```\r\n\r\n## Usage\r\n```javascript\r\nlet newContent = null;\r\n\r\n// function thet will create virtual-dom object\r\nconst createDom = title => (\r\n    h('div', null,\r\n        h('h1', { className: 'header' }, title),\r\n        h('p', null , 'Lorem ipsum'),\r\n        h('footer', { className: 'footer' }, 'The footer'),\r\n    )\r\n);\r\n\r\n// create virtual-dom object\r\nlet content = createDom('Some title');\r\n\r\n// render the virtual dom object into the real dom\r\nrender(content, document.getElementById('app'));\r\n\r\nconst rerender = () => {\r\n\r\n    // create the virtual-dom object again but with dfferent properties\r\n    newContent = createDom('Some other title');\r\n\r\n    // patches object that will be used to modify changed elements\r\n    const patches = diff(content, newContent);\r\n\r\n    //appy patches\r\n    patch(appContainer, patches);\r\n\r\n    // update content\r\n    content = newContent;\r\n};\r\n```\r\n\r\n\r\n## API\r\n* `h(tagName, props, ...children)` - Function to define virtual-dom using hyperscript style\r\n```js\r\nh('div', { className: 'section' },\r\n    h('h1', { style: {color: 'red'} }, 'Section title'),\r\n));\r\n```\r\nwill output\r\n```js\r\n{\r\n   type: \"div\",\r\n   props: {\r\n      className: \"section\",\r\n      children: [\r\n         {\r\n            type: \"h1\",\r\n            props: {\r\n               style: {\r\n                  color: \"red\"\r\n               },\r\n               children: [\r\n                  \"Section title\"\r\n               ]\r\n            }\r\n         }\r\n      ]\r\n   }\r\n}\r\n```\r\n\r\n* `render(VDOM, domElement)` - renders the virtual dom object into a specified element in dom\r\n```js\r\n// content = h(..., h(...))\r\nrender(content, document.getElementById('app'));\r\n```\r\n* `diff(oldVDOM, newVDOM)` - create a *patches object* that contains all the differences between two virtual-dom objects, should be used with `patch`\r\n```js\r\nconst oldVDOM = h('h1', null, 'Hello title');\r\nconst newVDOM = h('h1', { className: 'header' }, 'Hello new class');\r\nconst patches = diff(oldVDOM, newVDOM);\r\n```\r\n`patches` will look something like this\r\n```js\r\n{\r\n   0:{\r\n      childrenPatches: {\r\n         0: {\r\n            selfPatch: {\r\n               type: PATCH_TEXT_NODE,\r\n               payload: \"Hello new class\"\r\n            }\r\n         }\r\n      }\r\n   }\r\n}\r\n```\r\n\r\n* `patch(domElement, patches)` - updates the dom based on the patches produced by `diff`\r\n```js\r\nconst patches = diff(oldVDOM, newVDOM);\r\npatch(document.getElementById('app'), patches);\r\n```\r\n\r\n## License\r\nMIT\r\n","readmeFilename":"README.md"}