brandup-ui-app v3.2.1
brandup-ui-app
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
}
}
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago