fix: resolve type issues

Author: iobuhov

packages/pluggableWidgets/custom-chart-web/src/controllers/ChartPropsController.ts

@@ -1,5 +1,5 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { DerivedPropsGate, ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { makeAutoObservable } from "mobx";
 import { Config, Data, Layout } from "plotly.js-dist-min";
@@ -18,14 +18,14 @@ interface ChartPropsControllerSpec {
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class ChartPropsController implements ReactiveController {
+export class ChartPropsController implements SetupComponent {
     private cleanup: undefined | (() => void) = undefined;
     private editorStateGate: DerivedPropsGate<EditorStoreState>;
     private propsGate: DerivedPropsGate<ControllerProps>;
     private sizeProvider: SizeProvider;
 
-    constructor(host: ReactiveControllerHost, spec: ChartPropsControllerSpec) {
-        host.addController(this);
+    constructor(host: SetupComponentHost, spec: ChartPropsControllerSpec) {
+        host.add(this);
 
         this.editorStateGate = spec.editorStateGate;
         this.propsGate = spec.propsGate;

packages/pluggableWidgets/custom-chart-web/src/controllers/CustomChartControllerHost.ts

@@ -1,17 +1,16 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
-import { ResizeController } from "./ResizeController";
+import { DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { ChartPropsController } from "./ChartPropsController";
-import { ControllerProps } from "./typings";
 import { PlotlyController } from "./PlotlyController";
+import { ResizeController } from "./ResizeController";
+import { ControllerProps } from "./typings";
 
 interface CustomChartControllerHostSpec {
     propsGate: DerivedPropsGate<ControllerProps>;
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class CustomChartControllerHost extends BaseControllerHost {
+export class CustomChartControllerHost extends SetupHost {
     resizeCtrl: ResizeController;
     chartPropsController: ChartPropsController;
     plotlyController: PlotlyController;

packages/pluggableWidgets/custom-chart-web/src/controllers/PlotlyController.ts

@@ -1,5 +1,5 @@
-import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 import { autorun } from "mobx";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 
 interface PropsProvider {
     mergedProps: ChartProps;
@@ -23,8 +23,6 @@ export class PlotlyController {
         } else {
             const chart = new PlotlyChart(target, this.propsProvider.mergedProps);
 
-            // const [updatePlotlyDebounced, abort] = debounce((props: ChartProps) => chart.update(props), 100);
-
             const dispose = autorun(
                 () => {
                     chart.update(this.propsProvider.mergedProps);

packages/pluggableWidgets/custom-chart-web/src/controllers/ResizeController.ts

@@ -1,14 +1,14 @@
-import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
 import { action, makeObservable, observable } from "mobx";
 
-export class ResizeController implements ReactiveController {
+export class ResizeController implements SetupComponent {
     width = 0;
     height = 0;
     private cleanup: undefined | (() => void) = undefined;
 
-    constructor(host: ReactiveControllerHost) {
-        host.addController(this);
+    constructor(host: SetupComponentHost) {
+        host.add(this);
 
         makeObservable(this, {
             width: observable,