vanilla-ui-router - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "vanilla-ui-router",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "Simple vanilla JavaScript router",
		"homepage": "https://github.com/micromata/vanilla-ui-router",
		"author": {
		"name": "René Viering",
		"email": "r.viering@micromata.de",
		"url": "http://micromata.de"
		},
		"author": "René Viering",
		"repository": "micromata/vanilla-ui-router",
		@@ -15,3 +11,5 @@ "main": "index.js",
		"dist",
		"core",
		"core/dataProvider.js",
		"core/routeParams.js",
		"core/templates.js",
		"index.js"
		@@ -27,3 +25,2 @@ ],
		},
		"author": "René Viering",
		"license": "MIT",
		@@ -30,0 +27,0 @@ "devDependencies": {

README.md

		@@ -6,10 +6,12 @@ [![npm version](https://badge.fury.io/js/vanilla-ui-router.svg)](http://badge.fury.io/js/vanilla-ui-router)
		[![devDependency Status](https://david-dm.org/micromata/vanilla-ui-router/dev-status.svg?theme=shields.io)](https://david-dm.org/micromata/vanilla-ui-router#info=devDependencies)
		[![Unicorn](https://img.shields.io/badge/unicorn-approved-ff69b4.svg?style=flat)](https://www.youtube.com/watch?v=qRC4Vk6kisY)
		[![Unicorn](https://img.shields.io/badge/unicorn-approved-ff69b4.svg?style=flat)](https://www.youtube.com/watch?v=qRC4Vk6kisY)

		# Vanilla UI router

		Simple vanilla JavaScript router to be used inside a Single Page App to add routing capabilities. The router comes with zero dependencies and can be used with any other libraries. It's based on the hashchange-Event from the window-object.
		> Simple vanilla JavaScript router to be used inside a Single Page App to add routing capabilities.

		The router comes with zero dependencies and can be used with any other libraries. It's based on the [hashchange-Event](https://developer.mozilla.org/docs/Web/API/WindowEventHandlers/onhashchange) from the window-object.

		## Usage
		Let's assume your initial markup has the following structure:
		Let's assume your initial markup has the following structure:

		@@ -25,4 +27,4 @@ ```html
		<!-- Entry point, dynamic content is rendered into this DOM element -->
		<main id="app"></main>

		<main id="app"></main>

		<!-- Bundle where your JavaScript logic lives, even the router configuration -->
		@@ -34,3 +36,3 @@ <script src="bundle.js"></script>

		And this could be your JavaScript to configure the router:
		Then you could configure the router with the following JavaScript:

		@@ -44,36 +46,38 @@ ```javascript
		router

		// Start route: The server side URL without a hash
		.addRoute('', () => {
		/*
		Use navigateTo(...) to make dynamic route changes, i.e. to redirect to another route
		/*
		Use navigateTo(…) to make dynamic route changes, i.e. to redirect to another route
		*/
		router.navigateTo('home');
		})


		.addRoute('home', (domEntryPoint) => {
		domEntryPoint.textContent = 'I am the home route.';
		})


		.addRoute('about/:aboutId/:editable', (domEntryPoint, routeParams) => {
		console.log('I am the about route.');


		/*
		routeParams are extracted from the URL and are casted to the correct type
		(number/boolean)
		routeParams are extracted from the URL and are casted to the correct type
		(Number/Boolean/String)
		*/
		console.log(routeParams); // => { aboutId: 42, editable:false }
		})

		/*
		If routes get more complex, maybe you need to render a template URL,
		use a configuration object as second parameter, instead of the function

		/*
		If routes get more complex, e.g. you need to render a template URL,
		pass a configuration object as second parameter (instead of the function)
		*/
		.addRoute('route-with-template-url', {
		templateUrl: 'path/to/template.html' // is loaded and gets rendered
		templateUrl: 'path/to/template.html' // is loaded and gets rendered
		})


		.addRoute('route-with-template-string/:id', {
		templateString: '<p>Lorem ipsum dolor.</p>',
		routeHandler: (domEntryPoint, routeParams) => {
		/*
		It's called just after rendering the template, so you can add route-specific logic.
		/*
		It's called just after rendering the template, so you can add route-specific logic.
		But only if needed!
		@@ -85,6 +89,6 @@ */
		/*
		You can also define a templateId, i.e. if you have a template-script inside
		You can also define a templateId, i.e. if you have a template-script inside
		your markup like:

		<script type="text/template" id="tempalte42">

		<script type="text/template" id="template42">
		<p>
		@@ -98,6 +102,7 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, tenetur?
		})


		.otherwise(() => {
		// If no route configuration matches, the otherwise route is invoked.
		console.log('I am the otherwise route');
		router.navigateTo('404');
		});
		@@ -104,0 +109,0 @@

core/__mocks__/dataProvider.js

core/__tests__/dataProvider.spec.js

core/__tests__/templates.spec.js

vanilla-ui-router - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics