From 64b73676cb1670189af983cb9b8c945e6fc89c6a Mon Sep 17 00:00:00 2001
From: DarkWiiPlayer <darkwiiplayer@hotmail.com>
Date: Sat, 23 Dec 2023 21:16:07 +0100
Subject: [PATCH] Make state components update attributes on state change

---
 package.json |  2 +-
 state.js     | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 6f87715..cc543f1 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "skooma",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"author": "darkwiiplayer",
 	"license": "Unlicense",
 	"main": "skooma.js",
diff --git a/state.js b/state.js
index c74c28a..34176d1 100644
--- a/state.js
+++ b/state.js
@@ -203,8 +203,11 @@ export class StoredState extends State {
 
 const attributeObserver = new MutationObserver(mutations => {
 	for (const {type, target, attributeName: name} of mutations) {
-		if (type == "attributes")
-			target.state.proxy[name] = target.getAttribute(name)
+		if (type == "attributes") {
+			const next = target.getAttribute(name)
+			if (target.state.proxy[name] !== next)
+				target.state.proxy[name] = next
+		}
 	}
 })
 
@@ -214,6 +217,12 @@ export const component = (generator, name) => {
 		constructor() {
 			super()
 			this.state = new State(Object.fromEntries([...this.attributes].map(attribute => [attribute.name, attribute.value])))
+			this.state.addEventListener("change", event => {
+				for (const [name, value] of event.changes) {
+					if (this.getAttribute(name) !== value)
+						this.setAttribute(name, value)
+				}
+			})
 			attributeObserver.observe(this, {attributes: true})
 			this.replaceChildren(generator(this.state))
 		}