Description
Hi. Firstly, thank you all for your amazing work on the preactjs project!
When I set a complex property (callback) AFTER at least one other property
Then the complex property become undefined.
All complex properties become undefined, unless the complex property is the first property set.
I wrote failing test to explain better. (See attached diff file)
TLDR;
// this works as expected
<dummy-button zz={() => console.log('zz')} aa="123" ></dummy-button>
// and this doesn't
<dummy-button aa="123" zz={() => console.log('zz')} ></dummy-button>
// zz become eventually undefinedAlso one other thing I've noticed when I tried to debug this is that connectedCallback is called multiple times and the complex properties are reset right after the connectedCallback is called.
I don't know yet why connectedCallback is called multiple times, but I if it's called I would expect disconnectedCallback to be called before connectedCallback is called second time. But it's never called.
When I forcefully prevent the connecting new vdom if we already connected one, then it works as expected. But I would rather understand what causes the element to connect to dom second time, and if we should set there the same properties we already set (same as we do in attributeChangedCallback when we cloning the previous vdom).
version: 4.2.1
Git diff file:
preact-custom-element-bug.txt
diff --git a/src/index.js b/src/index.js
index 42318d7..41374e8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -63,6 +63,7 @@ function ContextProvider(props) {
}
function connectedCallback() {
+ // if (this._vdom) return; // prevent from resetting vdom if we already have one, and connected callback was called second time
// Obtain a reference to the previous context by pinging the nearest
// higher up node that was rendered with Preact. If one Preact component
// higher up receives our ping, it will set the `detail` property of
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 00da646..fba77d3 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -130,6 +130,33 @@ describe('web components', () => {
});
assert.equal(other, 1);
});
+
+ it('sets complex property after simple property', () => {
+ const el = document.createElement('x-dummy-button');
+
+ // set simple property first
+ el.text = 'click me';
+
+ let clicks = 0;
+ const onClick = () => clicks++;
+ el.onClick = onClick;
+
+ assert.equal(el.text, 'click me');
+ assert.equal(el.onClick, onClick);
+
+ root.appendChild(el);
+ assert.equal(
+ root.innerHTML,
+ '<x-dummy-button text="click me"><button>click me</button></x-dummy-button>'
+ );
+
+ act(() => {
+ el.querySelector('button').click();
+ });
+
+ assert.equal(el.onClick, onClick);
+ assert.equal(clicks, 1);
+ });
});
function Foo({ text, children }) {