From ee1e6b3bda7bc69f69031fea1525d4c0bcb9db13 Mon Sep 17 00:00:00 2001
From: xPapay <papay.lukas@gmail.com>
Date: Mon, 11 Apr 2022 22:27:45 +0200
Subject: [PATCH] Preserve props set after vdom creation

This fixes the issue when the complex prop was not preserved
across connectectedCallback calls.

When complex prop is set as first property then everything
worked as expected. But when complex prop is set after other prop
then it was not stored into this._props and that caused missing it
in the implicit connectedCallback call. Because in connectedCallback
we set props from attributes (simple props) and from this._props.
---
 src/index.js       |  1 +
 src/index.test.jsx | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/index.js b/src/index.js
index 42318d7..a280b74 100644
--- a/src/index.js
+++ b/src/index.js
@@ -28,6 +28,7 @@ export default function register(Component, tagName, propNames, options) {
 			},
 			set(v) {
 				if (this._vdom) {
+					this._props[name] = v;
 					this.attributeChangedCallback(name, null, v);
 				} else {
 					if (!this._props) this._props = {};
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 00da646..7e71935 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 other 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 }) {