Ensure that diff property call backs are called immediately when regi…

…stered (#572) (#573)

* failing unit test for diff property on the first render

* Call diff properties immediately when they are registered

* prettier

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);
 			}

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');
+					});
 				});
 			});
 		});