Support lazy widgets with a function that returns a promise in w()

src/widget-core/WidgetBase.ts

@@ -9,6 +9,7 @@ import {
 	BeforeRender,
 	DiffPropertyReaction,
 	DNode,
+	LazyWidget,
 	Render,
 	WidgetMetaBase,
 	WidgetMetaConstructor,
@@ -30,6 +31,8 @@ interface ReactionFunctionConfig {
 
 export type BoundFunctionData = { boundFunc: (...args: any[]) => any; scope: any };
 
+let lazyWidgetId = 0;
+const lazyWidgetIdMap = new WeakMap<LazyWidget, string>();
 const decoratorMap = new Map<Function, Map<string, any[]>>();
 const boundAuto = auto.bind(null);
 
@@ -278,6 +281,16 @@ export class WidgetBase<P = WidgetProperties, C extends DNode = DNode> implement
 				node.properties = { ...properties, ...node.properties };
 			}
 			if (isWNode(node) && !isWidgetBaseConstructor(node.widgetConstructor)) {
+				if (typeof node.widgetConstructor === 'function') {
+					let id = lazyWidgetIdMap.get(node.widgetConstructor);
+					if (!id) {
+						id = `__lazy_widget_${lazyWidgetId++}`;
+						lazyWidgetIdMap.set(node.widgetConstructor, id);
+						this.registry.define(id, node.widgetConstructor());
+					}
+					node.widgetConstructor = id;
+				}
+
 				node.widgetConstructor =
 					this.registry.get<WidgetBase>(node.widgetConstructor) || node.widgetConstructor;
 			}

src/widget-core/d.ts

@@ -5,6 +5,7 @@ import {
 	DeferredVirtualProperties,
 	DNode,
 	VNode,
+	LazyWidget,
 	RegistryLabel,
 	VNodeProperties,
 	WidgetBaseInterface,
@@ -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,
+	widgetConstructor: Constructor<W> | RegistryLabel | LazyWidget<W>,
 	properties: W['properties'],
 	children?: W['children']
 ): WNode<W>;
 export function w<W extends WidgetBaseInterface>(
-	widgetConstructorOrNode: Constructor<W> | RegistryLabel | WNode<W>,
+	widgetConstructorOrNode: Constructor<W> | RegistryLabel | WNode<W> | LazyWidget<W>,
 	properties: W['properties'],
 	children?: W['children']
 ): WNode<W> {

src/widget-core/interfaces.d.ts

@@ -353,14 +353,16 @@ export interface DomVNode extends VNode {
 	domNode: Text | Element;
 }
 
+export type LazyWidget<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> = () => Promise<Constructor<W>>;
+
 /**
  * Wrapper for `w`
  */
 export interface WNode<W extends WidgetBaseInterface = DefaultWidgetBaseInterface> {
 	/**
 	 * Constructor to create a widget or string constructor label
 	 */
-	widgetConstructor: Constructor<W> | RegistryLabel;
+	widgetConstructor: Constructor<W> | RegistryLabel | LazyWidget<W>;
 
 	/**
 	 * Properties to set against a widget instance

tests/widget-core/unit/WidgetBase.ts

@@ -3,9 +3,9 @@ const { assert } = intern.getPlugin('chai');
 import { spy, stub, SinonStub } from 'sinon';
 
 import { WidgetBase, noBind } from '../../../src/widget-core/WidgetBase';
-import { v, w } from '../../../src/widget-core/d';
+import { v, w, WNODE } from '../../../src/widget-core/d';
 import { WIDGET_BASE_TYPE } from '../../../src/widget-core/Registry';
-import { VNode, WidgetMetaConstructor, WidgetMetaBase, WNode } from '../../../src/widget-core/interfaces';
+import { Constructor, VNode, WidgetMetaConstructor, WidgetMetaBase, WNode } from '../../../src/widget-core/interfaces';
 import { handleDecorator } from '../../../src/widget-core/decorators/handleDecorator';
 import { diffProperty } from '../../../src/widget-core/decorators/diffProperty';
 import { Base } from '../../../src/widget-core/meta/Base';
@@ -171,6 +171,35 @@ describe('WidgetBase', () => {
 			assert.lengthOf(renderResult.children!, 1);
 			assert.strictEqual((renderResult.children![0] as WNode).widgetConstructor, Bar);
 		});
+
+		it('Should support lazy widgets defined directly with w by adding them to the registry', () => {
+			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);
+			});
+		});
 	});
 
 	describe('__setProperties__', () => {

tests/widget-core/unit/d.ts

@@ -110,6 +110,18 @@ registerSuite('d', {
 			assert.isTrue(isWNode(dNode));
 			assert.isFalse(isVNode(dNode));
 		},
+		'create WNode with lazy function'() {
+			const properties: any = { id: 'id', classes: ['world'] };
+			const promise = new Promise<any>(() => {});
+			const lazyFunction = () => promise;
+			const dNode = w(lazyFunction, properties, [w(WidgetBase, properties)]);
+			assert.equal(dNode.type, WNODE);
+			assert.strictEqual(dNode.widgetConstructor, lazyFunction);
+			assert.deepEqual(dNode.properties, { id: 'id', classes: ['world'] } as any);
+			assert.lengthOf(dNode.children, 1);
+			assert.isTrue(isWNode(dNode));
+			assert.isFalse(isVNode(dNode));
+		},
 		'should merge properties onto a WNode'() {
 			class Foo extends WidgetBase<{ foo: string; bar: number }> {}
 			const dNode = w(Foo, { foo: 'foo', bar: 1 }, ['child']);