@joist/observable 2.0.0-alpha.14 → 2.0.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.17",
   "main": "./target/build/lib.js",
   "module": "./target/build/lib.js",
   "exports": {
@@ -12,15 +12,16 @@
     "target/build"
   ],
   "sideEffects": false,
-  "description": "Dependency Injection in ~800 bytes",
+  "description": "Monitor and respond to object changes",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/deebloo/joist.git"
   },
   "keywords": [
     "TypeScript",
-    "DI",
-    "Dependency Injection"
+    "Observable",
+    "WebComponents",
+    "Reactive"
   ],
   "author": "deebloo",
   "license": "MIT",
@@ -34,5 +35,5 @@
     "test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
     "build": "tsc -p tsconfig.build.json"
   },
-  "gitHead": "ee3d50d547903a8ddefbd66a700ab11df8fecfaf"
+  "gitHead": "5caed0681c6fca2599a51420d48d344f68871ab4"
 }

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

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

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

@@ -0,0 +1,19 @@
+export function defaultParser(mapTo) {
+    return {
+        read(val) {
+            // if a boolean assume such
+            if (val === 'true' || val === 'false') {
+                return val === 'true';
+            }
+            return val;
+        },
+        write: String,
+        mapTo,
+    };
+}
+export function propNameToAttrName(prop) {
+    return prop
+        .split(/(?=[A-Z])/)
+        .join('-')
+        .toLowerCase();
+}

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,12 +1,7 @@
+import { defaultParser, propNameToAttrName, } 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;
+    const attrs = Reflect.get(c, 'observedAttributes') || [];
+    return attrs.map(propNameToAttrName);
 }
 export function getAttributeParsers(c) {
     const parsers = Reflect.get(c, 'attributeParsers') || {};
@@ -14,11 +9,13 @@ export function getAttributeParsers(c) {
 }
 export function attr(targetOrParser, key) {
     if (targetOrParser instanceof HTMLElement) {
-        return defineAttribute(targetOrParser, key);
+        const attrName = propNameToAttrName(key);
+        return defineAttribute(targetOrParser, attrName, key);
     }
     return (target, key) => {
         const parser = targetOrParser;
-        defineAttribute(target, key);
+        const attrName = propNameToAttrName(key);
+        defineAttribute(target, attrName, key);
         const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
         attributeParsers[key].read = parser.read || attributeParsers[key].read;
         attributeParsers[key].write = parser.write || attributeParsers[key].write;
@@ -26,22 +23,20 @@ export function attr(targetOrParser, key) {
         return void 0;
     };
 }
-function defineAttribute(target, key) {
+function defineAttribute(target, attrName, propName) {
     const observedAttributes = Reflect.get(target.constructor, 'observedAttributes');
     if (observedAttributes) {
-        observedAttributes.push(key);
+        observedAttributes.push(attrName);
     }
     else {
-        Reflect.set(target.constructor, 'observedAttributes', [key]);
+        Reflect.set(target.constructor, 'observedAttributes', [attrName]);
     }
     const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
     if (attributeParsers) {
-        attributeParsers[key] = { read: defaultRead, write: String };
+        attributeParsers[attrName] = defaultParser(propName);
     }
     else {
-        const attributeParsers = {};
-        attributeParsers[key] = { read: defaultRead, write: String };
-        Reflect.set(target.constructor, 'attributeParsers', attributeParsers);
+        Reflect.set(target.constructor, 'attributeParsers', { [attrName]: defaultParser(propName) });
     }
     return void 0;
 }

package/target/build/lib/observable.js

@@ -1,4 +1,5 @@
 import { getAttributeParsers, getObservableAttributes } from './attribute';
+import { propNameToAttrName } from './attribute-parsers';
 export class Change {
     constructor(value, previousValue, firstChange) {
         this.value = value;
@@ -32,23 +33,23 @@ export function observable(Base) {
             Object.defineProperties(this, descriptors);
         }
         connectedCallback() {
-            attributes.forEach((key) => {
-                const { write } = parsers[key];
-                const attrVal = this.getAttribute(key);
-                if (attrVal === null) {
-                    const propVal = Reflect.get(this, key);
+            for (let i = 0; i < attributes.length; i++) {
+                const key = attributes[i];
+                const { write, mapTo } = parsers[key];
+                if (this.getAttribute(key) === null) {
+                    const propVal = Reflect.get(this, mapTo);
                     if (propVal !== undefined && propVal !== null && propVal !== '') {
                         this.setAttribute(key, write(propVal));
                     }
                 }
-            });
+            }
             if (super.connectedCallback) {
                 super.connectedCallback();
             }
         }
         attributeChangedCallback(name, oldVal, newVal) {
-            const { read } = parsers[name];
-            Reflect.set(this, name, read(newVal));
+            const { read, mapTo } = parsers[name];
+            Reflect.set(this, mapTo, read(newVal));
             if (super.attributeChangedCallback) {
                 super.attributeChangedCallback(name, oldVal, newVal);
             }
@@ -57,10 +58,10 @@ 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);
-                        if (value !== this.getAttribute(change)) {
-                            this.setAttribute(change, write(changes[change].value));
+                        const value = parsers[change].write(changes[change].value);
+                        const attrName = propNameToAttrName(change);
+                        if (value !== this.getAttribute(attrName)) {
+                            this.setAttribute(attrName, value);
                         }
                     }
                 }
@@ -103,17 +104,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;