Basic infrastructure framework for web applications.
npm install brandup-ui-appInstall NPM package brandup-ui-app.
``
npm i brandup-ui-app@latest
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
}
const builder = new ApplicationBuilder
builder
.useApp(ExampleApplication)
.useMiddleware(new PagesMiddleware());
const appModel: ExampleApplicationModel = {};
const app = builder.build
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);
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
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
`
export class PagesMiddleware extends Middleware
async navigate(context: NavigateContext, next: MiddlewareNext) {
// Exec before next middleware
await next();
// Exec after next middleware
}
}
``