From 511d9968441714cffc962d8ba86473b7e08ebdb5 Mon Sep 17 00:00:00 2001
From: Anthony Gubler <agubler@sitepen.com>
Date: Tue, 5 Nov 2019 14:45:43 +0000
Subject: [PATCH] Ensure that diff property call backs are called immediately
 when registered (#572)

* failing unit test for diff property on the first render

* Call diff properties immediately when they are registered

* prettier
---
 src/core/vdom.ts        |  1 +
 tests/core/unit/vdom.ts | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/core/vdom.ts b/src/core/vdom.ts
index 6add848f8..cfb4d64bc 100644
--- a/src/core/vdom.ts
+++ b/src/core/vdom.ts
@@ -763,6 +763,7 @@ export const diffProperty = factory(({ id }) => {
 			widgetMeta.customDiffProperties = widgetMeta.customDiffProperties || new Set();
 			const propertyDiffMap = widgetMeta.customDiffMap.get(id) || new Map();
 			if (!propertyDiffMap.has(propertyName)) {
+				diff({}, widgetMeta.properties);
 				propertyDiffMap.set(propertyName, diff);
 				widgetMeta.customDiffProperties.add(propertyName);
 			}
diff --git a/tests/core/unit/vdom.ts b/tests/core/unit/vdom.ts
index 6c927cb80..038865c35 100644
--- a/tests/core/unit/vdom.ts
+++ b/tests/core/unit/vdom.ts
@@ -3672,7 +3672,6 @@ jsdomDescribe('vdom', () => {
 						let counter = 0;
 						const Foo = createWidget(({ middleware }) => {
 							middleware.diffProperty('key', (current: any, properties: any) => {
-								assert.deepEqual(current, { key: 'foo' });
 								assert.deepEqual(properties, { key: 'foo' });
 								middleware.invalidator();
 							});
@@ -3723,6 +3722,25 @@ jsdomDescribe('vdom', () => {
 						resolvers.resolve();
 						assert.strictEqual(root.outerHTML, '<div><div><button></button><div>first</div></div></div>');
 					});
+
+					it('should call diff property for the first render', () => {
+						const createWidget = create({ diffProperty });
+						let counter = 0;
+						const Foo = createWidget(({ middleware }) => {
+							middleware.diffProperty('key', () => {
+								counter++;
+							});
+							return v('div', [`${counter}`]);
+						});
+						const App = createWidget(() => {
+							return v('div', [v('button', {}), Foo({ key: 'foo' })]);
+						});
+						const r = renderer(() => App({}));
+						const root = document.createElement('div');
+						r.mount({ domNode: root });
+						assert.strictEqual(root.outerHTML, '<div><div><button></button><div>1</div></div></div>');
+						sendEvent(root.childNodes[0].childNodes[0] as HTMLButtonElement, 'click');
+					});
 				});
 			});
 		});