{"_id":"@diamondgfx/app-route","_rev":"4-1d4635543fafa7cd5d7075365d4bb61b","name":"@diamondgfx/app-route","description":"An NPM-compatible version of app-route (no more bower!)","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@diamondgfx/app-route","version":"1.0.0","description":"An NPM-compatible version of app-route (no more bower!)","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"ISC","gitHead":"799837576958fc73e06508dbcd0bed46decdf67f","_id":"@diamondgfx/app-route@1.0.0","_shasum":"91cb5645b155e437a15dbf51eb83f37fd97e9f35","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"diamondgfx","email":"diamondgfx@gmail.com"},"dist":{"shasum":"91cb5645b155e437a15dbf51eb83f37fd97e9f35","tarball":"https://registry.npmjs.org/@diamondgfx/app-route/-/app-route-1.0.0.tgz","integrity":"sha512-ksGzB0aBENG3jW1u5jchz96pbk932bJ3BzWgk9lOIFpgRzPoeE9fRq+7Bokxh4qGtPsTcWs8VFG6yN8533H3gQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbb64hQ9CFPvL2KgBrMjiC6hRDoKaqyGEOWNiDIhrjbAiBeFk3topLTTSONg7sDC6z0a99cFP+olkCNKOo2FlSKOA=="}]},"maintainers":[{"name":"diamondgfx","email":"diamondgfx@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/app-route-1.0.0.tgz_1484922638452_0.126976499799639"}},"1.0.1":{"name":"@diamondgfx/app-route","version":"1.0.1","description":"An NPM-compatible version of app-route (no more bower!)","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Brandon Richey","email":"richeyb@gmail.com"},"license":"ISC","gitHead":"10738410a27f9f4d5c091c21bad334690e9022eb","_id":"@diamondgfx/app-route@1.0.1","_shasum":"68197ab37172347baf164a834634a84b68e98fb5","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"diamondgfx","email":"diamondgfx@gmail.com"},"dist":{"shasum":"68197ab37172347baf164a834634a84b68e98fb5","tarball":"https://registry.npmjs.org/@diamondgfx/app-route/-/app-route-1.0.1.tgz","integrity":"sha512-ckrOXGlUSpW9ydxxMOeBVf/+M2czZdjJ59yUdb4Hsb+Bw5JXlAxpD2TgT8f4U2tAkKBLy+p9mZ8nmWD2k3qSnw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3d8ZdK0NWv3v3r/6Fy3tb2i4IBSfaRCKd9a0v6grqFAIhAKOCefWHNNm8NoRWgG8JiMo/xbw+9ghvI16X8s8aq3Vc"}]},"maintainers":[{"name":"diamondgfx","email":"diamondgfx@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/app-route-1.0.1.tgz_1484923460782_0.10114875086583197"}},"1.0.2":{"name":"@diamondgfx/app-route","version":"1.0.2","description":"An NPM-compatible version of app-route (no more bower!)","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Brandon Richey","email":"richeyb@gmail.com"},"license":"ISC","gitHead":"ccb49ee2578a7fe74cdbc1e14a220f3ec21786f3","_id":"@diamondgfx/app-route@1.0.2","_shasum":"5dc8892524e19658723ebe8eaae846602c88b190","_from":".","_npmVersion":"3.10.3","_nodeVersion":"6.5.0","_npmUser":{"name":"diamondgfx","email":"diamondgfx@gmail.com"},"dist":{"shasum":"5dc8892524e19658723ebe8eaae846602c88b190","tarball":"https://registry.npmjs.org/@diamondgfx/app-route/-/app-route-1.0.2.tgz","integrity":"sha512-re0qt1uMR9okWIN7uaIC2gM+icHXJ7OBUf4pVG7Zm2pcFcX/bmXyyCrZ1M6L/cTXrHSAh1j8fQQEiUYVGRnHuQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGnrplSzmvCLPZ3UY0niI2pxhKJ3F41S2yedbNs2AeVUAiBQ4a4JSmz0y5PR6PArcut74waFpVHMaz26QJuL/Bpz3g=="}]},"maintainers":[{"name":"diamondgfx","email":"diamondgfx@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/app-route-1.0.2.tgz_1484923561921_0.7144105106126517"}}},"readme":"\n<!---\n\nThis README is automatically generated from the comments in these files:\napp-location.html  app-route-converter-behavior.html  app-route-converter.html  app-route.html\n\nEdit those files, and our readme bot will duplicate them over here!\nEdit this file, and the bot will squash your changes :)\n\nThe bot does some handling of markdown. Please file a bug if it does the wrong\nthing! https://github.com/PolymerLabs/tedium/issues\n\n-->\n\n[![Build status](https://travis-ci.org/PolymerElements/app-route.svg?branch=master)](https://travis-ci.org/PolymerElements/app-route)\n\n\n##&lt;app-route&gt;\n\n`app-route` is an element that enables declarative, self-describing routing\nfor a web app.\n\n> *n.b. app-route is still in beta. We expect it will need some changes. We're counting on your feedback!*\n\nIn its typical usage, a `app-route` element consumes an object that describes\nsome state about the current route, via the `route` property. It then parses\nthat state using the `pattern` property, and produces two artifacts: some `data`\nrelated to the `route`, and a `tail` that contains the rest of the `route` that\ndid not match.\n\nHere is a basic example, when used with `app-location`:\n\n```html\n<app-location route=\"{{route}}\"></app-location>\n<app-route\n    route=\"{{route}}\"\n    pattern=\"/:page\"\n    data=\"{{data}}\"\n    tail=\"{{tail}}\">\n</app-route>\n```\n\nIn the above example, the `app-location` produces a `route` value. Then, the\n`route.path` property is matched by comparing it to the `pattern` property. If\nthe `pattern` property matches `route.path`, the `app-route` will set or update\nits `data` property with an object whose properties correspond to the parameters\nin `pattern`. So, in the above example, if `route.path` was `'/about'`, the value\nof `data` would be `{\"page\": \"about\"}`.\n\nThe `tail` property represents the remaining part of the route state after the\n`pattern` has been applied to a matching `route`.\n\nHere is another example, where `tail` is used:\n\n```html\n<app-location route=\"{{route}}\"></app-location>\n<app-route\n    route=\"{{route}}\"\n    pattern=\"/:page\"\n    data=\"{{routeData}}\"\n    tail=\"{{subroute}}\">\n</app-route>\n<app-route\n    route=\"{{subroute}}\"\n    pattern=\"/:id\"\n    data=\"{{subrouteData}}\">\n</app-route>\n```\n\nIn the above example, there are two `app-route` elements. The first\n`app-route` consumes a `route`. When the `route` is matched, the first\n`app-route` also produces `routeData` from its `data`, and `subroute` from\nits `tail`. The second `app-route` consumes the `subroute`, and when it\nmatches, it produces an object called `subrouteData` from its `data`.\n\nSo, when `route.path` is `'/about'`, the `routeData` object will look like\nthis: `{ page: 'about' }`\n\nAnd `subrouteData` will be null. However, if `route.path` changes to\n`'/article/123'`, the `routeData` object will look like this:\n`{ page: 'article' }`\n\nAnd the `subrouteData` will look like this: `{ id: '123' }`\n\n`app-route` is responsive to bi-directional changes to the `data` objects\nthey produce. So, if `routeData.page` changed from `'article'` to `'about'`,\nthe `app-route` will update `route.path`. This in-turn will update the\n`app-location`, and cause the global location bar to change its value.\n\n\n\n##&lt;app-location&gt;\n\n`app-location` is an element that provides synchronization between the\nbrowser location bar and the state of an app. When created, `app-location`\nelements will automatically watch the global location for changes. As changes\noccur, `app-location` produces and updates an object called `route`. This\n`route` object is suitable for passing into a `app-route`, and other similar\nelements.\n\nAn example of the public API of a route object that describes the URL\n`https://elements.polymer-project.org/elements/app-location`:\n\n```css\n{\n  prefix: '',\n  path: '/elements/app-location'\n}\n```\n\nExample Usage:\n\n```html\n<app-location route=\"{{route}}\"></app-location>\n<app-route route=\"{{route}}\" pattern=\"/:page\" data=\"{{data}}\"></app-route>\n```\n\nAs you can see above, the `app-location` element produces a `route` and that\nproperty is then bound into the `app-route` element. The bindings are two-\ndirectional, so when changes to the `route` object occur within `app-route`,\nthey automatically reflect back to the global location.\n\n### Hashes vs Paths\n\nBy default `app-location` routes using the pathname portion of the URL. This has\nbroad browser support but it does require cooperation of the backend server. An\n`app-location` can be configured to use the hash part of a URL instead using\nthe `use-hash-as-path` attribute, like so:\n\n```html\n<app-location route=\"{{route}}\" use-hash-as-path></app-location>\n```\n\n### Integrating with other routing code\n\nThere is no standard event that is fired when window.location is modified.\n`app-location` fires a `location-changed` event on `window` when it updates the\nlocation. It also listens for that same event, and re-reads the URL when it's\nfired. This makes it very easy to interop with other routing code.\n\nSo for example if you want to navigate to `/new_path` imperatively you could\ncall `window.location.pushState` or `window.location.replaceState` followed by\nfiring a `location-changed` event on `window`. i.e.\n\n```javascript\nwindow.history.pushState({}, null, '/new_path');\nwindow.dispatchEvent(new CustomEvent('location-changed'));\n```\n\n\n\n##&lt;app-route-converter&gt;\n\n`app-route-converter` provides a means to convert a path and query\nparameters into a route object and vice versa. This produced route object\nis to be fed into route-consuming elements such as `app-route`.\n\n> n.b. This element is intended to be a primitive of the routing system and for\ncreating bespoke routing solutions from scratch. To simply include routing in\nan app, please refer to [app-location](https://github.com/PolymerElements/app-route/blob/master/app-location.html)\nand [app-route](https://github.com/PolymerElements/app-route/blob/master/app-route.html).\n\nAn example of a route object that describes\n`https://elements.polymer-project.org/elements/app-route-converter?foo=bar&baz=qux`\nand should be passed to other `app-route` elements:\n\n```css\n{\n  prefix: '',\n  path: '/elements/app-route-converter',\n  __queryParams: {\n    foo: 'bar',\n    baz: 'qux'\n  }\n}\n```\n\n`__queryParams` is private to discourage directly data-binding to it. This is so\nthat routing elements like `app-route` can intermediate changes to the query\nparams and choose whether to propagate them upstream or not. `app-route` for\nexample will not propagate changes to its `queryParams` property if it is not\ncurrently active. A public queryParams object will also be produced in which you\nshould perform data-binding operations.\n\nExample Usage:\n\n```html\n<iron-location path=\"{{path}}\" query=\"{{query}}\"></iron-location>\n<iron-query-params\n    params-string=\"{{query}}\"\n    params-object=\"{{queryParams}}\">\n</iron-query-params>\n<app-route-converter\n    path=\"{{path}}\"\n    query-params=\"{{queryParams}}\"\n    route=\"{{route}}\">\n</app-route-converter>\n<app-route route='{{route}}' pattern='/:page' data='{{data}}'>\n</app-route>\n```\n\nThis is a simplified implementation of the `app-location` element. Here the\n`iron-location` produces a path and a query, the `iron-query-params` consumes\nthe query and produces a queryParams object, and the `app-route-converter`\nconsumes the path and the query params and converts it into a route which is in\nturn is consumed by the `app-route`.\n\n\n\n##Polymer.AppRouteConverterBehavior\n\nProvides bidirectional mapping between `path` and `queryParams` and a\napp-route compatible `route` object.\n\nFor more information, see the docs for `app-route-converter`.\n\n\n","maintainers":[{"name":"diamondgfx","email":"diamondgfx@gmail.com"}],"time":{"modified":"2022-06-12T17:03:27.916Z","created":"2017-01-20T14:30:39.127Z","1.0.0":"2017-01-20T14:30:39.127Z","1.0.1":"2017-01-20T14:44:22.681Z","1.0.2":"2017-01-20T14:46:03.677Z"},"license":"ISC","readmeFilename":"README.md","author":{"name":"Brandon Richey","email":"richeyb@gmail.com"}}