3.2.1 • Published 12 months ago

brandup-ui-app v3.2.1

Weekly downloads
5
License
Apache-2.0
Repository
github
Last release
12 months 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

12 months ago

2.2.3

12 months ago

2.2.4

12 months ago

2.2.7

12 months ago

3.0.4

12 months ago

3.0.3

12 months ago

3.0.1

12 months ago

2.3.8

12 months ago

2.3.7

12 months ago

2.3.2

12 months ago

2.3.1

12 months ago

2.3.3

12 months ago

3.1.3

12 months ago

3.1.2

12 months ago

3.1.1

12 months ago

3.1.5

12 months ago

3.1.4

12 months 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