@brandup/ui-website
v9.0.12
Published
Front-end website infrastructure.
Downloads
90
Readme
brandup-ui-website
Installation
Install NPM package @brandup/ui-website.
npm i @brandup/ui-website
Configure and start
import { WEBSITE } from "@brandup/ui-website";
import { AuthMiddleware } from "./middlewares/auth";
import "./styles.less";
WEBSITE.run({
defaultPage: "base",
pages: {
"base": { factory: ()=> import("./pages/base"), preload: true }
"signin": { factory: ()=> import("./pages/signin") }
},
components: {
"test": { factory: () => import("./components/test") }
}
}, (builder) => {
builder
.useMiddleware(() => new AuthMiddleware());
})
.then(() => console.log("website runned"));
Application
Base application type WebsiteApplication<TModel extends WebsiteApplicationModel>
.
class WebsiteApplication<TModel extends WebsiteApplicationModel = WebsiteApplicationModel> extends Application<TModel> {
/** Ajax queue by current application instance. */
readonly queue: AjaxQueue;
/** Add antiforgery token for request. */
prepareRequest(request: AjaxRequest): void;
/** Request without ajax queue. */
request(options: AjaxRequest): Promise<_brandup_ui_ajax.AjaxResponse<any, any>>;
}
Middleware
Develop custom middleware:
import { Middleware, MiddlewareNext, NavigateContext, StartContext } from "@brandup/ui-app";
import { Page, PageModel, WebsiteApplicationModel } from "@brandup/ui-website";
import { request } from "@brandup/ui-ajax";
export class AuthMiddleware extends Middleware<WebsiteApplicationModel> {
start(context: StartContext, next: MiddlewareNext) {
this.app.registerCommand("signout", () => {
request({
url: context.app.buildUrl("api/auth/signout"),
method: "POST"
}).then(() => this.app.reload());
});
console.log(`website id: ${context.app.model.websiteId}`);
return next();
}
async loaded(context: StartContext, next: MiddlewareNext) {
await next();
}
navigate(context: NavigateContext, next: MiddlewareNext) {
return next();
}
}
Use middleware: builder.useMiddleware(() => new AuthMiddleware());
Page
import { Page, PageModel } from "@brandup/ui-website";
class SignInPage extends Page<PageModel> {
get typeName(): string { return "SignInPage" }
onRenderContent() {
this.registerCommand("test", () => {
this.submit();
});
super.onRenderContent();
}
}
export default SignInPage;
Export page type require as default.
Register page type:
host.start({
pageTypes: {
"signin": ()=> import("./pages/signin")
}
});
Component
Declare component:
import { WEBSITE } from "@brandup/ui-website";
import { AuthMiddleware } from "./middlewares/auth";
import "./styles.less";
WEBSITE.run({
components: {
"test": { factory: () => import("./components/test") }
}
}, (builder) => { });
Render component:
<div data-content-script="test"></div>
Component code: