How to use the @dojo/framework/core/decorators/diffProperty.diffProperty function in @dojo/framework

/** Determines if this input is valid */
	valid?: { valid?: boolean; message?: string } | boolean;
	/** Value to set on the input */
	value?: string;
	/** Optional id string for the combobox, set on the text input */
	widgetId?: string;
}

// Enum used when traversing items using arrow keys
export enum Operation {
	increase = 1,
	decrease = -1
}

@theme(css)
@diffProperty('results', reference)
export class ComboBox extends I18nMixin(ThemedMixin(FocusMixin(WidgetBase))) {
	private _activeIndex = 0;
	private _ignoreBlur: boolean | undefined;
	private _idBase = uuid();
	private _menuHasVisualFocus = false;
	private _open: boolean | undefined;
	private _wasOpen: boolean | undefined;

	private _closeMenu() {
		this._open = false;
		this.invalidate();
	}

	private _getMenuId() {
		return `${this._idBase}-menu`;
	}

const scrollLeft = (event.target as HTMLElement).scrollLeft;
		const topRow = Math.round(scrollTop / this._rowHeight);
		const bottomRow = topRow + this._rowsInView;
		if (topRow <= this._start) {
			this._start = Math.max(0, topRow - this._renderPageSize);
			this._end = Math.min(totalRows, this._start + this._renderPageSize * 2);
		}
		if (bottomRow >= this._end) {
			this._start = Math.min(topRow, totalRows - this._renderPageSize);
			this._end = Math.min(totalRows, this._start + this._renderPageSize * 2);
		}
		onScroll && onScroll(scrollLeft);
		this.invalidate();
	}

	@diffProperty('totalRows', auto)
	protected _onDiffTotalRows() {
		this._start = 0;
		this._end = 100;
		this._resetScroll = true;
	}

	private _renderRows(start: number, end: number) {
		const {
			pageSize,
			fetcher,
			pages,
			columnConfig,
			placeholderRowRenderer = defaultPlaceholderRowRenderer,
			pageChange,
			totalRows,
			theme,

/** Size of the primary pane */
	size?: number;
}

const DEFAULT_SIZE = 100;

@theme(css)
export class SplitPane extends ThemedMixin(WidgetBase) {
	private _dragging: boolean | undefined;
	private _lastSize?: number;
	private _position = 0;
	private _collapsed = false;
	private _resizeResultOverridden = false;
	private _width = 0;

	@diffProperty('collapseWidth')
	@diffProperty('direction')
	protected collapseWidthDiff(
		oldProperties: SplitPaneProperties,
		{ collapseWidth, direction, onCollapse }: SplitPaneProperties
	) {
		if (
			direction === Direction.row ||
			(collapseWidth && collapseWidth < this._width && this._collapsed)
		) {
			this._collapsed = false;
			this._resizeResultOverridden = true;
			onCollapse && onCollapse(false);
		} else if (collapseWidth && (collapseWidth > this._width && !this._collapsed)) {
			this._collapsed = true;
			this._resizeResultOverridden = true;
			onCollapse && onCollapse(true);

/** Handler for scroll events */
	onScroll: (value: number) => void;
	/** Calculated column widths */
	columnWidths?: { [index: string]: number };
	/** handler for row selection */
	onRowSelect?: (index: number, type: SelectionType) => void;
	/** array of selected rows */
	selectedRows?: number[];
}

const defaultPlaceholderRowRenderer = (index: number) => {
	return w(PlaceholderRow, { key: index });
};

@theme(css)
@diffProperty('pages', reference)
export default class PaginatedBody<s> extends ThemedMixin(WidgetBase)&gt; {
	private _updater(rowNumber: number, columnId: string, value: any) {
		const page = Math.max(Math.ceil(rowNumber / this.properties.pageSize), 1);
		const pageItemNumber = rowNumber - (page - 1) * this.properties.pageSize;
		this.properties.updater(page, pageItemNumber, columnId, value);
	}

	private _onScroll(event: UIEvent) {
		const scrollLeft = (event.target as HTMLElement).scrollLeft;
		this.properties.onScroll(scrollLeft);
	}

	private _renderRows() {
		const {
			pageSize,
			fetcher,</s>

/** Handler for scroll events */
	onScroll: (value: number) => void;
	/** Calculated column widths */
	columnWidths?: { [index: string]: number };
	/** handler for row selection */
	onRowSelect?: (index: number, type: SelectionType) => void;
	/** array of selected rows */
	selectedRows?: number[];
}

const defaultPlaceholderRowRenderer = (index: number) => {
	return w(PlaceholderRow, { key: index });
};

@theme(css)
@diffProperty('pages', reference)
export default class PaginatedBody<s> extends ThemedMixin(WidgetBase)&gt; {
	private _updater(rowNumber: number, columnId: string, value: any) {
		const page = Math.max(Math.ceil(rowNumber / this.properties.pageSize), 1);
		const pageItemNumber = rowNumber - (page - 1) * this.properties.pageSize;
		this.properties.updater(page, pageItemNumber, columnId, value);
	}

	private _onScroll(event: UIEvent) {
		const scrollLeft = (event.target as HTMLElement).scrollLeft;
		this.properties.onScroll(scrollLeft);
	}

	private _renderRows() {
		const {
			pageSize,
			fetcher,</s>

];
	}

	protected getOptions() {
		if (this.options) {
			return this.options;
		}

		const { end, start, step } = this.properties;
		this.options = getOptions(start, end, step);
		return this.options;
	}

	@diffProperty('start', auto)
	@diffProperty('end', auto)
	@diffProperty('step', auto)
	protected onPropertiesChanged() {
		this.options = null;
	}

	protected renderCustomInput(): DNode {
		const {
			clearable,
			disabled,
			extraClasses,
			widgetId = this._uuid,
			inputProperties,
			valid,
			isOptionDisabled,
			label,
			labelHidden,
			openOnFocus,

required ? css.required : null
		];
	}

	protected getOptions() {
		if (this.options) {
			return this.options;
		}

		const { end, start, step } = this.properties;
		this.options = getOptions(start, end, step);
		return this.options;
	}

	@diffProperty('start', auto)
	@diffProperty('end', auto)
	@diffProperty('step', auto)
	protected onPropertiesChanged() {
		this.options = null;
	}

	protected renderCustomInput(): DNode {
		const {
			clearable,
			disabled,
			extraClasses,
			widgetId = this._uuid,
			inputProperties,
			valid,
			isOptionDisabled,
			label,
			labelHidden,

readOnly ? css.readonly : null,
			required ? css.required : null
		];
	}

	protected getOptions() {
		if (this.options) {
			return this.options;
		}

		const { end, start, step } = this.properties;
		this.options = getOptions(start, end, step);
		return this.options;
	}

	@diffProperty('start', auto)
	@diffProperty('end', auto)
	@diffProperty('step', auto)
	protected onPropertiesChanged() {
		this.options = null;
	}

	protected renderCustomInput(): DNode {
		const {
			clearable,
			disabled,
			extraClasses,
			widgetId = this._uuid,
			inputProperties,
			valid,
			isOptionDisabled,
			label,

size?: number;
}

const DEFAULT_SIZE = 100;

@theme(css)
export class SplitPane extends ThemedMixin(WidgetBase) {
	private _dragging: boolean | undefined;
	private _lastSize?: number;
	private _position = 0;
	private _collapsed = false;
	private _resizeResultOverridden = false;
	private _width = 0;

	@diffProperty('collapseWidth')
	@diffProperty('direction')
	protected collapseWidthDiff(
		oldProperties: SplitPaneProperties,
		{ collapseWidth, direction, onCollapse }: SplitPaneProperties
	) {
		if (
			direction === Direction.row ||
			(collapseWidth && collapseWidth < this._width && this._collapsed)
		) {
			this._collapsed = false;
			this._resizeResultOverridden = true;
			onCollapse && onCollapse(false);
		} else if (collapseWidth && (collapseWidth > this._width && !this._collapsed)) {
			this._collapsed = true;
			this._resizeResultOverridden = true;
			onCollapse && onCollapse(true);
		}

previousListeners[type][eventName] === undefined
				) {
					global[type].addEventListener(eventName, newListeners[type][eventName]);
					registeredListeners[eventName] = newListeners[type][eventName];
				}
			});
		this._listeners[type] = registeredListeners;
	}

	private _removeAllRegisteredListeners(type: 'window' | 'document') {
		Object.keys(this._listeners[type]).forEach((eventName) => {
			global[type].removeEventListener(eventName, this._listeners[type][eventName]);
		});
	}

	@diffProperty('window', shallow)
	protected onWindowListenersChange(
		previousListeners: RegisteredListeners,
		newListeners: RegisteredListeners
	) {
		this._registerListeners('window', previousListeners, newListeners);
	}

	@diffProperty('document', shallow)
	protected onDocumentListenersChange(
		previousListeners: RegisteredListeners,
		newListeners: RegisteredListeners
	) {
		this._registerListeners('document', previousListeners, newListeners);
	}

	protected onDetach() {