initialize attrs on attributeChangedCallback

If attrs are used, and attributeChangedCallback fires before
connectedCallback, attrs will be in their initially set state, rather
than reflected from the attribute value, likewise attributes will be
null rather than their attr value.

Initializing attrs on the first attributeChangedCallback call fixes
this.

Co-authored-by: Kristján Oddsson <[email protected]>

Author: keithamus

src/controller.ts

@@ -1,4 +1,4 @@
-import {initializeInstance, initializeClass} from './core.js'
+import {initializeInstance, initializeClass, initializeAttributeChanged} from './core.js'
 import type {CustomElement} from './custom-element.js'
 /**
  * Controller is a decorator to be used over a class that extends HTMLElement.
@@ -11,5 +11,14 @@ export function controller(classObject: CustomElement): void {
   classObject.prototype.connectedCallback = function (this: HTMLElement) {
     initializeInstance(this, connect)
   }
+  const attributeChanged = classObject.prototype.attributeChangedCallback
+  classObject.prototype.attributeChangedCallback = function (
+    this: HTMLElement,
+    name: string,
+    oldValue: unknown,
+    newValue: unknown
+  ) {
+    initializeAttributeChanged(this, name, oldValue, newValue, attributeChanged)
+  }
   initializeClass(classObject)
 }

src/core.ts

@@ -17,6 +17,19 @@ export function initializeInstance(instance: HTMLElement, connect?: (this: HTMLE
   if (instance.shadowRoot) bindShadow(instance.shadowRoot)
 }
 
+export function initializeAttributeChanged(
+  instance: HTMLElement,
+  name: string,
+  oldValue: unknown,
+  newValue: unknown,
+  attributeChangedCallback?: (this: HTMLElement, name: string, oldValue: unknown, newValue: unknown) => void
+): void {
+  initializeAttrs(instance)
+  if (name !== 'data-catalyst' && attributeChangedCallback) {
+    attributeChangedCallback.call(instance, name, oldValue, newValue)
+  }
+}
+
 export function initializeClass(classObject: CustomElement): void {
   defineObservedAttributes(classObject)
   register(classObject)

test/controller.js

@@ -1,4 +1,5 @@
 import {controller} from '../lib/controller.js'
+import {attr} from '../lib/attr.js'
 
 describe('controller', () => {
   let root
@@ -102,4 +103,35 @@ describe('controller', () => {
     // eslint-disable-next-line github/unescaped-html-literal
     root.innerHTML = '<parent-element><child-element></child-element></parent-element>'
   })
+
+  describe('attrs', () => {
+    let attrValues = []
+    class AttributeTestElement extends HTMLElement {
+      foo = 'baz'
+      attributeChangedCallback() {
+        attrValues.push(this.getAttribute('data-foo'))
+        attrValues.push(this.foo)
+      }
+    }
+    controller(AttributeTestElement)
+    attr(AttributeTestElement.prototype, 'foo')
+
+    beforeEach(() => {
+      attrValues = []
+    })
+
+    it('initializes attrs as attributes in attributeChangedCallback', () => {
+      const el = document.createElement('attribute-test')
+      el.foo = 'bar'
+      el.attributeChangedCallback()
+      expect(attrValues).to.eql(['bar', 'bar'])
+    })
+
+    it('initializes attributes as attrs in attributeChangedCallback', () => {
+      const el = document.createElement('attribute-test')
+      el.setAttribute('data-foo', 'bar')
+      el.attributeChangedCallback()
+      expect(attrValues).to.eql(['bar', 'bar'])
+    })
+  })
 })