{"_id":"@daleighan/vanilla-js-router","_rev":"3-316ff8c7cc6cad9685c8713284ac7f4f","name":"@daleighan/vanilla-js-router","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@daleighan/vanilla-js-router","version":"0.1.0","description":"A Vanilla JS library for client side routing","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/daleighan/vanilla-js-router.git"},"author":{"name":"Alexander Leigh"},"license":"ISC","devDependencies":{"husky":"^3.0.9","lint-staged":"^9.4.2","prettier":"^1.18.2"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"gitHead":"c5d3f197b266f1955e696b5ac63230ecd834c471","bugs":{"url":"https://github.com/daleighan/vanilla-js-router/issues"},"homepage":"https://github.com/daleighan/vanilla-js-router#readme","_id":"@daleighan/vanilla-js-router@0.1.0","_nodeVersion":"10.16.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-KNAALiLkwqHAMfKe5AuqmZ2FnkeNmxTJLoJDADGEbfmIRdjSHFJSVxPVtB+ugoejvamrNGVfbXJciAlaLhJjTA==","shasum":"9bd7a426f968bf7a3356034eb36fafb82a219f2b","tarball":"https://registry.npmjs.org/@daleighan/vanilla-js-router/-/vanilla-js-router-0.1.0.tgz","fileCount":4,"unpackedSize":8066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfhvCRA9TVsSAnZWagAA3PsQAJ8vnlo6AGR4L9BhNoQR\nzu2LqChTeMKNXKLfq9TeLCkwpRC5TtNAYiKP5Pbs5ubtg6cDr38oTRq3NH8z\ndIBMIB3flrXIS19MukwE+0dMUxIED682w3uebfmnnDEoSNpFhP8T2v6+4I0S\n+T253vl9HzLAXp78TvTfGf6ZDF4bSeHVA91GnKncxUniq4FFu4b0LN2g7ZW4\nxgAtX/mNT21Yxmj8ET5INhS6KuwRMwd7QzgI6ANZah7qqLz3CZ+7vdUAfodr\nIXfQV4hWq/NP+xgzqJAosaHeM65mAD1SeKhcLbsIpGupURTMEh32VVPOpDTj\nlXxqxyJmRDiScPfWEPmxDQyzzy22QGxFoptNndqgsrFEvAmHTUlWTn3OdRPf\nwAyvsX1Ir57D250TkjA0j3cO4kmknZ5Xb8oRdGwX6ayVWiSf6q7PqgnX3f2l\n9oXBd/ivjeEhkPtIecQa7mKOZNGNHOehZZsBmbjEShVIVHVu3lcj3AX5mQRJ\nUukv5GQOWqjn7Rpqgh1WQRjUINWlxO6qA4HOnDulgZUbhzN/Ug+8LG9lKWX3\nBBBlMXOYPmhX7T1J8yTW1aD2d1UyU5l/6Eswm/FRaYLBi97Tlle5xU43sE6U\nxuzTWy5iE1GXG/OPa2Z0YlPFhMt9hpQl5WNxStCx+umH1pAVwuahJwFFnxK0\nwlp1\r\n=G9E9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbmUxRORl8CSPolA4nQe6/EdQv9xfd54OrUCE5rS9d8AiAC0xr/OrgJDXxKrbpTFONo57s2H9gRQn2adRvmqGByGQ=="}]},"maintainers":[{"name":"daleighan","email":"daleighan@gmail.com"}],"_npmUser":{"name":"daleighan","email":"daleighan@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vanilla-js-router_0.1.0_1573779567274_0.9446121956454507"},"_hasShrinkwrap":false},"0.1.1":{"name":"@daleighan/vanilla-js-router","version":"0.1.1","description":"A Vanilla JS library for client side routing","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/daleighan/vanilla-js-router.git"},"author":{"name":"Alexander Leigh"},"license":"ISC","devDependencies":{"husky":"^3.0.9","lint-staged":"^9.4.2","prettier":"^1.18.2"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"gitHead":"c88540eeee74fb67823e6582508362d9e1c64210","bugs":{"url":"https://github.com/daleighan/vanilla-js-router/issues"},"homepage":"https://github.com/daleighan/vanilla-js-router#readme","_id":"@daleighan/vanilla-js-router@0.1.1","_nodeVersion":"10.16.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Pc//846iMa8STihsjGMvYbM94AIPze6pSdh5+4ow8lzT+voJ5uB/IFxAwU/eqyKBJPNJPveyzFb9NKMQ+gWyVQ==","shasum":"f81cbcc29bf264413ffb3f2ea070d53ee737d7ed","tarball":"https://registry.npmjs.org/@daleighan/vanilla-js-router/-/vanilla-js-router-0.1.1.tgz","fileCount":4,"unpackedSize":11257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzhNzCRA9TVsSAnZWagAA0wwQAJXGFkUOBeDDXjoqdyaQ\nF2cbcWYTNQxGIH01w1RbEM3Uw9g72gg0cSUiQYMIF4a0AS5TFQowDC5txodG\n9Sp1ehiVaiG/PPy3Xv1zYTqWNa6ZP/Cf6sTbBz0uIAUPLEy7zaXgDOi+kOx8\nG51MMIETg894VbVq8q/uzopkuJcmjev1QOqkWAgAeP3KtFHja8MR4k2GVB4d\ncdo6zFdZms1u0jMSJasUyPMWFOCkFl7FrkY8GfvpA395N2LXbcKCRUGHpnFN\nZhSqEhpSm3XcYIwsJ/vykBheS2sNCx2Rs1NwYibezvFL0KriPJ0iikGPuPDM\nI60XaZf8oZCn6ccAWPIV8GGhSH9h4+tu5WxilkulpQeWscgOhcRAYXhoOu7t\nxDTE34oVUaTsNmaJ6P88SI+kCorFJ03mrBsdzWpwks3/ATrs/9Mxoqsruzuu\nlbAdBrzppdvcWKdpc28zL2tXld1tMEMMW16JaGGuFSbEWsYfFnevLbTNn1QY\ns1cGHsg/BBssaEVpoD7xTb6d27S0eg/FIBomF1mxnypJ/Hm40joutzSqQec6\nPrxzq6QhwEvxcosRsHKu5MStmy+dUOB2KJph55dEbaQNAXpiOz/biJdmRAW+\nMcKiTuQA9LpcqF4jvKHv4V7W06bUJvdDd50I8bX2eY+4fsT2e8PQdXG2Oq96\nrUJe\r\n=atCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGj+P5jRLzYSBGlViN0BKKDDBw2ryRHV1djVzu4r+AxAIhAJflkA1QWYZ6w7NJnXwyhFyHGzkVrQjb5BTLEoI4mt/q"}]},"maintainers":[{"name":"daleighan","email":"daleighan@gmail.com"}],"_npmUser":{"name":"daleighan","email":"daleighan@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vanilla-js-router_0.1.1_1573786483513_0.5109458497968964"},"_hasShrinkwrap":false},"0.1.2":{"name":"@daleighan/vanilla-js-router","version":"0.1.2","description":"A Vanilla JS library for client side routing","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/daleighan/vanilla-js-router.git"},"author":{"name":"Alexander Leigh"},"license":"ISC","devDependencies":{"husky":"^3.0.9","lint-staged":"^9.4.2","prettier":"^1.18.2"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,md}":["prettier --write","git add"]},"gitHead":"4af41076e9fe276d44145752b38249223ede4938","bugs":{"url":"https://github.com/daleighan/vanilla-js-router/issues"},"homepage":"https://github.com/daleighan/vanilla-js-router#readme","_id":"@daleighan/vanilla-js-router@0.1.2","_nodeVersion":"10.16.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-rXwkgltMoFdINt6tK8+RV4518e4RkIZvo6wKYif62N/20viC4bgEFMMacevQei2olaHOAPEiSGcIAFEYPQhQ6g==","shasum":"cefe11ee9391a984c7480a57acfcba501328219f","tarball":"https://registry.npmjs.org/@daleighan/vanilla-js-router/-/vanilla-js-router-0.1.2.tgz","fileCount":4,"unpackedSize":11237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzhRACRA9TVsSAnZWagAAo04P/23TnYGvZjDA4YKEVTQ0\n8DhYu7fZydzSjQk5t0Qz5pGJ0VaALwhKRuYm0ZXwd0b/BpttbmV+Y/jmlvMS\nuZrJV9eGfmJvrYntu6xMOAmq6Po40sbBFoiJbM3EiHWmDcZyHZ5uOCaKCQe8\nJX2RsE0kwUIXEu4zq8oy6Gwk/j93m2wGSC3fRDPtEj9N0L52HX/6IUcxJyZJ\nxLab4vxGNEO/qvEpRx3pbwsmJuOa0gIPMa5Ml4iSjuPZiaIwKzzkGoK+KUpg\n9b/fvTdYa27ng1zwHcERWP7IAdRB1uF6jacnJn9VRJ+iWYFEEnimpFnLlSpO\nElstv430fIrz0vNGee9MqFaSBlHO74iup0BLdINIUfB04eQJxu1iUReIu0nW\nquW52jvM3w3doB4f4FkiOIeR7YdoDqrOHLq82A+Jd4Q/12F4egJ+BbAcXJ8G\nxJh1m2YnlZMnBR6nAhszW6bNvZ6YjGxWEqEvrJntC2U2h8SVyMgu+eTJi78R\nEMeVj2ggc1IDjgWaWxKw+RqUevYmprQ5GdUEk4g4UUurZlIcEALJwSuz6AbW\nRZBCoXMS1Ssyhq1vBFzBoqzwyc/+mU9gKvTYQhA7vnhrDlTCu2fXwZKx9g1+\nzte8U0m6I6EZW8Wlm7ZPAq035G+hLKzofLIRi9CcXANZ2w4yj4bJPwOGjt2+\nztGu\r\n=lQAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMcvr1RqYwfzu/MJ8taiL3suBaQTGCK5FMTVSUK1Z3fAiBj2562mpMTlY/NuQiglHmp6ofJyLx4voGSlB7R9IFX3A=="}]},"maintainers":[{"name":"daleighan","email":"daleighan@gmail.com"}],"_npmUser":{"name":"daleighan","email":"daleighan@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vanilla-js-router_0.1.2_1573786688117_0.7972641104600908"},"_hasShrinkwrap":false}},"time":{"created":"2019-11-15T00:59:27.034Z","0.1.0":"2019-11-15T00:59:27.419Z","modified":"2022-04-05T02:37:51.411Z","0.1.1":"2019-11-15T02:54:43.652Z","0.1.2":"2019-11-15T02:58:08.280Z"},"maintainers":[{"name":"daleighan","email":"daleighan@gmail.com"}],"description":"A Vanilla JS library for client side routing","homepage":"https://github.com/daleighan/vanilla-js-router#readme","repository":{"type":"git","url":"git+https://github.com/daleighan/vanilla-js-router.git"},"author":{"name":"Alexander Leigh"},"bugs":{"url":"https://github.com/daleighan/vanilla-js-router/issues"},"license":"ISC","readme":"# vanilla-js-router\n\n### What is this project?\n\nIt is a library for client-side routing that is independent of any other frameworks or libraries. It was created to be used for a single page application and is designed to be flexible and lightweight. It provides the functionality of libraries like react-router for apps using vanilla JavaScript. It uses template literals or dom elements as components for each different view. Along with this repository there is also an example application [here](https://github.com/daleighan/vanilla-js-router-example-app) that may be useful in learning to use this .\n\n### Installation\n\nInstall with npm:\n`npm install @daleighan/vanilla-js-router`\n\n## Usage\n\n### Creating a router:\n\n```js\nimport VanillaJSRouter from 'vanilla-js-router';\n\nconst router = new VanillaJSRouter(anchorId, routes, options);\n```\n\n- anchorId is a string that is the id of the component that the router will attach to.\n\n- routes is an object in the following format:\n\n```js\nconst routes = {\n\t[url]: [component],\n\t[url]: [component],\n\t...\n};\n```\n\n- The url is a string that is the relative path of the url for a particular component and the route.\n- The component for a route can either be a string of HTML, a function that returns a string of html or a function that returns a DOM node.\n\noptions is also an object that looks like this:\n\n```js\nconst options = {\n  debug: [boolean],\n  errorHTML: [component],\n  header: [component],\n  footer: [component],\n};\n```\n\n- The debug option allows addition information about route changes to be logged in the console.\n\n- errorHTML accepts the same types of components mentioned above and is displayed if the requested url is not found in the routes object.\n- header accepts the same types of components and is placed above the content within the router\n- footer accepts the same types of components and is placed below the content within the router\n\n### Creating components:\n\nAs previously mentioned, there are three different ways that components can be provided. They are as follows:\n\nAs a string:\n\n```js\nconst Component = '<div>My Component</div>';\n```\n\nAs a function that returns a string or template literal:\n\n```js\nfunction Component() {\n  return '<div>My Component</div>';\n}\n```\n\nAs a function that returns a DOM element:\n\n```js\nfunction Component() {\n  const div = document.createElement('div');\n  div.textContent = 'My Component';\n  return div;\n}\n```\n\n### Path matching:\n\nCurrently, path matching is not very sophisticated, but it does allow for exact path matching and path matching with params. An of a routes object with these two kinds of paths:\n\n```js\nconst routes = {\n\t'/component': Component1,\n\t'/component/:id': Component2,\n\t'/component/:id/:action': Component3,\n\t...\n};\n```\n\nThe first route would have to be an exact match but the second one could be given any id and the third would has two params. If there is an exact match found for the route, it is prioritized over any route that includes params.\n\nFor a route with params, these params can be passed to the component if it is a function. The way to do that for a route that is given two params is as follows:\n\n```js\nfunction Component3({ params }) {\n  const div = document.createElement('div');\n  div.textContent = `id: ${params.id}, action: ${params.action}`;\n  return div;\n}\n```\n\n### Navigation:\n\nThere are two ways to navigate with the router.\n\nUsing JavaScript. This can be done with:\n\n```js\nwindow.router.goTo(route);\n```\n\nAdding an HTML anchor element with a class of 'router-link':\n\n```html\n<a class=\"router-link\" href=\"/component\">My Link</a>\n```\n\nAny HTML elements with that class name at the time a route is loaded will navigate using the router.\n\n## Credits:\n\nDeveloped primarily by [daleighan](https://github.com/daleighan) but always open to additional contributors.\n","readmeFilename":"README.md"}