Spiel-build NPM

spiel-build

Router builder for different frameworks based in states

Api documentation

Spiel Build

How build your own router builder

First instance the Router class:

import { IRoutes, Router } from "../src";

const builder = new Router(configRouter.rootPath, configRouter.useHash, configRouter.hash);

After call the build method

builder.build(configRouter.routes, this.setPatch, null, element, extraParams);

Simple example with Ultradom 2

import { h, patch, VNode } from "ultradom";
import { IRoutes, Router } from "../src";
import { render } from "./render";

export type Keys = string;
export type State = {[k in Keys]: any};
export type View = (state: any) => VNode<any>;

export interface IPage {
    state: State;
    view: View;
}

export interface IRoutesExample extends IRoutes {
    page: IPage;
}

export interface IAdditionalSetting {
    defaultProps: string;
}

export interface IConfigRouter {
    rootPath?: string;
    defaultProps?: string;
    root?: string;
    useHash?: boolean;
    hash?: string;
    routes?: Array<{[Route in keyof IRoutesExample] : any}>;
}

export class ExampleBuilder {
    public builder!: Router;
    private configRouter!: IConfigRouter;
    private root!: string;

    public setRouters(configRouter: IConfigRouter) {
        this.configRouter = configRouter || {};
        this.root = configRouter.root || "app";
        this.builder = new Router(configRouter.rootPath, configRouter.useHash, configRouter.hash);
        const element = this.createRootElement();

        if (configRouter.routes) {
            this.builder.build(configRouter.routes, this.setPatch, null, element, configRouter.defaultProps);
        }

        this.builder.router.resolve();
    }

    private createRootElement() {
        const rootElement = document.getElementById(this.root);
        const node = h("div", {});
        let element;
        if (!rootElement) {
            const elm = document.createElement("div");
            elm.setAttribute("id", this.root);
            document.body.appendChild(elm);
            element = patch(node, document.getElementById(this.root));
        } else {
            element = patch(node, document.getElementById(this.root));
        }

        return element;
    }

    private setPatch(route: IRoutesExample, params: object, query: string,
                     rootElement?: Element, defaultProps?: string) {
        const page = route.page;
        const state: State = {};

        Object.assign(state, page.state);
        state.params = params;
        state.query = query;
        state.defaultProps = defaultProps;
        render(page.view, state, rootElement);
    }
}

export const exampleBuilder = new ExampleBuilder();