Increase support for defining registry items using w() by allowing a label to be defined

src/widget-core/Registry.ts

@@ -7,13 +7,12 @@ import {
 	InjectorItem,
 	RegistryLabel,
 	WidgetBaseConstructor,
-	WidgetBaseInterface
+	WidgetBaseInterface,
+	ESMDefaultWidgetBase,
+	WidgetBaseConstructorFunction,
+	ESMDefaultWidgetBaseFunction
 } from './interfaces';
 
-export type WidgetBaseConstructorFunction = () => Promise<WidgetBaseConstructor>;
-
-export type ESMDefaultWidgetBaseFunction = () => Promise<ESMDefaultWidgetBase<WidgetBaseInterface>>;
-
 export type RegistryItem =
 	| WidgetBaseConstructor
 	| Promise<WidgetBaseConstructor>
@@ -92,11 +91,6 @@ export function isWidgetBaseConstructor<T extends WidgetBaseInterface>(item: any
 	return Boolean(item && item._type === WIDGET_BASE_TYPE);
 }
 
-export interface ESMDefaultWidgetBase<T> {
-	default: Constructor<T>;
-	__esModule?: boolean;
-}
-
 export function isWidgetConstructorDefaultExport<T>(item: any): item is ESMDefaultWidgetBase<T> {
 	return Boolean(
 		item &&

src/widget-core/WidgetBase.ts

@@ -16,7 +16,8 @@ import {
 	WidgetBaseInterface,
 	WidgetProperties,
 	WNode,
-	VNode
+	VNode,
+	LazyDefine
 } from './interfaces';
 import RegistryHandler from './RegistryHandler';
 import NodeHandler from './NodeHandler';
@@ -61,6 +62,10 @@ function toTextVNode(data: any): VNode {
 	};
 }
 
+function isLazyDefine(item: any): item is LazyDefine {
+	return Boolean(item && item.label);
+}
+
 /**
  * Main widget base for all widgets to extend
  */
@@ -299,9 +304,15 @@ export class WidgetBase<P = WidgetProperties, C extends DNode = DNode> implement
 					if (!id) {
 						id = `__lazy_widget_${lazyWidgetId++}`;
 						lazyWidgetIdMap.set(node.widgetConstructor, id);
-						this.registry.define(id, node.widgetConstructor());
+						this.registry.define(id, node.widgetConstructor);
 					}
 					node.widgetConstructor = id;
+				} else if (isLazyDefine(node.widgetConstructor)) {
+					const { label, registryItem } = node.widgetConstructor;
+					if (!this.registry.has(label)) {
+						this.registry.define(label, registryItem);
+					}
+					node.widgetConstructor = label;
 				}
 
 				node.widgetConstructor =

src/widget-core/d.ts

@@ -4,14 +4,15 @@ import {
 	DeferredVirtualProperties,
 	DNode,
 	VNode,
-	LazyWidget,
 	RegistryLabel,
 	VNodeProperties,
 	WidgetBaseInterface,
 	WNode,
 	DomOptions,
 	RenderResult,
-	DomVNode
+	DomVNode,
+	LazyWidget,
+	LazyDefine
 } from './interfaces';
 
 /**
@@ -146,12 +147,12 @@ export function w<W extends WidgetBaseInterface>(
 	children?: W['children']
 ): WNode<W>;
 export function w<W extends WidgetBaseInterface>(
-	widgetConstructor: Constructor<W> | RegistryLabel | LazyWidget<W>,
+	widgetConstructor: Constructor<W> | RegistryLabel | LazyWidget<W> | LazyDefine<W>,
 	properties: W['properties'],
 	children?: W['children']
 ): WNode<W>;
 export function w<W extends WidgetBaseInterface>(
-	widgetConstructorOrNode: Constructor<W> | RegistryLabel | WNode<W> | LazyWidget<W>,
+	widgetConstructorOrNode: Constructor<W> | RegistryLabel | WNode<W> | LazyWidget<W> | LazyDefine<W>,
 	properties: W['properties'],
 	children?: W['children']
 ): WNode<W> {

src/widget-core/interfaces.d.ts

@@ -353,7 +353,27 @@ export interface DomVNode extends VNode {
 	domNode: Text | Element;
 }
 
-export type LazyWidget<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> = () => Promise<Constructor<W>>;
+export interface ESMDefaultWidgetBase<T> {
+	default: Constructor<T>;
+	__esModule?: boolean;
+}
+
+export type WidgetBaseConstructorFunction<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> = () => Promise<
+	Constructor<W>
+>;
+
+export type ESMDefaultWidgetBaseFunction<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> = () => Promise<
+	ESMDefaultWidgetBase<W>
+>;
+
+export type LazyWidget<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> =
+	| WidgetBaseConstructorFunction<W>
+	| ESMDefaultWidgetBaseFunction<W>;
+
+export type LazyDefine<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> = {
+	label: string;
+	registryItem: LazyWidget<W>;
+};
 
 /**
  * Wrapper for `w`
@@ -362,7 +382,12 @@ export interface WNode<W extends WidgetBaseInterface = DefaultWidgetBaseInterfac
 	/**
 	 * Constructor to create a widget or string constructor label
 	 */
