preact-router - npm Package Compare versions

Comparing version 2.6.1 to 3.0.0

dist/preact-router.es.js

@@ -1,2 +0,2 @@
-import { Component, cloneElement, h } from 'preact';
+import { Component, cloneElement, createElement, toChildArray } from 'preact';
 
@@ -66,3 +66,3 @@ var EMPTY$1 = {};
 	vnode.rank = rankChild(vnode);
-	return vnode.attributes;
+	return vnode.props;
 }
@@ -83,3 +83,3 @@
 function rankChild(vnode) {
-	return vnode.attributes.default ? 0 : rank(vnode.attributes.path);
+	return vnode.props.default ? 0 : rank(vnode.props.path);
 }
@@ -95,6 +95,2 @@
 
-function isPreactElement(node) {
-	return node.__preactattr_!=null || typeof Symbol!=='undefined' && node[Symbol.for('preactattr')]!=null;
-}
-
 function setUrl(url, type) {
@@ -208,3 +204,3 @@ if ( type === void 0 ) type='push';
 	do {
-		if (String(t.nodeName).toUpperCase()==='A' && t.getAttribute('href') && isPreactElement(t)) {
+		if (String(t.nodeName).toUpperCase()==='A' && t.getAttribute('href')) {
 			if (t.hasAttribute('native')) { return; }
@@ -262,3 +258,4 @@ // if link is handled by the router, prevent browser defaults
 	Router.prototype.canRoute = function canRoute (url) {
-		return this.getMatchingChildren(this.props.children, url, false).length > 0;
+		var children = toChildArray(this.props.children);
+		return this.getMatchingChildren(children, url, false).length > 0;
 	};
@@ -312,3 +309,3 @@
 			.map( function (vnode) {
-				var matches = exec(url, vnode.attributes.path, vnode.attributes);
+				var matches = exec(url, vnode.props.path, vnode.props);
 				if (matches) {
@@ -332,3 +329,3 @@ if (invoke !== false) {
 
-		var active = this.getMatchingChildren(children, url, true);
+		var active = this.getMatchingChildren(toChildArray(children), url, true);
 
@@ -359,6 +356,6 @@ var current = active[0] || null;
 var Link = function (props) { return (
-	h('a', assign({ onClick: handleLinkClick }, props))
+	createElement('a', assign({ onClick: handleLinkClick }, props))
 ); };
 
-var Route = function (props) { return h(props.component, props); };
+var Route = function (props) { return createElement(props.component, props); };
 
@@ -365,0 +362,0 @@ Router.subscribers = subscribers;

dist/preact-router.js

@@ -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){for(var n in e)t[n]=e[n];return t}function n(t,e,n){var r,o=/(?:\?([^#]*))?(#.*)?$/,u=t.match(o),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=i(t.replace(o,"")),e=i(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(/[+*?]+$/)||C)[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){return t.rank<e.rank?1:t.rank>e.rank?-1:t.index-e.index}function o(t,e){return t.index=e,t.rank=p(t),t.attributes}function i(t){return t.replace(/(^\/+|\/+$)/g,"").split("/")}function u(t){return":"==t.charAt(0)?1+"*+?".indexOf(t.charAt(t.length-1))||4:5}function a(t){return i(t).map(u).join("")}function p(t){return t.attributes.default?0:a(t.attributes.path)}function c(t){return null!=t.__preactattr_||"undefined"!=typeof Symbol&&null!=t[Symbol.for("preactattr")]}function f(t,e){void 0===e&&(e="push"),R&&R[e]?R[e](t):"undefined"!=typeof history&&history[e+"State"]&&history[e+"State"](null,null,t)}function l(){var t;return t=R&&R.location?R.location:R&&R.getCurrentLocation?R.getCurrentLocation():"undefined"!=typeof location?location:x,""+(t.pathname||"")+(t.search||"")}function s(t,e){return void 0===e&&(e=!1),"string"!=typeof t&&t.url&&(e=t.replace,t=t.url),h(t)&&f(t,e?"replace":"push"),d(t)}function h(t){for(var e=U.length;e--;)if(U[e].canRoute(t))return!0;return!1}function d(t){for(var e=!1,n=0;n<U.length;n++)!0===U[n].routeTo(t)&&(e=!0);for(var r=k.length;r--;)k[r](t);return e}function g(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 s(e)}}function m(t){if(0==t.button)return g(t.currentTarget||t.target||this),y(t)}function y(t){return t&&(t.stopImmediatePropagation&&t.stopImmediatePropagation(),t.stopPropagation&&t.stopPropagation(),t.preventDefault()),!1}function v(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")&&c(e)){if(e.hasAttribute("native"))return;if(g(e))return y(t)}}while(e=e.parentNode)}}function b(){_||("function"==typeof addEventListener&&(R||addEventListener("popstate",function(){d(l())}),addEventListener("click",v)),_=!0)}var C={},R=null,U=[],k=[],x={},_=!1,A=function(i){function u(t){i.call(this,t),t.history&&(R=t.history),this.state={url:t.url||l()},b()}return i&&(u.__proto__=i),u.prototype=Object.create(i&&i.prototype),u.prototype.constructor=u,u.prototype.shouldComponentUpdate=function(t){return!0!==t.static||(t.url!==this.props.url||t.onChange!==this.props.onChange)},u.prototype.canRoute=function(t){return this.getMatchingChildren(this.props.children,t,!1).length>0},u.prototype.routeTo=function(t){return this._didRoute=!1,this.setState({url:t}),this.updating?this.canRoute(t):(this.forceUpdate(),this._didRoute)},u.prototype.componentWillMount=function(){U.push(this),this.updating=!0},u.prototype.componentDidMount=function(){var t=this;R&&(this.unlisten=R.listen(function(e){t.routeTo(""+(e.pathname||"")+(e.search||""))})),this.updating=!1},u.prototype.componentWillUnmount=function(){"function"==typeof this.unlisten&&this.unlisten(),U.splice(U.indexOf(this),1)},u.prototype.componentWillUpdate=function(){this.updating=!0},u.prototype.componentDidUpdate=function(){this.updating=!1},u.prototype.getMatchingChildren=function(i,u,a){return i.filter(o).sort(r).map(function(r){var o=n(u,r.attributes.path,r.attributes);if(o){if(!1!==a){var i={url:u,matches:o};return e(i,o),delete i.ref,delete i.key,t.cloneElement(r,i)}return r}}).filter(Boolean)},u.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},u}(t.Component),I=function(n){return t.h("a",e({onClick:m},n))},L=function(e){return t.h(e.component,e)};return A.subscribers=k,A.getCurrentUrl=l,A.route=s,A.Router=A,A.Route=L,A.Link=I,A});
+!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){var r,o=/(?:\?([^#]*))?(#.*)?$/,u=t.match(o),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=i(t.replace(o,"")),e=i(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(/[+*?]+$/)||C)[0]||"",g=~d.indexOf("+"),m=~d.indexOf("*"),y=t[l]||"";if(!y&&!m&&(d.indexOf("?")<0||g)){r=!1;break}if(a[h]=decodeURIComponent(y),g||m){a[h]=t.slice(l).map(decodeURIComponent).join("/");break}}else if(e[l]!==t[l]){r=!1;break}return(!0===n.default||!1!==r)&&a}function r(t,e){return t.rank<e.rank?1:t.rank>e.rank?-1:t.index-e.index}function o(t,e){return t.index=e,t.rank=p(t),t.props}function i(t){return t.replace(/(^\/+|\/+$)/g,"").split("/")}function u(t){return":"==t.charAt(0)?1+"*+?".indexOf(t.charAt(t.length-1))||4:5}function a(t){return i(t).map(u).join("")}function p(t){return t.props.default?0:a(t.props.path)}function c(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 f(){var t;return t=b&&b.location?b.location:b&&b.getCurrentLocation?b.getCurrentLocation():"undefined"!=typeof location?location:k,""+(t.pathname||"")+(t.search||"")}function s(t,e){return void 0===e&&(e=!1),"string"!=typeof t&&t.url&&(e=t.replace,t=t.url),l(t)&&c(t,e?"replace":"push"),h(t)}function l(t){for(var e=R.length;e--;)if(R[e].canRoute(t))return!0;return!1}function h(t){for(var e=!1,n=0;n<R.length;n++)!0===R[n].routeTo(t)&&(e=!0);for(var r=U.length;r--;)U[r](t);return e}function d(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 s(e)}}function g(t){if(0==t.button)return d(t.currentTarget||t.target||this),m(t)}function m(t){return t&&(t.stopImmediatePropagation&&t.stopImmediatePropagation(),t.stopPropagation&&t.stopPropagation(),t.preventDefault()),!1}function y(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")){if(e.hasAttribute("native"))return;if(d(e))return m(t)}}while(e=e.parentNode)}}function v(){x||("function"==typeof addEventListener&&(b||addEventListener("popstate",function(){h(f())}),addEventListener("click",y)),x=!0)}var C={},b=null,R=[],U=[],k={},x=!1,A=function(i){function u(t){i.call(this,t),t.history&&(b=t.history),this.state={url:t.url||f()},v()}return i&&(u.__proto__=i),u.prototype=Object.create(i&&i.prototype),u.prototype.constructor=u,u.prototype.shouldComponentUpdate=function(t){return!0!==t.static||(t.url!==this.props.url||t.onChange!==this.props.onChange)},u.prototype.canRoute=function(e){return this.getMatchingChildren(t.toChildArray(this.props.children),e,!1).length>0},u.prototype.routeTo=function(t){return this._didRoute=!1,this.setState({url:t}),this.updating?this.canRoute(t):(this.forceUpdate(),this._didRoute)},u.prototype.componentWillMount=function(){R.push(this),this.updating=!0},u.prototype.componentDidMount=function(){var t=this;b&&(this.unlisten=b.listen(function(e){t.routeTo(""+(e.pathname||"")+(e.search||""))})),this.updating=!1},u.prototype.componentWillUnmount=function(){"function"==typeof this.unlisten&&this.unlisten(),R.splice(R.indexOf(this),1)},u.prototype.componentWillUpdate=function(){this.updating=!0},u.prototype.componentDidUpdate=function(){this.updating=!1},u.prototype.getMatchingChildren=function(i,u,a){return i.filter(o).sort(r).map(function(r){var o=n(u,r.props.path,r.props);if(o){if(!1!==a){var i={url:u,matches:o};return e(i,o),delete i.ref,delete i.key,t.cloneElement(r,i)}return r}}).filter(Boolean)},u.prototype.render=function(e,n){var r=e.children,o=e.onChange,i=n.url,u=this.getMatchingChildren(t.toChildArray(r),i,!0),a=u[0]||null;this._didRoute=!!a;var p=this.previousUrl;return i!==p&&(this.previousUrl=i,"function"==typeof o&&o({router:this,url:i,previous:p,active:u,current:a})),a},u}(t.Component),_=function(n){return t.createElement("a",e({onClick:g},n))},E=function(e){return t.createElement(e.component,e)};return A.subscribers=U,A.getCurrentUrl=f,A.route=s,A.Router=A,A.Route=E,A.Link=_,A});
 //# sourceMappingURL=preact-router.js.map

match.js

@@ -52,3 +52,3 @@ 'use strict';
 		this.nextUrl = null;
-		return props.children[0] && props.children[0]({
+		return props.children({
 			url: url,
@@ -55,0 +55,0 @@ path: path,

package.json

 {
   "name": "preact-router",
   "amdName": "preactRouter",
-  "version": "2.6.1",
+  "version": "3.0.0",
   "description": "Connect your components up to that address bar.",
@@ -47,3 +47,3 @@ "main": "dist/preact-router.js",
   "peerDependencies": {
-    "preact": "*"
+    "preact": ">=10 || ^10.0.0-alpha.0"
   },
@@ -79,3 +79,3 @@ "devDependencies": {
     "phantomjs-prebuilt": "^2.1.7",
-    "preact": "^8.0.1",
+    "preact": "^10.0.0-alpha.0",
     "pretty-bytes-cli": "^1.0.0",
@@ -82,0 +82,0 @@ "rimraf": "^2.5.1",

README.md

 # preact-router
 
-[![NPM](http://img.shields.io/npm/v/preact-router.svg)](https://www.npmjs.com/package/preact-router)
+[![NPM](https://img.shields.io/npm/v/preact-router.svg)](https://www.npmjs.com/package/preact-router)
 [![travis-ci](https://travis-ci.org/developit/preact-router.svg)](https://travis-ci.org/developit/preact-router)
@@ -12,5 +12,5 @@
 >
-> If you're looking for more complex solutions like nested routes and view composition, [react-router](https://github.com/ReactTraining/react-router) works great with preact as long as you alias in [preact-compat](https://github.com/developit/preact-compat).  React Router 4 even [works directly with Preact](http://codepen.io/developit/pen/BWxepY?editors=0010), no compatibility layer needed!
+> If you're looking for more complex solutions like nested routes and view composition, [react-router](https://github.com/ReactTraining/react-router) works great with preact as long as you alias in [preact-compat](https://github.com/developit/preact-compat).  React Router 4 even [works directly with Preact](https://codepen.io/developit/pen/BWxepY?editors=0010), no compatibility layer needed!
 
-#### [See a Real-world Example :arrow_right:](http://jsfiddle.net/developit/qc73v9va/)
+#### [See a Real-world Example :arrow_right:](https://jsfiddle.net/developit/qc73v9va/)
 
@@ -158,3 +158,3 @@
 
-```
+```js
 import { render, Component } from 'preact';
@@ -168,18 +168,18 @@ import { Router, route } from 'preact-router';
 
-  async handleRoute = e => {
-    switch(e.path) {
+  handleRoute = async e => {
+    switch (e.url) {
       case '/profile':
-        const isAuthed == await this.isAuthenticated();
-	if(!isAuthed) route('/', true);
-      	break;
+        const isAuthed = await this.isAuthenticated();
+        if (!isAuthed) route('/', true);
+        break;
     }
-  }
+  };
 
   render() {
     return (
-      <Router onChange={this.handleRoute.bind(this)}>
+      <Router onChange={this.handleRoute}>
         <Home path="/" />
         <Profile path="/profile" />
       </Router>
-    );  
+    );
   }
@@ -239,3 +239,14 @@
 
+### Programmatically Triggering Route
 
+Its possible to programmatically trigger a route to a page (like `window.location = '/page-2'`)
+
+```js
+import { route } from 'preact-router';
+
+route('/page-2')  // appends a history entry
+
+route('/page-3', true)  // replaces the current history entry
+```
+
 ### License
@@ -247,2 +258,2 @@
 [Preact]: https://github.com/developit/preact
-[MIT]: http://choosealicense.com/licenses/mit/
+[MIT]: https://choosealicense.com/licenses/mit/

src/index.js

@@ -1,2 +0,2 @@
-import { cloneElement, h, Component } from 'preact';
+import { cloneElement, createElement, Component, toChildArray } from 'preact';
 import { exec, prepareVNodeForRanking, assign, pathRankSort } from './util';
@@ -12,6 +12,2 @@
 
-function isPreactElement(node) {
-	return node.__preactattr_!=null || typeof Symbol!=='undefined' && node[Symbol.for('preactattr')]!=null;
-}
-
 function setUrl(url, type='push') {
@@ -121,3 +117,3 @@ if (customHistory && customHistory[type]) {
 	do {
-		if (String(t.nodeName).toUpperCase()==='A' && t.getAttribute('href') && isPreactElement(t)) {
+		if (String(t.nodeName).toUpperCase()==='A' && t.getAttribute('href')) {
 			if (t.hasAttribute('native')) return;
@@ -171,3 +167,4 @@ // if link is handled by the router, prevent browser defaults
 	canRoute(url) {
-		return this.getMatchingChildren(this.props.children, url, false).length > 0;
+		const children = toChildArray(this.props.children);
+		return this.getMatchingChildren(children, url, false).length > 0;
 	}
@@ -219,3 +216,3 @@
 			.map( vnode => {
-				let matches = exec(url, vnode.attributes.path, vnode.attributes);
+				let matches = exec(url, vnode.props.path, vnode.props);
 				if (matches) {
@@ -235,3 +232,3 @@ if (invoke !== false) {
 	render({ children, onChange }, { url }) {
-		let active = this.getMatchingChildren(children, url, true);
+		let active = this.getMatchingChildren(toChildArray(children), url, true);
 
@@ -260,6 +257,6 @@ let current = active[0] || null;
 const Link = (props) => (
-	h('a', assign({ onClick: handleLinkClick }, props))
+	createElement('a', assign({ onClick: handleLinkClick }, props))
 );
 
-const Route = props => h(props.component, props);
+const Route = props => createElement(props.component, props);
 
@@ -266,0 +263,0 @@ Router.subscribers = subscribers;

src/match.js

@@ -19,3 +19,3 @@ import { h, Component } from 'preact';
 		this.nextUrl = null;
-		return props.children[0] && props.children[0]({
+		return props.children({
 			url,
@@ -22,0 +22,0 @@ path,

src/util.js

@@ -65,3 +65,3 @@
 	vnode.rank = rankChild(vnode);
-	return vnode.attributes;
+	return vnode.props;
 }
@@ -82,3 +82,3 @@
 function rankChild(vnode) {
-	return vnode.attributes.default ? 0 : rank(vnode.attributes.path);
+	return vnode.props.default ? 0 : rank(vnode.props.path);
 }

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

255

increased by4.51%

Worsened metrics

Total package byte prevSize

74205

decreased by-0.51%

Lines of code

819

decreased by-0.49%

No dependency changes