diff --git a/src/core/vdom.ts b/src/core/vdom.ts index 7f4a09fd7..dd694ec93 100644 --- a/src/core/vdom.ts +++ b/src/core/vdom.ts @@ -878,6 +878,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.tsx b/tests/core/unit/vdom.tsx index 20d26aeb8..bef7a638f 100644 --- a/tests/core/unit/vdom.tsx +++ b/tests/core/unit/vdom.tsx @@ -3790,7 +3790,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(); }); @@ -3841,6 +3840,25 @@ jsdomDescribe('vdom', () => { resolvers.resolve(); assert.strictEqual(root.outerHTML, '
first
'); }); + + 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, '
1
'); + sendEvent(root.childNodes[0].childNodes[0] as HTMLButtonElement, 'click'); + }); }); }); });