cycle-routing-driver - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

dist/react/router.js

		@@ -25,2 +25,4 @@ "use strict";

		function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

		function _extends() { _extends = Object.assign \|\| function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
		@@ -50,3 +52,3 @@
		var route = useRoute();
		var isMatch = typeof match === "string" && pageMatches(match, route) \|\| routeMatches(match, route);
		var isMatch = routeMatches(match, route);
		return isMatch ? _react.default.createElement(_react.default.Fragment, null, children) : null;
		@@ -80,2 +82,17 @@ };
		return (0, _react.useContext)(RouteContext);
		} // HELPERS


		function routeMatches(check, route) {
		switch (_typeof(check)) {
		case "string":
		return pageMatches(check, route);

		case "function":
		return check(route);

		case "object":
		default:
		return !!check.page && pageMatches(check.page, route) && keysMatch(route.data, check.data) && keysMatch(route.query, check.query);
		}
		}
		@@ -88,15 +105,8 @@

		function routeMatches(_ref4, route) {
		var page = _ref4.page,
		data = _ref4.data,
		query = _ref4.query;
		return !!page && pageMatches(page, route) && keysMatch(route.data, data) && keysMatch(route.query, query);
		}

		function keysMatch(actual, expected) {
		if (!expected) return true;
		return Object.entries(expected).reduce(function (acc, _ref5) {
		var _ref6 = _slicedToArray(_ref5, 2),
		key = _ref6[0],
		value = _ref6[1];
		return Object.entries(expected).reduce(function (acc, _ref4) {
		var _ref5 = _slicedToArray(_ref4, 2),
		key = _ref5[0],
		value = _ref5[1];

		@@ -103,0 +113,0 @@ return acc && actual[key] === value;

package.json

		{
		"name": "cycle-routing-driver",
		"version": "1.0.0",
		"version": "1.1.0",
		"description": "A bare-bones router for simple frontend routing in CycleJS",
		@@ -5,0 +5,0 @@ "main": "dist/routing-driver.js",

README.md

		@@ -95,1 +95,82 @@ cycle-routing-driver
		```

		## React Integration

		Because I use React for nearly all my frontend work, I've added a custom integration for easy use of the
		routing within a React application. See the example below, using example routes from the code above. Note
		the use of the `Router`, `Route`, and `Link` components, as well as the `useRoute` hook.

		```js
		import {run} from '@cycle/run'
		import makeReactDriver from '@sunny-g/cycle-react-driver'
		import makeRoutingDriver, {routes} from 'cycle-routing-driver'
		import {Router, Route, Link, useRoute} from 'cycle-routing-driver/dist/react/router'

		import Modal from './ui/components/modal'
		import Homepage from './ui/pages/home'
		import EditPost from './ui/pages/post/edit'

		const PageName = () => {
		const route = useRoute()

		return <span>Current page: {route.page}</span>
		}

		const App = ({actions}) => {
		return <div>
		<h1><PageName /></h1>

		<nav>
		<Link className="nav-link" to="homepage" activeClassName="active">Home</Link>
		<a className="nav-link" onClick={() => actions.modal.activate(`signup`)}>Signup</a>
		<Link className="nav-link" to={{page: `post.edit`, data: {id: 1}}} activeClassName="active">Edit Post 1</Link>
		<Link className="nav-link" to={{page: `post.edit`, data: {id: 2}}} activeClassName="active">Edit Post 2</Link>
		<Link className="nav-link" to={{page: `post.edit`, data: {id: 3}}} activeClassName="active">Edit Post 3</Link>
		</nav>

		<main>
		<Route match="homepage"><Homepage /></Route>
		<Route match="post.edit"><EditPost /></Route>
		</main>

		<aside>
		<Route match={{page: "post.edit", data: {id: 1}}}>
		Always save the first post!
		</Route>
		</aside>

		<Route match={({query}) => !!query.modal}>
		<Modal active onClose={actions.modal.deactivate} />
		</Route>
		</div>
		}

		function main(sources) {
		const actions = {
		modal: {
		activate: sources.react.handler(`modal.activate`),
		deactivate: sources.react.handler(`modal.deactivate`),
		}
		}

		return {
		// other stuff...,
		route: xs.merge(
		sources.route.filter(({page}) => page === `404`).mapTo({page: `homepage`}),
		sources.react.event(`modal.activate`).map((modal) => ({query: {modal}})),
		sources.react.event(`modal.deactivate`).mapTo({query: {modal: null}}),
		),
		react: sources.route.map((route) =>
		<Router route={route}>
		<App actions={actions}/>
		</Router>
		),
		}
		}

		run(main, {
		// other stuff...,
		route: makeRoutingDriver(/route definition.../),
		react: makeReactDriver(document.getElementById(`app`)),
		})
		````

cycle-routing-driver - npm Package Compare versions

Improved metrics