Support deferred properties (#736)

matt-gadd · web-flow · commit 8be9b2910c56 · 2017-11-02T13:59:34.000+01:00
* update package-lock.json

* add deferred property callback

* add tests, add inserted

* more tests
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/d.ts b/src/d.ts
@@ -2,6 +2,7 @@ import Symbol from '@dojo/shim/Symbol';
 import {
 	Constructor,
 	DefaultWidgetBaseInterface,
+	DeferredVirtualProperties,
 	DNode,
 	HNode,
 	RegistryLabel,
@@ -77,19 +78,26 @@ export function w<W extends WidgetBaseInterface>(widgetConstructor: Constructor<
 /**
  * Wrapper function for calls to create HNodes.
  */
-export function v(tag: string, properties: VirtualDomProperties, children?: DNode[]): HNode;
+export function v(tag: string, properties: VirtualDomProperties | DeferredVirtualProperties, children?: DNode[]): HNode;
 export function v(tag: string, children: undefined | DNode[]): HNode;
 export function v(tag: string): HNode;
-export function v(tag: string, propertiesOrChildren: VirtualDomProperties | DNode[] = {}, children: undefined | DNode[] = undefined): HNode {
-		let properties: VirtualDomProperties = propertiesOrChildren;
+export function v(tag: string, propertiesOrChildren: VirtualDomProperties | DeferredVirtualProperties | DNode[] = {}, children: undefined | DNode[] = undefined): HNode {
+		let properties: VirtualDomProperties | DeferredVirtualProperties = propertiesOrChildren;
+		let deferredPropertiesCallback;
 
 		if (Array.isArray(propertiesOrChildren)) {
 			children = propertiesOrChildren;
 			properties = {};
 		}
 
+		if (typeof properties === 'function') {
+			deferredPropertiesCallback = properties;
+			properties = {};
+		}
+
 		return {
 			tag,
+			deferredPropertiesCallback,
 			children,
 			properties,
 			type: HNODE
diff --git a/src/interfaces.d.ts b/src/interfaces.d.ts
@@ -69,6 +69,7 @@ export interface ProjectorOptions {
 export interface ProjectionOptions extends ProjectorOptions {
 	readonly namespace?: string;
 	eventHandlerInterceptor?: (propertyName: string, eventHandler: Function, domNode: Node, properties: VirtualDomProperties) => Function | undefined;
+	deferredRenderCallbacks: Function [];
 	afterRenderCallbacks: Function[];
 	merge: boolean;
 }
@@ -78,6 +79,8 @@ export interface Projection {
 	update(updatedDNode: DNode): void;
 }
 
+export type DeferredVirtualProperties = (inserted: boolean) => VirtualDomProperties;
+
 export interface VirtualDomProperties {
 	/**
 	 * The animation to perform when this node is added to an already existing parent.
@@ -258,6 +261,11 @@ export interface HNode {
 	 */
 	properties: VirtualDomProperties;
 
+	/**
+	 * Deferred callback for HNode properties
+	 */
+	deferredPropertiesCallback?: DeferredVirtualProperties;
+
 	/**
 	 * The tag of the HNode
 	 */
diff --git a/src/vdom.ts b/src/vdom.ts
@@ -50,6 +50,13 @@ export interface InternalHNode extends HNode {
 	 */
 	children?: InternalDNode[];
 
+	inserted?: boolean;
+
+	/**
+	 * Bag used to still decorate properties on a deferred properties callback
+	 */
+	decoratedDeferredProperties?: VirtualDomProperties;
+
 	/**
 	 * DOM element
 	 */
@@ -107,12 +114,14 @@ const DEFAULT_PROJECTION_OPTIONS: ProjectionOptions = {
 		enter: missingTransition,
 		exit: missingTransition
 	},
+	deferredRenderCallbacks: [],
 	afterRenderCallbacks: [],
 	merge: false
 };
 
 function applyDefaultProjectionOptions(projectorOptions?: Partial<ProjectionOptions>): ProjectionOptions {
 	projectorOptions = extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
+	projectorOptions.deferredRenderCallbacks = [];
 	projectorOptions.afterRenderCallbacks = [];
 	return projectorOptions as ProjectionOptions;
 }
@@ -596,12 +605,16 @@ function initPropertiesAndChildren(
 	projectionOptions: ProjectionOptions
 ) {
 	addChildren(domNode, dnode.children, projectionOptions, parentInstance, undefined);
+	if (typeof dnode.deferredPropertiesCallback === 'function') {
+		addDeferredProperties(dnode, projectionOptions);
+	}
 	setProperties(domNode, dnode.properties, projectionOptions);
 	if (dnode.properties.key !== null && dnode.properties.key !== undefined) {
 		projectionOptions.afterRenderCallbacks.push(() => {
 			parentInstance.emit({ type: 'element-created', key: dnode.properties.key, element: domNode });
 		});
 	}
+	dnode.inserted = true;
 }
 
 function createDom(
@@ -713,6 +726,7 @@ function updateDom(previous: any, dnode: InternalDNode, projectionOptions: Proje
 		const domNode = previous.domNode!;
 		let textUpdated = false;
 		let updated = false;
+		dnode.inserted = previous.inserted;
 		if (dnode.tag === '') {
 			if (dnode.text !== previous.text) {
 				const newDomNode = domNode.ownerDocument.createTextNode(dnode.text!);
@@ -731,6 +745,11 @@ function updateDom(previous: any, dnode: InternalDNode, projectionOptions: Proje
 				dnode.children = children;
 				updated = updateChildren(dnode, domNode, previous.children, children, parentInstance, projectionOptions) || updated;
 			}
+
+			if (typeof dnode.deferredPropertiesCallback === 'function') {
+				addDeferredProperties(dnode, projectionOptions);
+			}
+
 			updated = updateProperties(domNode, previous.properties, dnode.properties, projectionOptions) || updated;
 
 			if (dnode.properties.key !== null && dnode.properties.key !== undefined) {
@@ -747,6 +766,32 @@ function updateDom(previous: any, dnode: InternalDNode, projectionOptions: Proje
 	}
 }
 
+function addDeferredProperties(hnode: InternalHNode, projectionOptions: ProjectionOptions) {
+	// transfer any properties that have been passed - as these must be decorated properties
+	hnode.decoratedDeferredProperties = hnode.properties;
+	const properties = hnode.deferredPropertiesCallback!(!!hnode.inserted);
+	hnode.properties = { ...properties, ...hnode.decoratedDeferredProperties };
+	projectionOptions.deferredRenderCallbacks.push(() => {
+		const properties = {
+			...hnode.deferredPropertiesCallback!(!!hnode.inserted),
+			...hnode.decoratedDeferredProperties
+		};
+		updateProperties(hnode.domNode!, hnode.properties, properties, projectionOptions);
+		hnode.properties = properties;
+	});
+}
+
+function runDeferredRenderCallbacks(projectionOptions: ProjectionOptions) {
+	if (projectionOptions.deferredRenderCallbacks.length) {
+		global.requestAnimationFrame(() => {
+			while (projectionOptions.deferredRenderCallbacks.length) {
+				const callback = projectionOptions.deferredRenderCallbacks.shift();
+				callback && callback();
+			}
+		});
+	}
+}
+
 function runAfterRenderCallbacks(projectionOptions: ProjectionOptions) {
 	if (global.requestIdleCallback) {
 		global.requestIdleCallback(() => {
@@ -777,6 +822,7 @@ function createProjection(dnode: InternalHNode, parentInstance: WidgetBase, proj
 			projectionOptions.afterRenderCallbacks.push(() => {
 				parentInstance.emit({ type: 'widget-created' });
 			});
+			runDeferredRenderCallbacks(projectionOptions);
 			runAfterRenderCallbacks(projectionOptions);
 			dnode = updatedHNode as InternalHNode;
 		},
@@ -792,6 +838,7 @@ export const dom = {
 		finalProjectorOptions.afterRenderCallbacks.push(() => {
 			instance.emit({ type: 'widget-created' });
 		});
+		runDeferredRenderCallbacks(finalProjectorOptions);
 		runAfterRenderCallbacks(finalProjectorOptions);
 		return createProjection(decoratedNode, instance, finalProjectorOptions);
 	},
@@ -802,6 +849,7 @@ export const dom = {
 		finalProjectorOptions.afterRenderCallbacks.push(() => {
 			instance.emit({ type: 'widget-created' });
 		});
+		runDeferredRenderCallbacks(finalProjectorOptions);
 		runAfterRenderCallbacks(finalProjectorOptions);
 		return createProjection(decoratedNode, instance, finalProjectorOptions);
 	},
@@ -814,6 +862,7 @@ export const dom = {
 		finalProjectorOptions.afterRenderCallbacks.push(() => {
 			instance.emit({ type: 'widget-created' });
 		});
+		runDeferredRenderCallbacks(finalProjectorOptions);
 		runAfterRenderCallbacks(finalProjectorOptions);
 		return createProjection(decoratedNode, instance, finalProjectorOptions);
 	},
@@ -824,6 +873,7 @@ export const dom = {
 		finalProjectorOptions.afterRenderCallbacks.push(() => {
 			instance.emit({ type: 'widget-created' });
 		});
+		runDeferredRenderCallbacks(finalProjectorOptions);
 		runAfterRenderCallbacks(finalProjectorOptions);
 		element.parentNode!.removeChild(element);
 		return createProjection(decoratedNode, instance, finalProjectorOptions);
diff --git a/tests/unit/d.ts b/tests/unit/d.ts
@@ -138,6 +138,15 @@ registerSuite('d', {
 			assert.equal(hNode.type, HNODE);
 			assert.isTrue(isHNode(hNode));
 			assert.isFalse(isWNode(hNode));
+		},
+		'create HNode wrapper with deferred properties'() {
+			const props = () => {
+				return { a: 'a' };
+			};
+			const hNode = v('div', props);
+
+			assert.deepEqual(hNode.properties, {});
+			assert.strictEqual(hNode.deferredPropertiesCallback, props);
 		}
 	},
 	decorator: {
diff --git a/tests/unit/vdom.ts b/tests/unit/vdom.ts
@@ -1126,6 +1126,92 @@ describe('vdom', () => {
 
 	});
 
+	describe('deferred properties', () => {
+		it('can call a callback on render and on the next rAF for hnode properties', () => {
+			let deferredCallbackCount = 0;
+			let renderCount = 0;
+
+			const renderFunction = () => {
+				renderCount++;
+				const div = v('div', (inserted) => {
+					return {
+						inserted,
+						deferredCallbackCount: ++deferredCallbackCount
+					};
+				});
+				div.properties.renderCount = renderCount;
+				return div;
+			};
+
+			const projection = dom.create(renderFunction(), projectorStub, { eventHandlerInterceptor: noopEventHandlerInterceptor });
+			const element: any = projection.domNode;
+
+			assert.strictEqual(element.deferredCallbackCount, 1);
+			assert.strictEqual(element.renderCount, 1);
+			assert.isFalse(element.inserted);
+
+			// resolve the rAF so deferred properties will run
+			resolvers.resolve();
+
+			assert.strictEqual(element.deferredCallbackCount, 2);
+			assert.strictEqual(element.renderCount, 1);
+			assert.isTrue(element.inserted);
+
+			projection.update(renderFunction());
+
+			assert.strictEqual(element.deferredCallbackCount, 3);
+			assert.strictEqual(element.renderCount, 2);
+			assert.isTrue(element.inserted);
+
+			// resolve the rAF so deferred properties will run
+			resolvers.resolve();
+
+			assert.strictEqual(element.deferredCallbackCount, 4);
+			assert.strictEqual(element.renderCount, 2);
+			assert.isTrue(element.inserted);
+		});
+
+		it('should still allow properties to be decorated on a DNode', () => {
+			let foo = 'bar';
+
+			const renderFunction = () => {
+				const div = v('div', (inserted) => {
+					return {
+						foo: 'this should not override the decorated property',
+						another: 'property'
+					};
+				});
+				div.properties.foo = foo;
+				return div;
+			};
+
+			const projection = dom.create(renderFunction(), projectorStub, { eventHandlerInterceptor: noopEventHandlerInterceptor });
+			const element: any = projection.domNode;
+
+			assert.strictEqual(element.getAttribute('foo'), 'bar');
+			assert.strictEqual(element.getAttribute('another'), 'property');
+
+			// resolve the rAF so deferred properties will run
+			resolvers.resolve();
+
+			assert.strictEqual(element.getAttribute('foo'), 'bar');
+			assert.strictEqual(element.getAttribute('another'), 'property');
+
+			foo = 'qux';
+
+			projection.update(renderFunction());
+
+			assert.strictEqual(element.getAttribute('foo'), 'qux');
+			assert.strictEqual(element.getAttribute('another'), 'property');
+
+			// resolve the rAF so deferred properties will run
+			resolvers.resolve();
+
+			assert.strictEqual(element.getAttribute('foo'), 'qux');
+			assert.strictEqual(element.getAttribute('another'), 'property');
+		});
+	});
+
 	describe('children', () => {
 
 		it('can remove child nodes', () => {