-	widgetConstructor: Constructor<W> | RegistryLabel | LazyWidget<W>;
+	widgetConstructor:
+		| Constructor<W>
+		| RegistryLabel
+		| WidgetBaseConstructorFunction<W>
+		| ESMDefaultWidgetBaseFunction<W>
+		| LazyDefine<W>;
 
 	/**
 	 * Properties to set against a widget instance

tests/widget-core/unit/Registry.ts

@@ -1,8 +1,9 @@
 const { registerSuite } = intern.getInterface('object');
 const { assert } = intern.getPlugin('chai');
-import Registry, { ESMDefaultWidgetBase } from '../../../src/widget-core/Registry';
+import Registry from '../../../src/widget-core/Registry';
 import { WidgetBase } from '../../../src/widget-core/WidgetBase';
 import Promise from '../../../src/shim/Promise';
+import { ESMDefaultWidgetBase } from '../../../src/widget-core/interfaces';
 
 const testPayload = () => ({});
 const testInjector = () => testPayload;

tests/widget-core/unit/WidgetBase.ts

@@ -171,7 +171,7 @@ describe('WidgetBase', () => {
 			assert.strictEqual((renderResult.children![0] as WNode).widgetConstructor, Bar);
 		});
 
-		it('Should support lazy widgets defined directly with w by adding them to the registry', () => {
+		it('Supports a lazy widget that returns an esm default module defined directly with w', () => {
 			let resolver: any;
 			const promise = new Promise<Constructor<WidgetBase>>((resolve) => {
 				resolver = resolve;
@@ -189,6 +189,64 @@ describe('WidgetBase', () => {
 			assert.deepEqual(initialNode.properties, {});
 			assert.strictEqual(initialNode.type, WNODE);
 			assert.isString(initialNode.widgetConstructor);
+			resolver({ default: WidgetBase, __esModule: true });
+			return promise.then(() => {
+				const resolvedNode = widget.__render__() as WNode;
+				assert.strictEqual(resolvedNode.bind, widget);
+				assert.deepEqual(resolvedNode.children, []);
+				assert.deepEqual(resolvedNode.properties, {});
+				assert.strictEqual(resolvedNode.type, WNODE);
+				assert.strictEqual(resolvedNode.widgetConstructor, WidgetBase);
+			});
+		});
+
+		it('Supports a lazy widget that returns a widget defined directly with w', () => {
+			let resolver: any;
+			const promise = new Promise<Constructor<WidgetBase>>((resolve) => {
+				resolver = resolve;
+			});
+			const lazyWidget = () => promise;
+			class MyWidget extends WidgetBase {
+				render() {
+					return w(lazyWidget, {});
+				}
+			}
+			const widget = new MyWidget();
+			const initialNode = widget.__render__() as WNode;
+			assert.strictEqual(initialNode.bind, widget);
+			assert.deepEqual(initialNode.children, []);
+			assert.deepEqual(initialNode.properties, {});
+			assert.strictEqual(initialNode.type, WNODE);
+			assert.isString(initialNode.widgetConstructor);
+			resolver(WidgetBase);
+			return promise.then(() => {
+				const resolvedNode = widget.__render__() as WNode;
+				assert.strictEqual(resolvedNode.bind, widget);
+				assert.deepEqual(resolvedNode.children, []);
+				assert.deepEqual(resolvedNode.properties, {});
+				assert.strictEqual(resolvedNode.type, WNODE);
+				assert.strictEqual(resolvedNode.widgetConstructor, WidgetBase);
+			});
+		});
+
+		it('Supports an explicit registry define that returns a widget with w', () => {
+			let resolver: any;
+			const promise = new Promise<Constructor<WidgetBase>>((resolve) => {
+				resolver = resolve;
+			});
+			const lazyWidget = () => promise;
+			class MyWidget extends WidgetBase {
+				render() {
+					return w({ label: 'foo', registryItem: lazyWidget }, {});
+				}
+			}
+			const widget = new MyWidget();
+			const initialNode = widget.__render__() as WNode;
+			assert.strictEqual(initialNode.bind, widget);
+			assert.deepEqual(initialNode.children, []);
+			assert.deepEqual(initialNode.properties, {});
+			assert.strictEqual(initialNode.type, WNODE);
+			assert.isString(initialNode.widgetConstructor);
 			resolver(WidgetBase);
 			return promise.then(() => {
 				const resolvedNode = widget.__render__() as WNode;
@@ -199,6 +257,35 @@ describe('WidgetBase', () => {
 				assert.strictEqual(resolvedNode.widgetConstructor, WidgetBase);
 			});
 		});
+
+		it('Supports an explicit registry define that returns esm default module with w', () => {
+			let resolver: any;
+			const promise = new Promise<Constructor<WidgetBase>>((resolve) => {
+				resolver = resolve;
+			});
+			const lazyWidget = () => promise;
+			class MyWidget extends WidgetBase {
+				render() {
+					return w({ label: 'foo', registryItem: lazyWidget }, {});
+				}
+			}
+			const widget = new MyWidget();
+			const initialNode = widget.__render__() as WNode;
+			assert.strictEqual(initialNode.bind, widget);
+			assert.deepEqual(initialNode.children, []);
+			assert.deepEqual(initialNode.properties, {});
+			assert.strictEqual(initialNode.type, WNODE);
+			assert.isString(initialNode.widgetConstructor);
+			resolver({ default: WidgetBase, __esModule: true });
+			return promise.then(() => {
+				const resolvedNode = widget.__render__() as WNode;
+				assert.strictEqual(resolvedNode.bind, widget);
+				assert.deepEqual(resolvedNode.children, []);
+				assert.deepEqual(resolvedNode.properties, {});
+				assert.strictEqual(resolvedNode.type, WNODE);
+				assert.strictEqual(resolvedNode.widgetConstructor, WidgetBase);
+			});
+		});
 	});
 
 	describe('__setProperties__', () => {