3.2.1 • Published 1 year ago

brandup-ui-app v3.2.1

Weekly downloads
5
License
Apache-2.0
Repository
github
Last release
1 year ago

brandup-ui-app

Build Status

Installation

Install NPM package brandup-ui-app.

npm i brandup-ui-app@latest

Configure and run application

Configure your application with middlewares and run.

import { ApplicationBuilder } from "brandup-ui-app";
import { PagesMiddleware } from "./middlewares/pages";
import "./styles.less";

// Customize application model
interface ExampleApplicationModel extends ApplicationModel {
}

// Customize application type
export class ExampleApplication extends Application<ExampleApplicationModel> {
}

const builder = new ApplicationBuilder<ExampleApplicationModel>();
builder
	.useApp(ExampleApplication)
	.useMiddleware(new PagesMiddleware());

const appModel: ExampleApplicationModel = {};
const app = builder.build<ExampleApplicationModel>({ basePath: "/" }, appModel);

app.run({ ...optional context params })
	.then(context => { })
	.catch(reason => { });

Default HTMLElement of application is document.body. Set custom element:

const appElement = document.getElementById("app")
app.run({ ...optional context params }, appElement);

Middlewares

Inject to application lifecycle event methods. Middleware methods are called one after another in the order in which they were registered in the ApplicationBuilder.

export class PagesMiddleware extends Middleware<ExampleApplication, ExampleApplicationModel> {
    async(context: StartContext, next: MiddlewareNext) {
        console.log("start");

		return next();
    }

    async loaded(context: StartContext, next: MiddlewareNext) {
        console.log("loaded");

		return next();
    }

    async navigate(context: NavigateContext, next: MiddlewareNext) {
        if (context.replace)
            location.replace(context.url);
        else
            location.assign(context.url);

		return next();
    }

    async submit(context: SubmitContext, next: MiddlewareNext) {
        console.log("submit");

		return next();
    }

    async stop(context: StopContext, next: MiddlewareNext) {
        console.log("stop");

		return next();
    }
}

Example SPA navigation middleware: example/src/frontend/middlewares/pages.ts

Async middleware execution

export class PagesMiddleware extends Middleware<ExampleApplication, ExampleApplicationModel> {
	async navigate(context: NavigateContext, next: MiddlewareNext) {
        // Exec before next middleware

		await next();

        // Exec after next middleware
    }
}
3.2.1

1 year ago

2.2.3

1 year ago

2.2.4

1 year ago

2.2.7

1 year ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.1

1 year ago

2.3.8

1 year ago

2.3.7

1 year ago

2.3.2

1 year ago

2.3.1

1 year ago

2.3.3

1 year ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.5

1 year ago

3.1.4

1 year ago

2.1.8

1 year ago

2.1.7

1 year ago

2.1.2

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.6

2 years ago

2.1.5

2 years ago

2.0.3

2 years ago

2.0.2

3 years ago

2.0.1

3 years ago

1.2.28

4 years ago

1.2.27

5 years ago

1.2.26

5 years ago

1.2.25

5 years ago

1.2.24

5 years ago

1.2.23

5 years ago

1.2.22

5 years ago

1.2.20

5 years ago

1.2.21

5 years ago

1.2.18

5 years ago

1.2.19

5 years ago

1.2.17

5 years ago

1.2.16

5 years ago

1.2.14

5 years ago

1.2.15

5 years ago

1.2.13

5 years ago

1.2.12

5 years ago

1.2.11

5 years ago

1.2.10

5 years ago

1.2.8

5 years ago

1.2.9

5 years ago

1.2.7

5 years ago

1.2.6

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago