@nxcode-npm/vanillajs-router
v1.0.2
Published
VanillaJS-router is a lightweight module written in pure Javascript, with no dependencies, for rapid development of Single Page Apps. Based on standard Web Component. Provides page-level state management, document fragments and nested routes, and uses web
Readme
vannillaJS-router
VanillaJS-router is a lightweight module written in pure Javascript, with no dependencies, for rapid development of Single Page Apps. Based on standard Web Component. Provides page-level state management, document fragments and nested routes, and uses web history APIs to simulate browser navigation.
// window global object
RO.initialize(my_app_router)
RO.nav({key:"myview"})
// OR
import { RO } from "..."
RO.initialize(my_app_router)
RO.nav({key:"myview"})
App router
Where all the app routing is defined.
const app_router:IRouter = {
'index':{
customElement:'index-page',
params:{},
router:() => document.querySelector("router-component#app")
},
'home':{
customElement:'home-page',
params:{},
router:() => querySelector("router-component#app")
},
}index.page.ts
class IndexPage extends HTMLElement {
static route:string = "index"
constructor(){
super()
}
connectedCallback(){
this.innerHTML = `<p>This is the index page</p>
<a href="#" onclick="RO.nav({key:'home'}); return false;">Go Home</a>`
}
}
customElements.define('index-page', IndexPage)home.page.ts
class HomePage extends HTMLElement {
static route:string = "home"
constructor(){
super()
}
connectedCallback(){
this.innerHTML = `<p>This is the home page</p>
<a href="#" onclick="RO.nav({key:'index'}); return false;">Logout</a>`
}
}
customElements.define('home-page', HomePage)index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="Description" content="">
<base href="/">
<title>Test vanillajs-router</title>
</head>
<body>
<router-component id="app" route="index"></router-component>
</body>
</html>App startup
RO.initialize(app_router)Params
// "index" passes a message to "home"
// [index.page.ts]
RO.nav({message:"Hi, happy to see you"})
// "home" reads the message"
// [home.page.ts]
constructor(){
super()
this.route = app_router[HomePage.route]
this.message = route.params.message
}Nested routes
The "router()" parameter in "app router" is a function that returns a parent RouterComponent, which is where the view is inserted into the DOM. This mechanism allows you to load some parts of the page and leave others fixed (for example the main navigation bar).
The following example shows how to add nested routes to the "home" page.
For example "home account" loads the view in the "route-component#home" and adds the home path in the browser URL (//myserver/home/account) to the page name.
enum paths { HOME="home" }
const getHomeRoot => (){
return document.querySelector(`router-component#home`)
}
const app_router:IRouter = {
//...
'home_account':{
customElement:'home-account',
path:paths.HOME.concat('/'),
name:'account',
params:{},
routerLink:()=> getHomeRoot()
},
'home_projects':{
customElement:'home-projects',
path:paths.HOME.concat('/'),
name:'projects',
params:{},
routerLink:()=> getHomeRoot()
},
'home_messages':{
customElement:'home-messages',
path:paths.HOME.concat('/'),
name:'messages',
params:{},
routerLink:()=> getHomeRoot()
}
//...
}home.html
<!--
Navigating to "home_message" will not update the header
-->
<rounter-component id="app" route="home">
<header>
<h1>User Home</h1>
</header>
<router-component id="home" route="home_account"></router-link>
</router-component>Page state
Save a page state in the route "state" prop; the state of a page can be retrieved from its route when it is reloaded or following user back/forward navigation.
// save the state
app_router["home_account"].state["user"] = { user }
// read the state
connectedCallback(){
this.user = app_router[HomeAccountPage.route].state["user"]
}