@peektravel/app-utilities 0.5.2 → 0.5.3

package/dist/ui/index.cjs

@@ -162,9 +162,43 @@ function classes(...parts) {
 function reflectControlValue(control, value) {
   if (control && control.value !== value) control.value = value;
 }
+function attrNameFor(propName) {
+  return propName.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function reflectToAttribute(el, attr, value) {
+  if (value === null || value === void 0 || value === false) {
+    el.removeAttribute(attr);
+  } else if (value === true) {
+    el.setAttribute(attr, "");
+  } else if (typeof value === "object") {
+    el.setAttribute(attr, JSON.stringify(value));
+  } else {
+    el.setAttribute(attr, String(value));
+  }
+}
+function addReactSafeSetters(ctor) {
+  const observed = new Set(
+    ctor.observedAttributes ?? []
+  );
+  let proto = ctor.prototype;
+  while (proto && proto !== OdyElement.prototype && proto !== HTMLElement.prototype && proto !== Object.prototype) {
+    for (const [name, desc] of Object.entries(Object.getOwnPropertyDescriptors(proto))) {
+      if (typeof desc.get !== "function" || desc.set) continue;
+      const attr = attrNameFor(name);
+      const set = observed.has(attr) ? function reflectingSetter(value) {
+        reflectToAttribute(this, attr, value);
+      } : function ignoringSetter() {
+      };
+      Object.defineProperty(proto, name, { ...desc, set });
+    }
+    proto = Object.getPrototypeOf(proto);
+  }
+}
 function define(tag, ctor) {
   if (typeof customElements === "undefined") return;
-  if (!customElements.get(tag)) customElements.define(tag, ctor);
+  if (customElements.get(tag)) return;
+  addReactSafeSetters(ctor);
+  customElements.define(tag, ctor);
 }
 
 // src/ui/icons-data.ts