Skip to content

Commit a0246c2

Browse files
malincristmalincrist
committed
upgrade to new registration model
1 parent 3f364aa commit a0246c2

9 files changed

+89
-512
lines changed

‎package-lock.json

Lines changed: 0 additions & 414 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/template-pages/api-details-page/apiDetailsPageHandlers.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
import { IWidgetHandler, IWidgetOrder } from "@paperbits/common/editing";
1+
import { IWidgetHandler } from "@paperbits/common/editing";
22
import { StyleDefinition } from "@paperbits/common/styles";
33
import { ApiDetailsPageModel } from "./apiDetailsPageModel";
44

55
export class ApiDetailsPageHandlers implements IWidgetHandler {
6-
public async getWidgetOrder(): Promise<IWidgetOrder> {
7-
const widgetOrder: IWidgetOrder = {
8-
name: "apiDetailsPage",
9-
category: "APIs",
10-
displayName: "API Details Page",
11-
iconClass: "widget-icon widget-icon-api-management",
12-
requires: ["html"],
13-
createModel: async () => new ApiDetailsPageModel()
14-
};
15-
16-
return widgetOrder;
6+
public async getWidgetModel(): Promise<ApiDetailsPageModel> {
7+
return new ApiDetailsPageModel();
178
}
189

1910
public getStyleDefinitions(): StyleDefinition {

‎src/components/template-pages/api-details-page/ko/apiDetailsPage.module.ts

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,35 @@
11
import { IInjector, IInjectorModule } from "@paperbits/common/injection";
22
import { ApiDetailsPageModelBinder } from "../apiDetailsPageModelBinder";
33
import { ApiDetailsPageViewModelBinder } from "./apiDetailsPageViewModelBinder";
4+
import { IWidgetService } from "@paperbits/common/widgets";
5+
import { ApiDetailsPageModel } from "../apiDetailsPageModel";
6+
import { ApiDetailsPageViewModel } from "./apiDetailsPageViewModel";
7+
import { ApiDetailsPageEditor } from "./apiDetailsPageEditor";
8+
import { ApiDetailsPageHandlers } from "../apiDetailsPageHandlers";
9+
import { KnockoutComponentBinder } from "@paperbits/core/ko";
410

5-
export class ApiDetailsPageModule implements IInjectorModule{
11+
export class ApiDetailsPageModule implements IInjectorModule {
612
public register(injector: IInjector): void {
713
injector.bindToCollection("modelBinders", ApiDetailsPageModelBinder);
814
injector.bindToCollection("viewModelBinders", ApiDetailsPageViewModelBinder);
15+
16+
const widgetService = injector.resolve<IWidgetService>("widgetService");
17+
18+
widgetService.registerWidget("api-details-page", {
19+
modelDefinition: ApiDetailsPageModel,
20+
componentBinder: KnockoutComponentBinder,
21+
componentDefinition: ApiDetailsPageViewModel,
22+
modelBinder: ApiDetailsPageModelBinder,
23+
viewModelBinder: ApiDetailsPageViewModelBinder
24+
});
25+
26+
widgetService.registerWidgetEditor("api-details-page", {
27+
displayName: "API Details Page",
28+
category: "APIs",
29+
iconClass: "widget-icon widget-icon-api-management",
30+
componentBinder: KnockoutComponentBinder,
31+
componentDefinition: ApiDetailsPageEditor,
32+
handlerComponent: ApiDetailsPageHandlers
33+
});
934
}
1035
}

‎src/components/template-pages/api-details-page/ko/apiDetailsPageViewModelBinder.ts

Lines changed: 23 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,39 @@
1-
import { Bag } from "@paperbits/common";
2-
import { ComponentFlow } from "@paperbits/common/components";
3-
import { EventManager, Events } from "@paperbits/common/events";
41
import { StyleCompiler } from "@paperbits/common/styles";
5-
import { ViewModelBinder } from "@paperbits/common/widgets";
6-
import { ApiDetailsPageHandlers } from "../apiDetailsPageHandlers";
2+
import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
73
import { ApiDetailsPageModel } from "../apiDetailsPageModel";
84
import { ApiDetailsPageViewModel } from "./apiDetailsPageViewModel";
95

106
export class ApiDetailsPageViewModelBinder implements ViewModelBinder<ApiDetailsPageModel, ApiDetailsPageViewModel> {
117
constructor(
12-
private readonly eventManager: EventManager,
138
private readonly styleCompiler: StyleCompiler) { }
149

15-
public async modelToViewModel(model: ApiDetailsPageModel, viewModel?: ApiDetailsPageViewModel, bindingContext?: Bag<any>): Promise<ApiDetailsPageViewModel> {
16-
if (!viewModel) {
17-
viewModel = new ApiDetailsPageViewModel();
18-
}
10+
public stateToInstance<TState, TInstance>(state: WidgetState, componentInstance: ApiDetailsPageViewModel): void {
11+
componentInstance.styles(state.styles);
1912

20-
viewModel.runtimeConfig(JSON.stringify({
21-
groupOperationsByTag: model.groupOperationsByTag,
22-
showUrlPath: model.showUrlPath,
23-
wrapText: model.wrapText,
24-
enableConsole: model.enableConsole,
25-
showExamples: model.showExamples,
26-
includeAllHostnames: model.includeAllHostnames,
27-
useCorsProxy: model.useCorsProxy,
28-
defaultSchemaView: model.defaultSchemaView
13+
componentInstance.runtimeConfig(JSON.stringify({
14+
groupOperationsByTag: state.groupOperationsByTag,
15+
showUrlPath: state.showUrlPath,
16+
wrapText: state.wrapText,
17+
enableConsole: state.enableConsole,
18+
showExamples: state.showExamples,
19+
includeAllHostnames: state.includeAllHostnames,
20+
useCorsProxy: state.useCorsProxy,
21+
defaultSchemaView: state.defaultSchemaView
2922
}));
23+
}
3024

31-
viewModel["widgetBinding"] = {
32-
displayName: "API Details Page",
33-
layer: bindingContext?.layer,
34-
model: model,
35-
draggable: true,
36-
flow: ComponentFlow.Block,
37-
editor: "api-details-page-editor",
38-
handler: ApiDetailsPageHandlers,
39-
applyChanges: async (updatedModel: ApiDetailsPageModel) => {
40-
await this.modelToViewModel(updatedModel, viewModel, bindingContext);
41-
this.eventManager.dispatchEvent(Events.ContentUpdate);
42-
}
43-
};
25+
public async modelToState(model: ApiDetailsPageModel, state: WidgetState): Promise<void> {
26+
state.groupOperationsByTag = model.groupOperationsByTag;
27+
state.showUrlPath = model.showUrlPath;
28+
state.wrapText = model.wrapText;
29+
state.enableConsole = model.enableConsole;
30+
state.showExamples = model.showExamples;
31+
state.includeAllHostnames = model.includeAllHostnames;
32+
state.useCorsProxy = model.useCorsProxy;
33+
state.defaultSchemaView = model.defaultSchemaView;
4434

4535
if (model.styles) {
46-
viewModel.styles(await this.styleCompiler.getStyleModelAsync(model.styles, bindingContext?.styleManager, ApiDetailsPageHandlers));
36+
state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
4737
}
48-
49-
return viewModel;
50-
}
51-
52-
public canHandleModel(model: ApiDetailsPageModel): boolean {
53-
return model instanceof ApiDetailsPageModel;
5438
}
5539
}

‎src/components/template-pages/api-details-page/ko/runtime/staticPages/about-api.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<h3>Details</h3>
22

33
<div class="pb-12">
4-
<span> type: API</span>
4+
<span> Type: API</span>
55
<!-- ko if: lastModifiedDate -->
66
<span class="bullet-separator">•</span>
77
<span data-bind="text: 'Last updated: ' + lastModifiedDate"></span>

‎src/components/template-pages/product-details-page/ko/productDetailsPage.module.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,33 @@
11
import { IInjector, IInjectorModule } from "@paperbits/common/injection";
22
import { ProductDetailsPageModelBinder } from "../productDetailsPageModelBinder";
33
import { ProductDetailsPageViewModelBinder } from "./productDetailsPageViewModelBinder";
4+
import { ProductDetailsPageModel } from "../productDetailsPageModel";
5+
import { ProductDetailsPageViewModel } from "./productDetailsPageViewModel";
6+
import { IWidgetService } from "@paperbits/common/widgets";
7+
import { KnockoutComponentBinder } from "@paperbits/core/ko";
48

59
export class ProductDetailsPageModule implements IInjectorModule {
610
public register(injector: IInjector): void {
711
injector.bindToCollection("modelBinders", ProductDetailsPageModelBinder);
812
injector.bindToCollection("viewModelBinders", ProductDetailsPageViewModelBinder);
13+
14+
const widgetService = injector.resolve<IWidgetService>("widgetService");
15+
16+
widgetService.registerWidget("product-details-page", {
17+
modelDefinition: ProductDetailsPageModel,
18+
componentBinder: KnockoutComponentBinder,
19+
componentDefinition: ProductDetailsPageViewModel,
20+
modelBinder: ProductDetailsPageModelBinder,
21+
viewModelBinder: ProductDetailsPageViewModelBinder
22+
});
23+
24+
widgetService.registerWidgetEditor("product-details-page", {
25+
displayName: "Product Details Page",
26+
category: "Products",
27+
iconClass: "widget-icon widget-icon-api-management",
28+
componentBinder: KnockoutComponentBinder,
29+
componentDefinition: ProductDetailsPageViewModel,
30+
handlerComponent: ProductDetailsPageViewModelBinder
31+
});
932
}
1033
}

‎src/components/template-pages/product-details-page/ko/productDetailsPageViewModelBinder.ts

Lines changed: 9 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,25 @@
1-
import { Bag } from "@paperbits/common";
2-
import { ComponentFlow } from "@paperbits/common/components";
3-
import { EventManager, Events } from "@paperbits/common/events";
41
import { StyleCompiler } from "@paperbits/common/styles";
5-
import { ViewModelBinder } from "@paperbits/common/widgets";
6-
import { ProductDetailsPageHandlers } from "../productDetailsPageHandlers";
2+
import { ViewModelBinder, WidgetState } from "@paperbits/common/widgets";
73
import { ProductDetailsPageModel } from "../productDetailsPageModel";
84
import { ProductDetailsPageViewModel } from "./productDetailsPageViewModel";
95

106
export class ProductDetailsPageViewModelBinder implements ViewModelBinder<ProductDetailsPageModel, ProductDetailsPageViewModel> {
117
constructor(
12-
private readonly eventManager: EventManager,
138
private readonly styleCompiler: StyleCompiler) { }
149

15-
public async modelToViewModel(model: ProductDetailsPageModel, viewModel?: ProductDetailsPageViewModel, bindingContext?: Bag<any>): Promise<ProductDetailsPageViewModel> {
16-
if (!viewModel) {
17-
viewModel = new ProductDetailsPageViewModel();
18-
}
10+
public stateToInstance<TState, TInstance>(state: WidgetState, componentInstance: ProductDetailsPageViewModel): void {
11+
componentInstance.styles(state.styles);
1912

20-
viewModel.runtimeConfig(JSON.stringify({
21-
wrapText: model.wrapText
13+
componentInstance.runtimeConfig(JSON.stringify({
14+
wrapText: state.wrapText
2215
}));
16+
}
2317

24-
viewModel["widgetBinding"] = {
25-
displayName: "Product Details Page",
26-
layer: bindingContext?.layer,
27-
model: model,
28-
draggable: true,
29-
flow: ComponentFlow.Block,
30-
editor: "product-details-page-editor",
31-
handler: ProductDetailsPageHandlers,
32-
applyChanges: async (updatedModel: ProductDetailsPageModel) => {
33-
await this.modelToViewModel(updatedModel, viewModel, bindingContext);
34-
this.eventManager.dispatchEvent(Events.ContentUpdate);
35-
}
36-
};
18+
public async modelToState<TState>(model: ProductDetailsPageModel, state: WidgetState): Promise<void> {
19+
state.wrapText = model.wrapText;
3720

3821
if (model.styles) {
39-
viewModel.styles(await this.styleCompiler.getStyleModelAsync(model.styles, bindingContext?.styleManager, ProductDetailsPageHandlers));
22+
state.styles = await this.styleCompiler.getStyleModelAsync(model.styles);
4023
}
41-
42-
return viewModel;
43-
}
44-
45-
public canHandleModel(model: ProductDetailsPageModel): boolean {
46-
return model instanceof ProductDetailsPageModel;
4724
}
4825
}

‎src/components/template-pages/product-details-page/ko/runtime/product-details-page.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
<h3>Details</h3>
4444

4545
<div class="pb-12">
46-
<span> type: Product</span>
46+
<span>Type: Product</span>
4747
</div>
4848

4949
<!-- ko if: product().description -->

‎src/components/template-pages/product-details-page/productDetailsPageHandlers.ts

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
1-
import { IWidgetHandler, IWidgetOrder } from "@paperbits/common/editing";
1+
import { IWidgetHandler } from "@paperbits/common/editing";
22
import { StyleDefinition } from "@paperbits/common/styles";
33
import { ProductDetailsPageModel } from "./productDetailsPageModel";
44

55
export class ProductDetailsPageHandlers implements IWidgetHandler {
6-
public async getWidgetOrder(): Promise<IWidgetOrder> {
7-
const widgetOrder: IWidgetOrder = {
8-
name: "productDetailsPage",
9-
category: "Products",
10-
displayName: "Product Details Page",
11-
iconClass: "widget-icon widget-icon-api-management",
12-
requires: ["html"],
13-
createModel: async () => new ProductDetailsPageModel()
14-
};
15-
16-
return widgetOrder;
6+
public async getWidgetModel(): Promise<ProductDetailsPageModel> {
7+
return new ProductDetailsPageModel();
178
}
189

1910
public getStyleDefinitions(): StyleDefinition {

0 commit comments

Comments
 (0)