Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rouder

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rouder - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

.npmignore

17

dist/rouder.js

@@ -83,5 +83,6 @@ var Rouder =

var Rouder = function () {
function Rouder(config) {
function Rouder(config, $window) {
_classCallCheck(this, Rouder);
this.window = $window || window;
this.config = {

@@ -96,3 +97,3 @@ useHashes: true,

if (config) Object.assign(this.config, config);
this.pushableState = !!(window.history && window.history.pushState);
this.pushableState = !!(this.window.history && this.window.history.pushState);
this.routes = {};

@@ -112,7 +113,7 @@ this.stateObject = {};

if (this.config.watchHashes) {
this.oldonhashchange = this.config.preserveonhashchange ? window.onhashchange || function () {} : function () {};
window.onhashchange = function () {
this.oldonhashchange = this.config.preserveonhashchange && typeof this.window.onhashchange === 'function' ? this.window.onhashchange : function () {};
this.window.onhashchange = function () {
_this.oldonhashchange();
var match;
if (window.location && window.location.hash) match = window.location.hash.match(_this.hashRegex);
if (_this.window.location && _this.window.location.hash) match = _this.window.location.hash.match(_this.hashRegex);
if (match && match[1]) _this.handle(match[1]);

@@ -141,8 +142,8 @@ };

if (this.lastPath !== path || force) {
window.history.pushState(this.stateObject, '', '' + this.config.rootLocation + path);
this.window.history.pushState(this.stateObject, '', '' + this.config.rootLocation + path);
this.handle(path);
}
} else if (this.config.useHashes) {
if (!this.config.watchHashes || force && window.location.hash === '#' + this.config.hashPrefix + path) this.handle(path);
window.location.hash = '#' + this.config.hashPrefix + path;
if (!this.config.watchHashes || force && this.window.location.hash === '#' + this.config.hashPrefix + path) this.handle(path);
this.window.location.hash = '#' + this.config.hashPrefix + path;
}

@@ -149,0 +150,0 @@ }

@@ -1,1 +0,1 @@

var Rouder=function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),a=n(1),s=function(){function t(e){r(this,t),this.config={useHashes:!0,usePaths:!0,watchHashes:!0,preserveonhashchange:!0,rootLocation:"/",hashPrefix:"/"},e&&Object.assign(this.config,e),this.pushableState=!(!window.history||!window.history.pushState),this.routes={},this.stateObject={},this.lastPath="",this.hashRegex=new RegExp("^#"+this.config.hashPrefix+"(.+)$"),this.listening=!1}return i(t,[{key:"start",value:function(t){var e=this;this.listening=!0,this.config.watchHashes&&(this.oldonhashchange=this.config.preserveonhashchange?window.onhashchange||function(){}:function(){},window.onhashchange=function(){e.oldonhashchange();var t;window.location&&window.location.hash&&(t=window.location.hash.match(e.hashRegex)),t&&t[1]&&e.handle(t[1])})}},{key:"pause",value:function(){this.listening=!1}},{key:"resume",value:function(){this.listening=!0}},{key:"goTo",value:function(t,e){this.listening&&(this.pushableState&&this.config.usePaths?(this.lastPath!==t||e)&&(window.history.pushState(this.stateObject,"",""+this.config.rootLocation+t),this.handle(t)):this.config.useHashes&&((!this.config.watchHashes||e&&window.location.hash==="#"+this.config.hashPrefix+t)&&this.handle(t),window.location.hash="#"+this.config.hashPrefix+t))}},{key:"use",value:function(t,e){var n=[],r=a(t,n);this.routes[t]={regex:r,keys:n,cb:e}}},{key:"remove",value:function(){for(var t="array"==typeof arguments[0]||"object"===o(arguments[0])?arguments[0]:arguments,e=0;e<t.length;e++)delete this.routes[t[e]]}},{key:"handle",value:function(t){if(this.listening){for(var e in this.routes){var n=this.routes[e],r=t.match(n.regex);if(r){r.shift();for(var o={},i=0;i<r.length;i++)o[n.keys[i].name]=r[i];n.cb(o);break}}this.lastPath=t}}}]),t}();t.exports=s},function(t,e,n){"use strict";function r(t,e){for(var n,r=[],o=0,i=0,h="",u=e&&e.delimiter||"/",c=e&&e.delimiters||"./",f=!1;null!==(n=y.exec(t));){var l=n[0],p=n[1],g=n.index;if(h+=t.slice(i,g),i=g+l.length,p)h+=p[1],f=!0;else{var v="",m=t[i],w=n[2],d=n[3],b=n[4],x=n[5];if(!f&&h.length){var E=h.length-1;c.indexOf(h[E])>-1&&(v=h[E],h=h.slice(0,E))}h&&(r.push(h),h="",f=!1);var S=""!==v&&void 0!==m&&m!==v,k="+"===x||"*"===x,P="?"===x||"*"===x,j=v||u,R=d||b;r.push({name:w||o++,prefix:v,delimiter:j,optional:P,repeat:k,partial:S,pattern:R?s(R):"[^"+a(j)+"]+?"})}}return(h||i<t.length)&&r.push(h+t.substr(i)),r}function o(t,e){return i(r(t,e))}function i(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"===g(t[n])&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,r){for(var o="",i=r&&r.encode||encodeURIComponent,a=0;a<t.length;a++){var s=t[a];if("string"!=typeof s){var h,u=n?n[s.name]:void 0;if(Array.isArray(u)){if(!s.repeat)throw new TypeError('Expected "'+s.name+'" to not repeat, but got array');if(0===u.length){if(s.optional)continue;throw new TypeError('Expected "'+s.name+'" to not be empty')}for(var c=0;c<u.length;c++){if(h=i(u[c]),!e[a].test(h))throw new TypeError('Expected all "'+s.name+'" to match "'+s.pattern+'"');o+=(0===c?s.prefix:s.delimiter)+h}}else if("string"!=typeof u&&"number"!=typeof u&&"boolean"!=typeof u){if(!s.optional)throw new TypeError('Expected "'+s.name+'" to be '+(s.repeat?"an array":"a string"));s.partial&&(o+=s.prefix)}else{if(h=i(String(u)),!e[a].test(h))throw new TypeError('Expected "'+s.name+'" to match "'+s.pattern+'", but got "'+h+'"');o+=s.prefix+h}}else o+=s}return o}}function a(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function s(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function h(t){return t&&t.sensitive?"":"i"}function u(t,e){if(!e)return t;var n=t.source.match(/\((?!\?)/g);if(n)for(var r=0;r<n.length;r++)e.push({name:r,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,pattern:null});return t}function c(t,e,n){for(var r=[],o=0;o<t.length;o++)r.push(p(t[o],e,n).source);return new RegExp("(?:"+r.join("|")+")",h(n))}function f(t,e,n){return l(r(t,n),e,n)}function l(t,e,n){n=n||{};for(var r=n.strict,o=!1!==n.end,i=a(n.delimiter||"/"),s=[].concat(n.endsWith||[]).map(a).concat("$").join("|"),u="",c=0;c<t.length;c++){var f=t[c];if("string"==typeof f)u+=a(f);else{var l=a(f.prefix),p="(?:"+f.pattern+")";e&&e.push(f),f.repeat&&(p+="(?:"+l+p+")*"),p=f.optional?f.partial?l+"("+p+")?":"(?:"+l+"("+p+"))?":l+"("+p+")",u+=p}}return r||(u+="(?:"+i+"(?="+s+"))?"),u+=o?"$"===s?s:"(?="+s+")":"(?="+i+"|"+s+")",new RegExp("^"+u,h(n))}function p(t,e,n){return t instanceof RegExp?u(t,e):Array.isArray(t)?c(t,e,n):f(t,e,n)}var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};t.exports=p,t.exports.parse=r,t.exports.compile=o,t.exports.tokensToFunction=i,t.exports.tokensToRegExp=l;var y=new RegExp(["(\\\\.)","(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?"].join("|"),"g")}]);
var Rouder=function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var n={};return e.m=t,e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=0)}([function(t,e,n){"use strict";function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),a=n(1),s=function(){function t(e,n){o(this,t),this.window=n||window,this.config={useHashes:!0,usePaths:!0,watchHashes:!0,preserveonhashchange:!0,rootLocation:"/",hashPrefix:"/"},e&&Object.assign(this.config,e),this.pushableState=!(!this.window.history||!this.window.history.pushState),this.routes={},this.stateObject={},this.lastPath="",this.hashRegex=new RegExp("^#"+this.config.hashPrefix+"(.+)$"),this.listening=!1}return i(t,[{key:"start",value:function(t){var e=this;this.listening=!0,this.config.watchHashes&&(this.oldonhashchange=this.config.preserveonhashchange&&"function"==typeof this.window.onhashchange?this.window.onhashchange:function(){},this.window.onhashchange=function(){e.oldonhashchange();var t;e.window.location&&e.window.location.hash&&(t=e.window.location.hash.match(e.hashRegex)),t&&t[1]&&e.handle(t[1])})}},{key:"pause",value:function(){this.listening=!1}},{key:"resume",value:function(){this.listening=!0}},{key:"goTo",value:function(t,e){this.listening&&(this.pushableState&&this.config.usePaths?(this.lastPath!==t||e)&&(this.window.history.pushState(this.stateObject,"",""+this.config.rootLocation+t),this.handle(t)):this.config.useHashes&&((!this.config.watchHashes||e&&this.window.location.hash==="#"+this.config.hashPrefix+t)&&this.handle(t),this.window.location.hash="#"+this.config.hashPrefix+t))}},{key:"use",value:function(t,e){var n=[],o=a(t,n);this.routes[t]={regex:o,keys:n,cb:e}}},{key:"remove",value:function(){for(var t="array"==typeof arguments[0]||"object"===r(arguments[0])?arguments[0]:arguments,e=0;e<t.length;e++)delete this.routes[t[e]]}},{key:"handle",value:function(t){if(this.listening){for(var e in this.routes){var n=this.routes[e],o=t.match(n.regex);if(o){o.shift();for(var r={},i=0;i<o.length;i++)r[n.keys[i].name]=o[i];n.cb(r);break}}this.lastPath=t}}}]),t}();t.exports=s},function(t,e,n){"use strict";function o(t,e){for(var n,o=[],r=0,i=0,h="",u=e&&e.delimiter||"/",c=e&&e.delimiters||"./",f=!1;null!==(n=y.exec(t));){var l=n[0],p=n[1],g=n.index;if(h+=t.slice(i,g),i=g+l.length,p)h+=p[1],f=!0;else{var w="",d=t[i],v=n[2],m=n[3],b=n[4],x=n[5];if(!f&&h.length){var E=h.length-1;c.indexOf(h[E])>-1&&(w=h[E],h=h.slice(0,E))}h&&(o.push(h),h="",f=!1);var S=""!==w&&void 0!==d&&d!==w,k="+"===x||"*"===x,P="?"===x||"*"===x,j=w||u,R=m||b;o.push({name:v||r++,prefix:w,delimiter:j,optional:P,repeat:k,partial:S,pattern:R?s(R):"[^"+a(j)+"]+?"})}}return(h||i<t.length)&&o.push(h+t.substr(i)),o}function r(t,e){return i(o(t,e))}function i(t){for(var e=new Array(t.length),n=0;n<t.length;n++)"object"===g(t[n])&&(e[n]=new RegExp("^(?:"+t[n].pattern+")$"));return function(n,o){for(var r="",i=o&&o.encode||encodeURIComponent,a=0;a<t.length;a++){var s=t[a];if("string"!=typeof s){var h,u=n?n[s.name]:void 0;if(Array.isArray(u)){if(!s.repeat)throw new TypeError('Expected "'+s.name+'" to not repeat, but got array');if(0===u.length){if(s.optional)continue;throw new TypeError('Expected "'+s.name+'" to not be empty')}for(var c=0;c<u.length;c++){if(h=i(u[c]),!e[a].test(h))throw new TypeError('Expected all "'+s.name+'" to match "'+s.pattern+'"');r+=(0===c?s.prefix:s.delimiter)+h}}else if("string"!=typeof u&&"number"!=typeof u&&"boolean"!=typeof u){if(!s.optional)throw new TypeError('Expected "'+s.name+'" to be '+(s.repeat?"an array":"a string"));s.partial&&(r+=s.prefix)}else{if(h=i(String(u)),!e[a].test(h))throw new TypeError('Expected "'+s.name+'" to match "'+s.pattern+'", but got "'+h+'"');r+=s.prefix+h}}else r+=s}return r}}function a(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function s(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function h(t){return t&&t.sensitive?"":"i"}function u(t,e){if(!e)return t;var n=t.source.match(/\((?!\?)/g);if(n)for(var o=0;o<n.length;o++)e.push({name:o,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,pattern:null});return t}function c(t,e,n){for(var o=[],r=0;r<t.length;r++)o.push(p(t[r],e,n).source);return new RegExp("(?:"+o.join("|")+")",h(n))}function f(t,e,n){return l(o(t,n),e,n)}function l(t,e,n){n=n||{};for(var o=n.strict,r=!1!==n.end,i=a(n.delimiter||"/"),s=[].concat(n.endsWith||[]).map(a).concat("$").join("|"),u="",c=0;c<t.length;c++){var f=t[c];if("string"==typeof f)u+=a(f);else{var l=a(f.prefix),p="(?:"+f.pattern+")";e&&e.push(f),f.repeat&&(p+="(?:"+l+p+")*"),p=f.optional?f.partial?l+"("+p+")?":"(?:"+l+"("+p+"))?":l+"("+p+")",u+=p}}return o||(u+="(?:"+i+"(?="+s+"))?"),u+=r?"$"===s?s:"(?="+s+")":"(?="+i+"|"+s+")",new RegExp("^"+u,h(n))}function p(t,e,n){return t instanceof RegExp?u(t,e):Array.isArray(t)?c(t,e,n):f(t,e,n)}var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};t.exports=p,t.exports.parse=o,t.exports.compile=r,t.exports.tokensToFunction=i,t.exports.tokensToRegExp=l;var y=new RegExp(["(\\\\.)","(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?"].join("|"),"g")}]);
{
"name": "rouder",
"version": "0.1.1",
"version": "0.1.2",
"description": "Simple client side SPA routing library.",
"main": "dist/rouder.min.js",
"main": "src/index.js",
"unpkg": "dist/rouder.min.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"test": "jasmine",
"prebuild": "npm run test",
"build": "webpack --env.prod",
"postbuild": "npm run build-dev",
"build-dev": "webpack --env.dev",
"watch": "webpack --watch --env.dev",
"watch-minify": "webpack --watch --env.prod"
"watch-minify": "webpack --watch --env.prod",
"preversion": "npm run build"
},

@@ -34,2 +38,3 @@ "repository": {

"babel-preset-es2015": "^6.24.1",
"jasmine": "^2.8.0",
"webpack": "^3.5.6"

@@ -36,0 +41,0 @@ },

# Rouder
Simple client-side SPA routing library.
Simple client-side routing library.
### Features
- The biggest convenience is that backwards compatibility with legacy browsers not supporting non-refreshing location changes is baked in. Write routes once, and rouder will listen appropriately. You can use the outlined methods below to go to a URL that won't refresh the page.
- Define Rouder instances to use either path-based or hash-based routes, or select automatically depending on browser compatibility.
- Backwards compatibility with legacy browsers not supporting non-refreshing location changes is baked in. Write routes once, and rouder will listen appropriately. You can use the outlined methods below to go to a URL that won't refresh the page.
- This library should work well to allow users to be able to share a link with expected results, and result in better crawlability of your site.
- Intended specifically for browser based environments as it relies on browser-exclusive APIs.
### Including
#### Rouder is available for direct use from the unpkg CDN at https://unpkg.com/rouder as either minified or not.
The builds in `dist/` will define `Rouder` as a global.
```html
<!-- Latest minified build (links to dist/rouder.min.js) -->
<script src="https://unpkg.com/rouder"></script>
<!-- Latest unminified build -->
<script src="https://unpkg.com/rouder/dist/rouder.js"></script>
```
#### Rouder can also be imported in a JavaScript file that will be prepared for the browser with a build tool such as webpack or browserify.
```js
var Rouder = require('rouder');
```
### Quick example
```js
var rouder = new Rouder();
var rouder = new Rouder(); // An optional config object could be passed here

@@ -24,3 +48,3 @@ var postsRoute = function(params) {

rouder.use('posts/:id', postsRoute);
rouder.use('posts/:id', postsRoute); // Define routes with .use()
rouder.use('users/:name', usersRoute);

@@ -54,2 +78,4 @@ rouder.use('home', function() {

- An alternative `window` object may be passed as the second argument to `new Rouder()`. This is used in the pre-build tests and may not have a real use application.
### Methods

@@ -80,27 +106,1 @@

Resumes listening for navigation.
## Planned for later
- `rouder.watchLinks(['attribute'][, 'data-flagname'])`
Causes rouder to begin watching HTML elements containing `data-flagname` (defaults to `data-rouder-watch`), and will change the URL in `attribute` (defaults to `href`) if needed for backwards compatibility in browsers not supporting non-refresh location changes without hashtags.
For example, if you had HTML like
```html
<a href="/posts/2" data-rouder-watch>
<a href="http://example.com/users/bob" data-rouder-watch>```
calling `rouder.watchLinks()` would cause rouder to determine browser compatibility for the user, and either leave these links as they are (a path-based URL), or prepend a hashtag to the path.
In a legacy browser, the links would be changed to `#/posts/2` and `http://example.com/#/users/bob`.
The links will be updated immediately upon `.watchLinks()` being called, and upon all page navigations (any hashchange or path change, whether it corresponds to a path defined with `rouder.use()` or not). You may also call `rouder.checkAllLinks()` at any time to manually refresh all watched links (such as when dynamic content that doesn't require a location change may contain links).
- `rouder.checkAllLinks()`
Causes rouder to change watched HTML links if necessary. See `.watchLinks()` above.
- `rouder.linkTo('path')`
Simply returns a link to `path` which will function in the current browser without refreshing the page (either a path-based URL, or a hashtag based URL). May be either a relative or absolute URL (will return the same type that was passed).
var pathToRegexp = require('path-to-regexp');
class Rouder {
constructor(config) {
constructor(config, $window) {
this.window = $window || window;
this.config = {

@@ -14,3 +15,3 @@ useHashes: true,

if (config) Object.assign(this.config, config);
this.pushableState = !!(window.history && window.history.pushState);
this.pushableState = !!(this.window.history && this.window.history.pushState);
this.routes = {};

@@ -26,7 +27,7 @@ this.stateObject = {};

if (this.config.watchHashes) {
this.oldonhashchange = this.config.preserveonhashchange ? (window.onhashchange || (() => {})) : (() => {});
window.onhashchange = () => {
this.oldonhashchange = this.config.preserveonhashchange && typeof this.window.onhashchange === 'function' ? this.window.onhashchange : (() => {});
this.window.onhashchange = () => {
this.oldonhashchange();
var match;
if (window.location && window.location.hash) match = window.location.hash.match(this.hashRegex);
if (this.window.location && this.window.location.hash) match = this.window.location.hash.match(this.hashRegex);
if (match && match[1]) this.handle(match[1]);

@@ -52,9 +53,9 @@ }

if (this.lastPath !== path || force) {
window.history.pushState(this.stateObject, '', `${this.config.rootLocation}${path}`);
this.window.history.pushState(this.stateObject, '', `${this.config.rootLocation}${path}`);
this.handle(path);
}
} else if (this.config.useHashes) {
if (!this.config.watchHashes || force && window.location.hash === `#${this.config.hashPrefix}${path}`)
if (!this.config.watchHashes || force && this.window.location.hash === `#${this.config.hashPrefix}${path}`)
this.handle(path);
window.location.hash = `#${this.config.hashPrefix}${path}`;
this.window.location.hash = `#${this.config.hashPrefix}${path}`;
}

@@ -61,0 +62,0 @@ }

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc