svelte-easyroute-rollup v1.1.0

This version is for Svelte ROLLUP template

If you want to use it with WEBPACK, go HERE

Habitual router in your projects

v1.1.0 Here are:

• Introducing CSS transitions (BETA)! Read more in Wiki section;
• Imporved RouterLink component: behaves more like natural link with "a" element. Now you can right-click on it and press "Open in new tab" etc.

Svelte Easyroute - is a simple and convenient router for Svelte framework.

Why you should try it?

1. Well-known syntax I was inspired by the router for Vue.js, so this router will be understandable to many of you

2. Still developing Many features of the router are still ahead. Already now it can be used in projects, and I’m happy to know what will make it better.

3. Community-friendly Repository cloning and pull requests are welcome! Together we can make the perfect tool for developing on Svelte

How to use?

In your Svelte project directory run

npm install --save svelte-easyroute-rollup@latest

Then, in your main.js file put this code

// Since version 0.1.0 Svelte Easyroute supports mode selecting!
import {Router} from 'svelte-easyroute-rollup'
export var router = new Router({
mode: "hash", // "hash", "history" or "silent"
routes:	[
		{
			path: '/',
			component: Index,
			name: 'Index'
		},
		{
			path: '/about/me',
			component: About,
			name: 'About me'
		},
		// Since version 0.2.0 Svelte Easyroute supports dynamic
		// route matching!
		{
			path: '/username/:name/:action',
			component: Username,
			name: 'Username'
		}
	]
})

Here we defined two routes. Link "//yoursite.com/#/" will lead to Index component, and link "//yoursite.com/#/about/me" - to About component.

After doing this, in your App class declaration, in "props" section, add new prop:

props: {
		//your props
		...
		router: router
}

We finished here!

But not everything yet.

Go to your main file (f.e. "App.svelte"). In the script tag put this:

import { onMount } from 'svelte'
export let router
import RouterLink from 'svelte-easyroute-rollup/RouterLink.svelte'

onMount(()=> {
	router.createOutlet()
})

Let me explain. We need "onMount" Svelte hook for outlet creating. Also, here we get access to our Router (we passed it as a prop in a previous step). We need to import RouterLink to create... links :)

After all, we need to init Router outlet on our page. Let's do it in onMount hook.

Now it's time to put the outlet on your page. It is easier than you think! Just put on page element with id "router-outlet". That's all!

Now you are ready to create your single-page app with Svelte!

Additional controls

For now, what you can do with Svelte Easyroute:

• Access current route info. You can get info about full current path, query params and route breadcrumbs. For that, in your component, create variable "currentRoute". That's all!

export let currentRoute

function someFunc() {
    let queryName = currentRoute.query.name
    let fullPath = currentRoute.fullPath
    let breadcrumbs = currentRoute.route
}

• Programmaticaly navigate You can use push method to navigate inside your app

    export let router

    router.push('/?name=RouterPushUsed')

• Router navigation hooks Since version 0.1.0 you can use navigation hooks. They look pretty like hooks in a Vue.js, but with some difference:

var router = new Router(...)

router.beforeEach = (to,from,next) => {
	console.log(to.fullPath)
	console.log(from.fullPath)
	next()
}

router.afterEach = (to,from) => {
	console.log('We are on new page!')
}

beforeEach guard will stop transition until "next()" method is called.

• Base path Since version 0.3.0 you can specify a base path for your app. It will be placed before each route automaticly.

export var router = new Router({
	base: "path/to/your/app", // NOT required. You can specify it in any format: with or without slashes in the beginning and in the end.

	/* * */

• Default routes Since version 1.0.0 Easyroute supports default routes. More than that, not just for index path, but for any level!

export var router = new Router({
	mode: "silent",
	routes: [
		{
			path: "*",
			component: page404,
			name: "Not found"
		},
		{
			path: "/blog/entry/*",
			component: blog404,
			name: "Entry not found"
		}
	]
})

You can use it for 404 error page on zero level and or others level. For example, if URL "/qwe/rty/uio/pas" has no defined component, Easyroute will show component "page404". And URL "/blog/entry/fdlkjglsdkhjfg" will show component "blog404".

• Silent mode Since version 1.0.0 there is third router mode - "silent". You can use it if you don't want to change URL in address bar. Define your routes as usual:

export var router = new Router({
	mode: "silent",
	routes: [
		...
	]
})

Then, just place a regular RouterLink anywhere you want. This mode has it's own history. You can use this two methods:

	export let router

	router.silentGoBack() // navigates your router back in silent mode
	router.silentGoForward() // navigates your router forward in silent mode

Why this mode not uses history api by default? Because history api is not supported in some older versions of browsers. However, you can manipulate browser history in this mode using navigation hooks :)

• CSS transitions Since version 1.1.0 you can use CSS-transitions. It is pretty easy, especially if you worked with Vue.js before. For example, let's create "fade" transition. First of all, in a GLOBAL css file (note: you NEED to use a globally included CSS file) create the following classes:

/* State when app enters a new page */
.fade-enter {
	opacity: 0;
	transform: translateX(50px);
}

/* State when app finished going out from the route */
.fade-leave-to {
	opacity: 0;
	transform: translateX(50px);
}

/* This class applies when entering process is on */
.fade-enter-active {
	transition: opacity .2s ease, transform .2s ease;
}

/* This class applies when leaving process is on
.fade-leave-active {
	transition: opacity .2s ease, transform .2s ease;
}

/* State when app finished going in new route */
.fade-enter-to {
	opacity: 1;
	transform: translateX(0px);
}

/* State when app starts to leave a page */
.fade-leave {
	opacity: 1;
	transform: translateX(0px);
}

Of course, you can write it in more accurate way:

.fade-enter, .fade-leave-to {
	opacity: 0;
	transform: translateX(50px);
}
.fade-enter-active, .fade-leave-active {
	transition: opacity .2s ease, transform .2s ease;
}
.fade-enter-to, .fade-leave {
	opacity: 1;
	transform: translateX(0px);
}

After, go in the definition of your router and add the following line:

var router = new Router({
	mode: "history",
	transition: "fade" // Here we placed name of our animation

As you can see, animation's classes are defined like "ANIMATION-enter" and so on. Easy as five roubles (just a russian proverb).

Thank you for reading this! I hope you'll enjoy Svelte Easyroute!

Contact me:

• My website: https://lyoha.info/ (russian language!)
• Telegram: https://t.me/alexeysolovjov
• Email: plotinka@lyoha.info