Update for @dojo/widget-core changes (#306)

* update dojo deps

* initial changes for latest widget-core

* fix unit tests for widget-core changes

* address feedback from review

* do not use local dependency :doh:

package.json

@@ -21,16 +21,16 @@
     "test": "grunt test"
   },
   "peerDependencies": {
-    "@dojo/core": "beta2",
-    "@dojo/has": "beta2",
-    "@dojo/i18n": "beta2",
-    "@dojo/shim": "beta2",
-    "@dojo/widget-core": "beta2"
+    "@dojo/core": "next",
+    "@dojo/has": "next",
+    "@dojo/i18n": "next",
+    "@dojo/shim": "next",
+    "@dojo/widget-core": "next"
   },
   "devDependencies": {
-    "@dojo/interfaces": "beta2",
-    "@dojo/loader": "beta2",
-    "@dojo/test-extras": "beta2",
+    "@dojo/interfaces": "next",
+    "@dojo/loader": "next",
+    "@dojo/test-extras": "next",
     "@types/chai": "3.4.*",
     "@types/glob": "5.0.*",
     "@types/grunt": "0.4.*",

src/calendar/Calendar.ts

@@ -1,8 +1,6 @@
-import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
+import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
-import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
 import { v, w } from '@dojo/widget-core/d';
-import { reference } from '@dojo/widget-core/diff';
 import { DNode, Constructor } from '@dojo/widget-core/interfaces';
 import uuid from '@dojo/core/uuid';
 import { Keys } from '../common/util';
@@ -18,7 +16,7 @@ import * as iconCss from '../common/styles/icons.m.css';
  *
  * Properties that can be set on a Calendar component
  *
- * @property customDateCell    Custom widget constructor for the date cell. Should use CalendarCell as a base.
+ * @property CustomDateCell    Custom widget constructor for the date cell. Should use CalendarCell as a base.
  * @property labels            Customize or internationalize accessible text for the Calendar widget
  * @property month             Set the currently displayed month, 0-based
  * @property monthNames        Customize or internationalize full month names and abbreviations
@@ -32,7 +30,7 @@ import * as iconCss from '../common/styles/icons.m.css';
  * @property onDateSelect      Function called when the user selects a date
  */
 export interface CalendarProperties extends ThemeableProperties {
-	customDateCell?: Constructor<CalendarCell>;
+	CustomDateCell?: Constructor<CalendarCell>;
 	labels?: CalendarMessages;
 	month?: number;
 	monthNames?: { short: string; long: string; }[];
@@ -88,30 +86,6 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
 	private _focusedDay = 1;
 	private _monthLabelId = uuid();
 	private _popupOpen = false;
-	private _registry: WidgetRegistry;
-
-	constructor() {
-		/* istanbul ignore next: disregard transpiled `super`'s "else" block */
-		super();
-
-		this._registry = this._createRegistry(CalendarCell);
-		this.getRegistries().add(this._registry);
-	}
-
-	@diffProperty('customDateCell', reference)
-	protected onPropertiesChanged(previousProperties: any, newProperties: any) {
-		const { customDateCell = CalendarCell } = newProperties;
-		const registry = this._createRegistry(customDateCell);
-		this.getRegistries().replace(this._registry, registry);
-		this._registry = registry;
-	}
-
-	private _createRegistry(customDateCell: any) {
-		const registry = new WidgetRegistry();
-		registry.define('date-cell', customDateCell);
-
-		return registry;
-	}
 
 	private _getMonthLength(month: number, year: number) {
 		const lastDate = new Date(year, month + 1, 0);
@@ -260,7 +234,7 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
 			month,
 			year
 		} = this._getMonthYear();
-		const { theme = {} } = this.properties;
+		const { theme = {}, CustomDateCell = CalendarCell } = this.properties;
 
 		const currentMonthLength = this._getMonthLength(month, year);
 		const previousMonthLength = this._getMonthLength(month - 1, year);
@@ -305,7 +279,7 @@ export default class Calendar extends CalendarBase<CalendarProperties> {
 					isSelectedDay = false;
 				}
 
-				days.push(w<CalendarCell>('date-cell', {
+				days.push(w(CustomDateCell, {
 					key: `date-${week * 7 + i}`,
 					callFocus: this._callDateFocus && isCurrentMonth && date === this._focusedDay,
 					date,

src/calendar/README.md

@@ -57,7 +57,7 @@ class MyCalendarCell extends CalendarCell {
 [ ... ]
 
 w(Calendar, {
-	customDateCell: MyCalendarCell,
+	CustomDateCell: MyCalendarCell,
 	month: this.state.month,
 	selectedDate: this.state.selectedDate,
 	year: this.state.year,

src/calendar/createCalendarElement.ts

@@ -24,7 +24,7 @@ export default function createCalendarElement(): CustomElementDescriptor {
 			}
 		],
 		properties: [
-			{ propertyName: 'customDateCell' },
+			{ propertyName: 'CustomDateCell' },
 			{ propertyName: 'labels' },
 			{ propertyName: 'monthNames' },
 			{ propertyName: 'weekdayNames' },

src/calendar/tests/unit/Calendar.ts

@@ -22,7 +22,7 @@ const compareId = compareProperty((value: any) => {
 let dateIndex = -1;
 const expectedDateCell = function(widget: any, date: number, active: boolean) {
 	dateIndex++;
-	return w<CalendarCell>('date-cell', {
+	return w(CalendarCell, {
 		key: `date-${dateIndex}`,
 		callFocus: false,
 		date,
@@ -186,7 +186,7 @@ registerSuite({
 
 	'Renders with custom properties'() {
 		widget.setProperties({
-			customDateCell: CalendarCell,
+			CustomDateCell: CalendarCell,
 			labels: DEFAULT_LABELS,
 			month: testDate.getMonth(),
 			monthNames: DEFAULT_MONTHS,

src/combobox/ComboBox.ts

@@ -1,10 +1,10 @@
 import uuid from '@dojo/core/uuid';
 import { v, w } from '@dojo/widget-core/d';
-import { DNode, WNode } from '@dojo/widget-core/interfaces';
+import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces';
 import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
-import { WidgetBase, diffProperty } from '@dojo/widget-core/WidgetBase';
+import { WidgetBase } from '@dojo/widget-core/WidgetBase';
+import { diffProperty } from '@dojo/widget-core/decorators/diffProperty';
 import { reference } from '@dojo/widget-core/diff';
-import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
 import ResultItem from './ResultItem';
 import ResultMenu from './ResultMenu';
 import { Keys } from '../common/util';
@@ -21,8 +21,8 @@ import * as iconCss from '../common/styles/icons.m.css';
  *
  * @property autoBlur           Determines whether the input should blur after value selection
  * @property clearable          Determines whether the input should be able to be cleared
- * @property customResultItem   Can be used to render a custom result
- * @property customResultMenu   Can be used to render a custom result menu
+ * @property CustomResultItem   Can be used to render a custom result
+ * @property CustomResultMenu   Can be used to render a custom result menu
  * @property disabled           Prevents user interaction and styles content accordingly
  * @property getResultLabel     Can be used to get the text label of a result based on the underlying result object
  * @property inputProperties    TextInput properties to set on the underlying input
@@ -43,8 +43,8 @@ import * as iconCss from '../common/styles/icons.m.css';
 export interface ComboBoxProperties extends ThemeableProperties {
 	autoBlur?: boolean;
 	clearable?: boolean;
-	customResultItem?: any;
-	customResultMenu?: any;
+	CustomResultItem?: Constructor<ResultItem>;
+	CustomResultMenu?: Constructor<ResultMenu>;
 	disabled?: boolean;
 	getResultLabel?(result: any): string;
 	inputProperties?: TextInputProperties;
@@ -73,6 +73,7 @@ export const ComboBoxBase = ThemeableMixin(WidgetBase);
 
 @theme(css)
 @theme(iconCss)
+@diffProperty('results', reference)
 export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
 	private _activeIndex: number | undefined;
 	private _focused: boolean;
@@ -82,29 +83,12 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
 	private _menuId = uuid();
 	private _open: boolean;
 	private _wasOpen: boolean;
-	private _registry: WidgetRegistry;
-
-	constructor() {
-		/* istanbul ignore next: disregard transpiled `super`'s "else" block */
-		super();
-
-		this._registry = this._createRegistry(ResultItem, ResultMenu);
-		this.getRegistries().add(this._registry);
-	}
 
 	private _closeMenu() {
 		this._open = false;
 		this.invalidate();
 	}
 
-	private _createRegistry(customResultItem: any, customResultMenu: any) {
-		const registry = new WidgetRegistry();
-		registry.define('result-item', customResultItem);
-		registry.define('result-menu', customResultMenu);
-
-		return registry;
-	}
-
 	private _getResultLabel(result: any) {
 		const { getResultLabel } = this.properties;
 
@@ -307,35 +291,21 @@ export default class ComboBox extends ComboBoxBase<ComboBoxProperties> {
 		}
 	}
 
-	@diffProperty('customResultItem', reference)
-	@diffProperty('customResultMenu', reference)
-	@diffProperty('results', reference)
-	protected onPropertiesChanged(previousProperties: any, newProperties: any) {
-		const {
-			customResultItem = ResultItem,
-			customResultMenu = ResultMenu
-		} = newProperties;
-
-		const registry = this._createRegistry(customResultItem, customResultMenu);
-		this.getRegistries().replace(this._registry, registry);
-		this._registry = registry;
-	}
-
 	protected renderMenu(results: any[]): WNode | null {
-		const { theme = {}, isResultDisabled } = this.properties;
+		const { theme = {}, isResultDisabled, CustomResultMenu = ResultMenu, CustomResultItem } = this.properties;
 
 		if (results.length === 0 || !this._open) {
 			return null;
 		}
 
-		return w<ResultMenu>('result-menu', {
+		return w(CustomResultMenu, {
 			getResultLabel: this._getResultLabel,
+			CustomResultItem,
 			id: this._menuId,
 			isResultDisabled,
 			onResultMouseDown: this._onResultMouseDown,
 			onResultMouseEnter: this._onResultMouseEnter,
 			onResultMouseUp: this._onResultMouseUp,
-			registry: this._registry,
 			results,
 			selectedIndex: this._activeIndex,
 			theme

src/combobox/README.md

@@ -141,7 +141,7 @@ class CustomResultItem extends ResultItem {
 w(ComboBox, {
 	results: ['foo', 'bar', 'baz'],
 	value: this.state.currentValue,,
-	customResultItem: CustomResultItem,
+	CustomResultItem: CustomResultItem,
 	onChange: (value: string) => this.setState({ currentValue: value })
 });
 ```

src/combobox/ResultMenu.ts

@@ -1,7 +1,7 @@
 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
 import { v, w } from '@dojo/widget-core/d';
-import { DNode, WNode } from '@dojo/widget-core/interfaces';
+import { Constructor, DNode, WNode } from '@dojo/widget-core/interfaces';
 import ResultItem from './ResultItem';
 
 import * as css from './styles/comboBox.m.css';
@@ -21,6 +21,7 @@ import * as css from './styles/comboBox.m.css';
  * @property selectedIndex          Position of the selected result in the list of results
  */
 export interface ResultMenuProperties extends ThemeableProperties {
+	CustomResultItem?: Constructor<ResultItem>;
 	getResultLabel(result: any): string;
 	id?: string;
 	isResultDisabled?(result: any): boolean;
@@ -41,6 +42,7 @@ export default class ResultMenu extends ResultMenuBase<ResultMenuProperties> {
 
 	render(): DNode {
 		const {
+			CustomResultItem = ResultItem,
 			getResultLabel,
 			id,
 			isResultDisabled = () => false,
@@ -52,7 +54,7 @@ export default class ResultMenu extends ResultMenuBase<ResultMenuProperties> {
 			theme = {}
 		} = this.properties;
 
-		const resultElements = this.renderResults(results.map((result, i) => w<ResultItem>('result-item', {
+		const resultElements = this.renderResults(results.map((result, i) => w(CustomResultItem, {
 			getResultLabel,
 			index: i,
 			isDisabled: isResultDisabled,

src/combobox/createComboBoxElement.ts

@@ -52,10 +52,10 @@ export default function createComboBoxElement(): CustomElementDescriptor {
 				propertyName: 'inputProperties'
 			},
 			{
-				propertyName: 'customResultItem'
+				propertyName: 'CustomResultItem'
 			},
 			{
-				propertyName: 'customResultMenu'
+				propertyName: 'CustomResultMenu'
 			},
 			{
 				propertyName: 'getResultLabel'

src/combobox/example/index.ts

@@ -197,7 +197,7 @@ export class App extends WidgetBase<WidgetProperties> {
 				},
 				getResultLabel: (result: any) => result.value,
 				onRequestResults: this.onRequestResults,
-				customResultItem: CustomResultItem,
+				CustomResultItem,
 				results: this._results,
 				value: this._valueThree,
 				inputProperties: {
@@ -216,7 +216,7 @@ export class App extends WidgetBase<WidgetProperties> {
 				onRequestResults: this.onRequestResults,
 				results: this._results,
 				value: this._valueFour,
-				customResultMenu: CustomResultMenu,
+				CustomResultMenu,
 				inputProperties: {
 					placeholder: 'Enter a value'
 				},

src/combobox/tests/unit/ComboBox.ts

@@ -111,10 +111,10 @@ registerSuite({
 			results: ['a', 'b']
 		});
 		comboBox.__setProperties__({
-			customResultItem: ResultItem
+			CustomResultItem: ResultItem
 		});
 		comboBox.__setProperties__({
-			customResultMenu: ResultMenu
+			CustomResultMenu: ResultMenu
 		});
 		comboBox.__setProperties__({
 			onBlur: () => called = true
@@ -133,8 +133,8 @@ registerSuite({
 		comboBox.__setProperties__({
 			results: ['1', '2'],
 			required: true,
-			customResultItem: ResultItem,
-			customResultMenu: ResultMenu
+			CustomResultItem: ResultItem,
+			CustomResultMenu: ResultMenu
 		});
 
 		(<any> comboBox)._onArrowClick();

src/combobox/tests/unit/ResultMenu.ts

@@ -3,16 +3,10 @@ import * as assert from 'intern/chai!assert';
 import { VNode } from '@dojo/interfaces/vdom';
 import ResultMenu from '../../ResultMenu';
 import { assign } from '@dojo/core/lang';
-import WidgetRegistry from '@dojo/widget-core/WidgetRegistry';
-import ResultItem from '../../ResultItem';
-
-const registry = new WidgetRegistry();
-registry.define('result-item', ResultItem);
 
 function props(props = {}) {
 	return assign({
 		results: ['a', 'b'],
-		registry: registry,
 		selectedIndex: 0,
 		getResultLabel: () => '',
 		onResultMouseEnter: () => true,

src/label/Label.ts

@@ -1,7 +1,6 @@
 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { DNode } from '@dojo/widget-core/interfaces';
 import { ThemeableMixin, ThemeableProperties, theme } from '@dojo/widget-core/mixins/Themeable';
-import { WidgetRegistry } from '@dojo/widget-core/WidgetRegistry';
 import { v } from '@dojo/widget-core/d';
 import { assign } from '@dojo/core/lang';
 import * as css from './styles/label.m.css';
@@ -34,7 +33,6 @@ const labelDefaults = {
  * @property label      Label settings for form label text, position, and visibility
  */
 export interface LabelProperties extends ThemeableProperties {
-	registry?: WidgetRegistry;
 	forId?: string;
 	label: string | LabelOptions;
 }