Merge pull request #142 from matthewp/attr

Allow the "title" attribute to be reflected
matthewp · Sep 27, 2019 · 26e2000 · 26e2000
2 parents 1680cbc + 8c00852
commit 26e2000
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/Makefile b/Makefile
@@ -7,7 +7,7 @@ all: haunted.js web.js
 lib/*.js: src/*.ts
 	$(TRANSPILE)
 	# Add ".js" extension to module imports
-	gsed -i -E "s/from '.\/(.*?)'/from '.\/\1.js'/" lib/*.js
+	sed -i -E "s/from '.\/(.*?)'/from '.\/\1.js'/" lib/*.js
 
 haunted.js: lib/*.js
 	$(COMPILE) -f es -o $@ -e lit-html lib/haunted.js

diff --git a/src/component.ts b/src/component.ts
@@ -74,7 +74,10 @@ function makeComponent(render: RenderFunction): Creator {
         this._scheduler.teardown();
       }
 
-      attributeChangedCallback(name: string, _: unknown, newValue: unknown): void {
+      attributeChangedCallback(name: string, oldValue: unknown, newValue: unknown): void {
+        if(oldValue === newValue) {
+          return;
+        }
         let val = newValue === '' ? true : newValue;
         Reflect.set(this, toCamelCase(name), val);
       }
@@ -101,10 +104,17 @@ function makeComponent(render: RenderFunction): Creator {
       },
 
       set(target, key: string, value, receiver): boolean {
+        let desc: PropertyDescriptor | undefined;
         if(key in target) {
+          desc = Object.getOwnPropertyDescriptor(target, key);
+          if(desc && desc.set) {
+            desc.set.call(receiver, value);
+            return true;
+          }
+
           Reflect.set(target, key, value);
         }
-        let desc: PropertyDescriptor;
+
         if(typeof key === 'symbol' || key[0] === '_') {
           desc = {
             enumerable: true,

diff --git a/test/test-attrs.js b/test/test-attrs.js
@@ -26,6 +26,25 @@ describe('Observed attributes', () => {
     teardown();
   });
 
+  it('Can observe the "title" attribute', async () => {
+    const tag = 'attrs-test-title';
+
+    function app() {
+      this.setAttribute('title', 'bar');
+    }
+
+    app.observedAttributes = ['title'];
+
+    customElements.define(tag, component(app));
+
+    let teardown = attach(tag);
+    await cycle();
+
+    let inst = document.querySelector(tag);
+    assert.equal(inst.getAttribute('title'), 'bar', 'on the instance');
+    teardown();
+  });
+
   it('Trigger rerenders while declared as an option', async () => {
     const tag = 'attrs-options-test';