Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
preact-router
Advanced tools
preact-router - npm Package Compare versions
Comparing version 2.5.0 to 2.5.1
@@ -5,2 +5,10 @@ import { Component, cloneElement, h } from 'preact'; | ||
| function assign(obj, props) { | ||
| // eslint-disable-next-line guard-for-in | ||
| for (var i in props) { | ||
| obj[i] = props[i]; | ||
| } | ||
| return obj; | ||
| } | ||
| function exec(url, route, opts) { | ||
@@ -167,5 +175,6 @@ if ( opts === void 0 ) opts=EMPTY$1; | ||
| function handleLinkClick(e) { | ||
| if (e.button !== 0) { return; } | ||
| routeFromLink(e.currentTarget || e.target || this); | ||
| return prevent(e); | ||
| if (e.button==0) { | ||
| routeFromLink(e.currentTarget || e.target || this); | ||
| return prevent(e); | ||
| } | ||
| } | ||
@@ -226,3 +235,3 @@ | ||
| this.state = { | ||
| url: this.props.url || getCurrentUrl() | ||
| url: props.url || getCurrentUrl() | ||
| }; | ||
@@ -296,8 +305,3 @@ | ||
| var newProps = { url: url, matches: matches }; | ||
| // copy matches onto props | ||
| for (var i in matches) { | ||
| if (matches.hasOwnProperty(i)) { | ||
| newProps[i] = matches[i]; | ||
| } | ||
| } | ||
| assign(newProps, matches); | ||
| return cloneElement(vnode, newProps); | ||
@@ -342,3 +346,3 @@ } | ||
| var Link = function (props) { return ( | ||
| h('a', Object.assign({}, props, { onClick: handleLinkClick })) | ||
| h('a', assign({ onClick: handleLinkClick }, props)) | ||
| ); }; | ||
@@ -345,0 +349,0 @@ |
@@ -1,2 +0,2 @@ | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("preact")):"function"==typeof define&&define.amd?define(["preact"],e):t.preactRouter=e(t.preact)}(this,function(t){function e(t,e,n){void 0===n&&(n=y);var o,i=/(?:\?([^#]*))?(#.*)?$/,u=t.match(i),a={};if(u&&u[1])for(var p=u[1].split("&"),c=0;c<p.length;c++){var f=p[c].split("=");a[decodeURIComponent(f[0])]=decodeURIComponent(f.slice(1).join("="))}t=r(t.replace(i,"")),e=r(e||"");for(var s=Math.max(t.length,e.length),l=0;l<s;l++)if(e[l]&&":"===e[l].charAt(0)){var h=e[l].replace(/(^\:|[+*?]+$)/g,""),d=(e[l].match(/[+*?]+$/)||y)[0]||"",g=~d.indexOf("+"),m=~d.indexOf("*"),v=t[l]||"";if(!v&&!m&&(d.indexOf("?")<0||g)){o=!1;break}if(a[h]=decodeURIComponent(v),g||m){a[h]=t.slice(l).map(decodeURIComponent).join("/");break}}else if(e[l]!==t[l]){o=!1;break}return(!0===n.default||!1!==o)&&a}function n(t,e){var n=t.attributes||y,r=e.attributes||y;return n.default?1:r.default?-1:o(n.path)-o(r.path)||n.path.length-r.path.length}function r(t){return i(t).split("/")}function o(t){return(i(t).match(/\/+/g)||"").length}function i(t){return t.replace(/(^\/+|\/+$)/g,"")}function u(t){return null!=t.__preactattr_||"undefined"!=typeof Symbol&&null!=t[Symbol.for("preactattr")]}function a(t,e){void 0===e&&(e="push"),v&&v[e]?v[e](t):"undefined"!=typeof history&&history[e+"State"]&&history[e+"State"](null,null,t)}function p(){var t;return t=v&&v.location?v.location:v&&v.getCurrentLocation?v.getCurrentLocation():"undefined"!=typeof location?location:R,""+(t.pathname||"")+(t.search||"")}function c(t,e){return void 0===e&&(e=!1),"string"!=typeof t&&t.url&&(e=t.replace,t=t.url),f(t)&&a(t,e?"replace":"push"),s(t)}function f(t){for(var e=b.length;e--;)if(b[e].canRoute(t))return!0;return!1}function s(t){for(var e=!1,n=0;n<b.length;n++)!0===b[n].routeTo(t)&&(e=!0);for(var r=C.length;r--;)C[r](t);return e}function l(t){if(t&&t.getAttribute){var e=t.getAttribute("href"),n=t.getAttribute("target");if(e&&e.match(/^\//g)&&(!n||n.match(/^_?self$/i)))return c(e)}}function h(t){if(0===t.button)return l(t.currentTarget||t.target||this),d(t)}function d(t){return t&&(t.stopImmediatePropagation&&t.stopImmediatePropagation(),t.stopPropagation&&t.stopPropagation(),t.preventDefault()),!1}function g(t){if(!(t.ctrlKey||t.metaKey||t.altKey||t.shiftKey||0!==t.button)){var e=t.target;do{if("A"===(e.nodeName+"").toUpperCase()&&e.getAttribute("href")&&u(e)){if(e.hasAttribute("native"))return;if(l(e))return d(t)}}while(e=e.parentNode)}}function m(){U||("function"==typeof addEventListener&&(v||addEventListener("popstate",function(){return s(p())}),addEventListener("click",g)),U=!0)}var y={},v=null,b=[],C=[],R={},U=!1,_=function(r){function o(t){r.call(this,t),t.history&&(v=t.history),this.state={url:this.props.url||p()},m()}return r&&(o.__proto__=r),o.prototype=Object.create(r&&r.prototype),o.prototype.constructor=o,o.prototype.shouldComponentUpdate=function(t){return!0!==t.static||(t.url!==this.props.url||t.onChange!==this.props.onChange)},o.prototype.canRoute=function(t){return this.getMatchingChildren(this.props.children,t,!1).length>0},o.prototype.routeTo=function(t){return this._didRoute=!1,this.setState({url:t}),this.updating?this.canRoute(t):(this.forceUpdate(),this._didRoute)},o.prototype.componentWillMount=function(){b.push(this),this.updating=!0},o.prototype.componentDidMount=function(){var t=this;v&&(this.unlisten=v.listen(function(e){t.routeTo(""+(e.pathname||"")+(e.search||""))})),this.updating=!1},o.prototype.componentWillUnmount=function(){"function"==typeof this.unlisten&&this.unlisten(),b.splice(b.indexOf(this),1)},o.prototype.componentWillUpdate=function(){this.updating=!0},o.prototype.componentDidUpdate=function(){this.updating=!1},o.prototype.getMatchingChildren=function(r,o,i){return r.slice().sort(n).map(function(n){var r=n.attributes||{},u=r.path,a=e(o,u,r);if(a){if(!1!==i){var p={url:o,matches:a};for(var c in a)a.hasOwnProperty(c)&&(p[c]=a[c]);return t.cloneElement(n,p)}return n}return!1}).filter(Boolean)},o.prototype.render=function(t,e){var n=t.children,r=t.onChange,o=e.url,i=this.getMatchingChildren(n,o,!0),u=i[0]||null;this._didRoute=!!u;var a=this.previousUrl;return o!==a&&(this.previousUrl=o,"function"==typeof r&&r({router:this,url:o,previous:a,active:i,current:u})),u},o}(t.Component),x=function(e){return t.h("a",Object.assign({},e,{onClick:h}))},A=function(e){return t.h(e.component,e)};return _.subscribers=C,_.getCurrentUrl=p,_.route=c,_.Router=_,_.Route=A,_.Link=x,_}); | ||
| !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("preact")):"function"==typeof define&&define.amd?define(["preact"],e):t.preactRouter=e(t.preact)}(this,function(t){function e(t,e){for(var n in e)t[n]=e[n];return t}function n(t,e,n){void 0===n&&(n=v);var r,i=/(?:\?([^#]*))?(#.*)?$/,u=t.match(i),a={};if(u&&u[1])for(var p=u[1].split("&"),c=0;c<p.length;c++){var f=p[c].split("=");a[decodeURIComponent(f[0])]=decodeURIComponent(f.slice(1).join("="))}t=o(t.replace(i,"")),e=o(e||"");for(var l=Math.max(t.length,e.length),s=0;s<l;s++)if(e[s]&&":"===e[s].charAt(0)){var h=e[s].replace(/(^\:|[+*?]+$)/g,""),d=(e[s].match(/[+*?]+$/)||v)[0]||"",g=~d.indexOf("+"),m=~d.indexOf("*"),y=t[s]||"";if(!y&&!m&&(d.indexOf("?")<0||g)){r=!1;break}if(a[h]=decodeURIComponent(y),g||m){a[h]=t.slice(s).map(decodeURIComponent).join("/");break}}else if(e[s]!==t[s]){r=!1;break}return(!0===n.default||!1!==r)&&a}function r(t,e){var n=t.attributes||v,r=e.attributes||v;return n.default?1:r.default?-1:i(n.path)-i(r.path)||n.path.length-r.path.length}function o(t){return u(t).split("/")}function i(t){return(u(t).match(/\/+/g)||"").length}function u(t){return t.replace(/(^\/+|\/+$)/g,"")}function a(t){return null!=t.__preactattr_||"undefined"!=typeof Symbol&&null!=t[Symbol.for("preactattr")]}function p(t,e){void 0===e&&(e="push"),b&&b[e]?b[e](t):"undefined"!=typeof history&&history[e+"State"]&&history[e+"State"](null,null,t)}function c(){var t;return t=b&&b.location?b.location:b&&b.getCurrentLocation?b.getCurrentLocation():"undefined"!=typeof location?location:U,""+(t.pathname||"")+(t.search||"")}function f(t,e){return void 0===e&&(e=!1),"string"!=typeof t&&t.url&&(e=t.replace,t=t.url),l(t)&&p(t,e?"replace":"push"),s(t)}function l(t){for(var e=C.length;e--;)if(C[e].canRoute(t))return!0;return!1}function s(t){for(var e=!1,n=0;n<C.length;n++)!0===C[n].routeTo(t)&&(e=!0);for(var r=R.length;r--;)R[r](t);return e}function h(t){if(t&&t.getAttribute){var e=t.getAttribute("href"),n=t.getAttribute("target");if(e&&e.match(/^\//g)&&(!n||n.match(/^_?self$/i)))return f(e)}}function d(t){if(0==t.button)return h(t.currentTarget||t.target||this),g(t)}function g(t){return t&&(t.stopImmediatePropagation&&t.stopImmediatePropagation(),t.stopPropagation&&t.stopPropagation(),t.preventDefault()),!1}function m(t){if(!(t.ctrlKey||t.metaKey||t.altKey||t.shiftKey||0!==t.button)){var e=t.target;do{if("A"===(e.nodeName+"").toUpperCase()&&e.getAttribute("href")&&a(e)){if(e.hasAttribute("native"))return;if(h(e))return g(t)}}while(e=e.parentNode)}}function y(){_||("function"==typeof addEventListener&&(b||addEventListener("popstate",function(){return s(c())}),addEventListener("click",m)),_=!0)}var v={},b=null,C=[],R=[],U={},_=!1,x=function(o){function i(t){o.call(this,t),t.history&&(b=t.history),this.state={url:t.url||c()},y()}return o&&(i.__proto__=o),i.prototype=Object.create(o&&o.prototype),i.prototype.constructor=i,i.prototype.shouldComponentUpdate=function(t){return!0!==t.static||(t.url!==this.props.url||t.onChange!==this.props.onChange)},i.prototype.canRoute=function(t){return this.getMatchingChildren(this.props.children,t,!1).length>0},i.prototype.routeTo=function(t){return this._didRoute=!1,this.setState({url:t}),this.updating?this.canRoute(t):(this.forceUpdate(),this._didRoute)},i.prototype.componentWillMount=function(){C.push(this),this.updating=!0},i.prototype.componentDidMount=function(){var t=this;b&&(this.unlisten=b.listen(function(e){t.routeTo(""+(e.pathname||"")+(e.search||""))})),this.updating=!1},i.prototype.componentWillUnmount=function(){"function"==typeof this.unlisten&&this.unlisten(),C.splice(C.indexOf(this),1)},i.prototype.componentWillUpdate=function(){this.updating=!0},i.prototype.componentDidUpdate=function(){this.updating=!1},i.prototype.getMatchingChildren=function(o,i,u){return o.slice().sort(r).map(function(r){var o=r.attributes||{},a=o.path,p=n(i,a,o);if(p){if(!1!==u){var c={url:i,matches:p};return e(c,p),t.cloneElement(r,c)}return r}return!1}).filter(Boolean)},i.prototype.render=function(t,e){var n=t.children,r=t.onChange,o=e.url,i=this.getMatchingChildren(n,o,!0),u=i[0]||null;this._didRoute=!!u;var a=this.previousUrl;return o!==a&&(this.previousUrl=o,"function"==typeof r&&r({router:this,url:o,previous:a,active:i,current:u})),u},i}(t.Component),A=function(n){return t.h("a",e({onClick:d},n))},k=function(e){return t.h(e.component,e)};return x.subscribers=R,x.getCurrentUrl=c,x.route=f,x.Router=x,x.Route=k,x.Link=A,x}); | ||
| //# sourceMappingURL=preact-router.js.map |
| { | ||
| "name": "preact-router", | ||
| "amdName": "preactRouter", | ||
| "version": "2.5.0", | ||
| "version": "2.5.1", | ||
| "description": "Connect your components up to that address bar.", | ||
@@ -6,0 +6,0 @@ "main": "dist/preact-router.js", |
@@ -76,2 +76,61 @@ # preact-router | ||
| ### Active Matching & Links | ||
| `preact-router` includes an add-on module called `match` that lets you wire your components up to Router changes. | ||
| Here's a demo of `<Match>`, which invokes the function you pass it (as its only child) in response to any routing: | ||
| ```js | ||
| import Router from 'preact-router'; | ||
| import Match from 'preact-router/match'; | ||
| render( | ||
| <div> | ||
| <Match path="/"> | ||
| { ({ matches, path, url }) => ( | ||
| <pre>{url}</pre> | ||
| ) } | ||
| </Match> | ||
| <Router> | ||
| <div default>demo fallback route</div> | ||
| </Router> | ||
| </div> | ||
| ) | ||
| // another example: render only if at a given URL: | ||
| render( | ||
| <div> | ||
| <Match path="/"> | ||
| { ({ matches }) => matches && ( | ||
| <h1>You are Home!</h1> | ||
| ) } | ||
| </Match> | ||
| <Router /> | ||
| </div> | ||
| ) | ||
| ``` | ||
| `<Link>` is just a normal link, but it automatically adds and removes an "active" classname to itself based on whether it matches the current URL. | ||
| ```js | ||
| import { Router } from 'preact-router'; | ||
| import { Link } from 'preact-router/match'; | ||
| render( | ||
| <div> | ||
| <nav> | ||
| <Link activeClassName="active" href="/">Home</Link> | ||
| <Link activeClassName="active" href="/foo">Foo</Link> | ||
| <Link activeClassName="active" href="/bar">Bar</Link> | ||
| </nav> | ||
| <Router> | ||
| <div default> | ||
| this is a demo route that always matches | ||
| </div> | ||
| </Router> | ||
| </div> | ||
| ) | ||
| ``` | ||
| --- | ||
@@ -78,0 +137,0 @@ |
| import { cloneElement, h, Component } from 'preact'; | ||
| import { exec, pathRankSort } from './util'; | ||
| import { exec, pathRankSort, assign } from './util'; | ||
@@ -97,5 +97,6 @@ let customHistory = null; | ||
| function handleLinkClick(e) { | ||
| if (e.button !== 0) return; | ||
| routeFromLink(e.currentTarget || e.target || this); | ||
| return prevent(e); | ||
| if (e.button==0) { | ||
| routeFromLink(e.currentTarget || e.target || this); | ||
| return prevent(e); | ||
| } | ||
| } | ||
@@ -156,3 +157,3 @@ | ||
| this.state = { | ||
| url: this.props.url || getCurrentUrl() | ||
| url: props.url || getCurrentUrl() | ||
| }; | ||
@@ -220,8 +221,3 @@ | ||
| let newProps = { url, matches }; | ||
| // copy matches onto props | ||
| for (let i in matches) { | ||
| if (matches.hasOwnProperty(i)) { | ||
| newProps[i] = matches[i]; | ||
| } | ||
| } | ||
| assign(newProps, matches); | ||
| return cloneElement(vnode, newProps); | ||
@@ -260,3 +256,3 @@ } | ||
| const Link = (props) => ( | ||
| h('a', Object.assign({}, props, { onClick: handleLinkClick })) | ||
| h('a', assign({ onClick: handleLinkClick }, props)) | ||
| ); | ||
@@ -263,0 +259,0 @@ |
| import { h, Component } from 'preact'; | ||
| import { subscribers, getCurrentUrl } from 'preact-router'; | ||
| import { subscribers, getCurrentUrl, Link as StaticLink } from 'preact-router'; | ||
@@ -30,3 +30,3 @@ export class Match extends Component { | ||
| { ({ matches }) => ( | ||
| <a {...props} class={[props.class || props.className, matches && activeClassName].filter(Boolean).join(' ')} /> | ||
| <StaticLink {...props} class={[props.class || props.className, matches && activeClassName].filter(Boolean).join(' ')} /> | ||
| ) } | ||
@@ -33,0 +33,0 @@ </Match> |
| const EMPTY = {}; | ||
| export function assign(obj, props) { | ||
| // eslint-disable-next-line guard-for-in | ||
| for (let i in props) { | ||
| obj[i] = props[i]; | ||
| } | ||
| return obj; | ||
| } | ||
| export function exec(url, route, opts=EMPTY) { | ||
@@ -5,0 +13,0 @@ let reg = /(?:\?([^#]*))?(#.*)?$/, |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.38%
32476
- Lines of code
- increased by0.89%
680
- Number of lines in readme file
- increased by68.6%
145
No dependency changes