@joist/observable 2.0.0-alpha.13 → 2.0.0-alpha.16

package/README.md

@@ -96,6 +96,6 @@ class TestElement extends HTMLElement {
     read: (val: string) => new Date(val),
     write: (val: Date) => val.toString()
   })
-  count: number = 0;
+  count: Date = 0;
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "2.0.0-alpha.13",
+  "version": "2.0.0-alpha.16",
   "main": "./target/build/lib.js",
   "module": "./target/build/lib.js",
   "exports": {
@@ -34,5 +34,5 @@
     "test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
     "build": "tsc -p tsconfig.build.json"
   },
-  "gitHead": "e9d8689c31099c04f23e0511270f45eca6ae4cea"
+  "gitHead": "4bf8cd9a23400b1a2d6c95fe5b9b5f5ae3c3b072"
 }

package/target/build/lib/attribute-parsers.d.ts

@@ -0,0 +1,6 @@
+export interface AttributeParser<T> {
+    read(val: string): T;
+    write(val: T): string;
+}
+export declare type AttributeParsers = Record<string, AttributeParser<unknown>>;
+export declare function defaultParser(): AttributeParser<boolean | string>;

package/target/build/lib/attribute-parsers.js

@@ -0,0 +1,12 @@
+export function defaultParser() {
+    return {
+        read(val) {
+            // if a boolean assume such
+            if (val === 'true' || val === 'false') {
+                return val === 'true';
+            }
+            return val;
+        },
+        write: String,
+    };
+}

package/target/build/lib/attribute.d.ts

@@ -1,8 +1,5 @@
+import { AttributeParser } from './attribute-parsers';
 export declare function getObservableAttributes(c: typeof HTMLElement): Array<string>;
-export declare function getAttributeParsers<T extends typeof HTMLElement>(c: T): Record<string, AttributeParser>;
-export interface AttributeParser {
-    read(val: string): any;
-    write(val: unknown): string;
-}
-export declare function attr<T extends HTMLElement>(p: Partial<AttributeParser>): (t: T, key: string) => void;
+export declare function getAttributeParsers<T extends typeof HTMLElement>(c: T): Record<string, AttributeParser<unknown>>;
+export declare function attr<T extends HTMLElement>(p: Partial<AttributeParser<unknown>>): (t: T, key: string) => void;
 export declare function attr<T extends HTMLElement>(t: T, key: string): void;

package/target/build/lib/attribute.js

@@ -1,13 +1,7 @@
+import { defaultParser } from './attribute-parsers';
 export function getObservableAttributes(c) {
     return Reflect.get(c, 'observedAttributes') || [];
 }
-function defaultRead(val) {
-    // if a boolean assume such
-    if (val === 'true' || val === 'false') {
-        return val === 'true';
-    }
-    return val;
-}
 export function getAttributeParsers(c) {
     const parsers = Reflect.get(c, 'attributeParsers') || {};
     return parsers;
@@ -36,12 +30,10 @@ function defineAttribute(target, key) {
     }
     const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
     if (attributeParsers) {
-        attributeParsers[key] = { read: defaultRead, write: String };
+        attributeParsers[key] = defaultParser();
     }
     else {
-        const attributeParsers = {};
-        attributeParsers[key] = { read: defaultRead, write: String };
-        Reflect.set(target.constructor, 'attributeParsers', attributeParsers);
+        Reflect.set(target.constructor, 'attributeParsers', { [key]: defaultParser() });
     }
     return void 0;
 }

package/target/build/lib/observable.js

@@ -32,24 +32,21 @@ export function observable(Base) {
             Object.defineProperties(this, descriptors);
         }
         connectedCallback() {
-            attributes.forEach((key) => {
-                const { write } = parsers[key];
-                const val = this.getAttribute(key);
-                if (val === null) {
+            for (let i = 0; i < attributes.length; i++) {
+                const key = attributes[i];
+                if (this.getAttribute(key) === null) {
                     const propVal = Reflect.get(this, key);
-                    const parsedVal = write(propVal);
-                    if (propVal !== undefined && propVal !== null && propVal !== '' && val !== parsedVal) {
-                        this.setAttribute(key, parsedVal);
+                    if (propVal !== undefined && propVal !== null && propVal !== '') {
+                        this.setAttribute(key, parsers[key].write(propVal));
                     }
                 }
-            });
+            }
             if (super.connectedCallback) {
                 super.connectedCallback();
             }
         }
         attributeChangedCallback(name, oldVal, newVal) {
-            const { read } = parsers[name];
-            Reflect.set(this, name, read(newVal));
+            Reflect.set(this, name, parsers[name].read(newVal));
             if (super.attributeChangedCallback) {
                 super.attributeChangedCallback(name, oldVal, newVal);
             }
@@ -58,10 +55,9 @@ export function observable(Base) {
             if (this instanceof HTMLElement) {
                 for (let change in changes) {
                     if (attributes.includes(change)) {
-                        const { write } = parsers[change];
-                        const value = write(changes[change].value);
+                        const value = parsers[change].write(changes[change].value);
                         if (value !== this.getAttribute(change)) {
-                            this.setAttribute(change, write(changes[change].value));
+                            this.setAttribute(change, value);
                         }
                     }
                 }
@@ -104,17 +100,19 @@ function definePropChange(key, propChange) {
         // If there is no previous change defined set it up
         this.propChange = Promise.resolve().then(() => {
             // run onPropChanges here. This makes sure we capture all changes
-            // keep track of whether or not this is the first time a given property has changes
+            const changes = {};
+            // Copy changes and keep track of whether or not this is the first time a given property has changes
             for (let change in this.propChanges) {
-                this.propChanges[change].firstChange = !this.initializedChanges.has(change);
+                changes[change] = this.propChanges[change];
+                changes[change].firstChange = !this.initializedChanges.has(change);
                 this.initializedChanges.add(change);
             }
+            // clear out before calling to account for changes made INSIDE of the onPropertyChanged callback
+            this.propChange = null;
+            this.propChanges = {};
             if (this.onPropertyChanged) {
-                this.onPropertyChanged(this.propChanges);
+                this.onPropertyChanged(changes);
             }
-            // reset for next time
-            this.propChanges = {};
-            this.propChange = null;
         });
     }
     return this.propChange;