Router to FerrugemJS

A basic router implementation to FerrugemJS.

This is a basic implementation of routes for "Ferrugemjs", please feel free to do merge requests and improve this router or create your own. This router is implemented using page.js.

how to start:

clone skeleton-typescript (recomended way)

individual install

npm install @ferrugemjs/router --save

in config.js.

"@ferrugemjs/router":"node_modules/@ferrugemjs/router/dist"

Usage

eg. routes-app.html file

<template>
    <require from="@ferrugemjs/router as rt" type="namespace" />
    <div>
        <rt:router-view routes="${this.routes}" />
    </div>
</template>

eg. routes-app.ts file

import { Route } from "@ferrugemjs/router";

const ModuleA = () => import("./module-a.html");
const ModuleB = () => import("./module-b.html");
const ModuleC = () => import("./module-c.html");
const ModuleNotFound = () => import("./not-found.html");

export class Routes {
    public routes: Route[] = [
        {
            path: "/module-a",
            view: ModuleA,
        },
        {
            path: "/module-b/:name",
            view: ModuleB,
        },
        {
            path: "module-c/:id/:name",
            view: MuduleC,
        },
        {
            path: "/redirect-test",
            redirectTo: "/module-a",
        },
        {
            path: "/not-found",
            view: ModuleNotFound,
        },
        {
            path: "*",
            redirectTo: "/not-found",
        },
    ];
}

hashbang

<template>
    <require from="@ferrugemjs/router as rt" type="namespace" />
    <div>
        <rt:router-view routes="${this.routes}" hashbang="true"/>
    </div>
</template>

redirect

<template>
  <require from="@ferrugemjs/router as rt" type="namespace" />
  <rt:router-redirect to="/list-modules" />
</template>

redirect with timeout

<template>
  <require from="@ferrugemjs/router as rt" type="namespace" />
    <rt:router-redirect 
      path="/list-modules"
      timeout="4000"
    />
</template>

base path

<template>
    <require from="@ferrugemjs/router as rt" type="namespace" />
    <div>
        <rt:router-view routes="${this.routes}" base="/home/"/>
    </div>
</template>

redirect from a module

import { redirect, Route } from "@ferrugemjs/router";

....

private redirectTest() {
    redirect("/module-a/manual_redirect");
}

eg. tsconfig.json

    "paths": {
        "@ferrugemjs/library": [
            "node_modules/@ferrugemjs/library/dist/index.d.ts"
        ],
        "@ferrugemjs/library/platform": [
            "node_modules/@ferrugemjs/library/dist/platform.d.ts"
        ],
    }