![\"Status\"/](\"https://img.shields.io/badge/Status-Beta-green.svg\"){kind=icon}
\n \n \n\n ![\"GitHub](\"https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872\")
\n\n ![\"npm](\"https://img.shields.io/npm/v/@agile-ts/proxytree.svg?label=npm&style=flat&colorA=293140&colorB=4a4872\")
\n\n ![\"npm](\"https://img.shields.io/bundlephobia/min/@agile-ts/proxytree.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872\")
\n\n ![\"npm](\"https://img.shields.io/npm/dt/@agile-ts/proxytree.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872\")
\n\n{myObject.data.adressData.street}
;\n```\nThe Component (represented in the above example) is only rerendered by AgileTs if `myObject.data.adressData.street` mutates\nand no longer when anything in the object changes. (like it is in `useAgile()`)\nFor instance, if we change `myObject.data.name` the Component won't be rerendered,\nsince this property isn't accessed in it.\n\n### 🌳 Construction of `Proxy Tree`\n\nFirst, the main target object is converted into the root Branch (`.rootBranch`).\nEach Branch represents a particular object wrapped in a [`Proxy()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)\nand keeps track of its child Branches.\nThese child Branches are created as soon as a certain property in the parent Branch has been accessed.\nThen the accessed property will be transformed into a sub Branch of the parent Branch and gets part of the Proxy Tree.\nThis way, only accessed properties are added to the Proxy Tree.\nThe Proxy Tree isn't aware of the other (not accessed) properties, as they aren't yet relevant.\nAs soon as an unrecognized property is accessed, it is added to the Proxy Tree.\n```ts\n// Orginal Object with sub Objects\nconst original = {\n a: [{ b: 1 }, { 1000: { a: { b: 1 } } }, '3rd'],\n b: { c: { d: 'hi' } },\n c: { a: 'hi' },\n};\n\n// Create Proxy Tree\nconst proxyTree = new ProxyTree(original);\nconst proxyfiedOrginal = proxyTree.proxy; \n\n// Access Properties\nproxyfiedOrginal.a;\nproxyfiedOrginal.a[0];\nproxyfiedOrginal.c.a;\n\n// Proxy Tree looks like that:\nBranch({\n a: Branch([Branch({ b: 1 }), { 1000: { a: { b: 1 } } }, '3rd']),\n b: { c: { d: 'hi' } },\n c: Branch({ a: Branch('hi') }),\n});\n\n// Access more Properties\nproxyfiedOrginal.b;\nproxyfiedOrginal.a[2];\n\n// Proxy Tree now looks like that:\nBranch({\n a: Branch([Branch({ b: 1 }), { 1000: { a: { b: 1 } } }, Branch('3rd')]),\n b: Branch({ c: { d: 'hi' } }),\n c: Branch({ a: Branch('hi') }),\n});\n```\n\n## ⚡️ API\n\n### `getUsedRoutes()`\n\nReturns the Paths to the accessed properties in array shape.\n```ts\n// Orginal Object with sub Objects\nconst original = {\n a: [{ b: 1 }, { 1000: { a: { b: 1 } } }, '3rd'],\n b: { c: { d: 'hi' } },\n c: { a: 'hi' },\n};\n\n// Create Proxy Tree\nconst proxyTree = new ProxyTree(original);\nconst proxyfiedOrginal = proxyTree.proxy;\n\n// Access Properties\nproxyfiedOrginal.a;\nproxyfiedOrginal.a[0]['b'];\nproxyfiedOrginal.a[1][1000]['a']['b'];\nproxyfiedOrginal.c.a;\nproxyfiedOrginal.b;\nproxyfiedOrginal.a;\n\n// Get route to accessed Properties\nconsole.log(proxyTree.getUsedRoutes()); // Returns (see below)\n// [\n// ['a', '0', 'b'],\n// ['a', '1', '1000', 'a', 'b'],\n// ['c', 'a'],\n// ['b'],\n// ['a'],\n// ]\n```\nThe algorithm behind reconstructing the used routes/paths is pretty straightforward and simple.\nIt may not be very efficient, but it works, and that is what counts for now.\n\n![\"pathTrackingImage\"](\"https://raw.githubusercontent.com/agile-ts/agile/master/packages/proxytree/static/pathTrackingImage.jpg\"){kind=tracking}
\n\nIn the above image, each blue-circled property is an end accessed property (so b and x).\nEach time a property was accessed, \nthe Proxy Tree counted the `used` property of this Route/Node. \nAlso, between Routes like 'a' or 'c' were accessed and thus incremented.\nThis is due the fact that, by accessing the property `c` via `a.b.c`, you access `a` and `b` before accessing `c`.\nThis way, we are able to reconstruct the paths to the accessed properties \nwith the simple algorithm you can find in the above image.\n\n\n### `transformTreeToBranchObject()`\n\nTransforms Proxy Tree into an easily processable object.\nTherefore, it goes through each Branch (starting at the root Branch) and transforms them into `BranchObjects`.\n```ts\n// Orginal Object with sub Objects\nconst original = {\n a: [{ b: 1 }, { 1000: { a: { b: 1 } } }, '3rd'],\n b: { c: { d: 'hi' } },\n c: { a: 'hi' },\n};\n\n// Create Proxy Tree\nconst proxyTree = new ProxyTree(original);\nconst proxyfiedOrginal = proxyTree.proxy;\n\n// Access Properties\nproxyfiedOrginal.a;\nproxyfiedOrginal.a[0];\nproxyfiedOrginal.c.a;\n\nconsole.log(proxyTree.transformTreeToBranchObject()); // Returns (see below)\n// {\n// key: 'root',\n// timesAccessed: 3,\n// branches: [\n// {\n// key: 'a',\n// timesAccessed: 2,\n// branches: [{ key: '0', timesAccessed: 1, branches: [] }],\n// },\n// {\n// key: 'c',\n// timesAccessed: 1,\n// branches: [{ key: 'a', timesAccessed: 1, branches: [] }],\n// },\n// ],\n// }\n```\n\n## 📄 Documentation\n\nSounds AgileTs interesting to you?\nCheckout our **[documentation](https://agile-ts.org/docs/introduction)**, to learn more.\nAnd I promise you, you will be able to use AgileTs in no time.\nIf you have any further questions, don't hesitate to join our [Community Discord](https://discord.gg/T9GzreAwPH).\n\n## ⭐️ Contribute\n\nGet a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀\nTo find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).\n\n\n ![\"Maintainability\"/](\"https://codeclimate.com/github/agile-ts/agile/coverage.svg\")
\n\n","readmeFilename":"README.md"}