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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "2.0.0-alpha.16",
+  "version": "2.0.0-alpha.19",
   "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": "4bf8cd9a23400b1a2d6c95fe5b9b5f5ae3c3b072"
+  "gitHead": "c83cae0c4733a4c5d79d52b683ec49001bd2b645"
 }

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

@@ -1,6 +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(): AttributeParser<boolean | string>;
+export declare function defaultParser(mapTo: string): AttributeParser<boolean | string>;
+export declare function propNameToAttrName(prop: string): string;

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

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

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

@@ -1,5 +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<unknown>>;
-export declare function attr<T extends HTMLElement>(p: Partial<AttributeParser<unknown>>): (t: T, key: string) => void;
+export declare function attr<T>(p: Partial<AttributeParser<T>>): <E extends HTMLElement>(t: E, key: string) => void;
 export declare function attr<T extends HTMLElement>(t: T, key: string): void;

package/target/build/lib/attribute.js

@@ -1,39 +1,42 @@
-import { defaultParser } from './attribute-parsers';
+import { defaultParser, propNameToAttrName, } from './attribute-parsers';
 export function getObservableAttributes(c) {
-    return Reflect.get(c, 'observedAttributes') || [];
+    const attrs = Reflect.get(c, 'observedAttributes') || [];
+    return attrs.map(propNameToAttrName);
 }
 export function getAttributeParsers(c) {
     const parsers = Reflect.get(c, 'attributeParsers') || {};
     return parsers;
 }
 export function attr(targetOrParser, key) {
-    if (targetOrParser instanceof HTMLElement) {
-        return defineAttribute(targetOrParser, key);
+    if (targetOrParser instanceof HTMLElement && typeof key === 'string') {
+        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;
+        attributeParsers[attrName].read = parser.read || attributeParsers[attrName].read;
+        attributeParsers[attrName].write = parser.write || attributeParsers[attrName].write;
         Reflect.set(target.constructor, 'attributeParsers', attributeParsers);
         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] = defaultParser();
+        attributeParsers[attrName] = defaultParser(propName);
     }
     else {
-        Reflect.set(target.constructor, 'attributeParsers', { [key]: defaultParser() });
+        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;
@@ -34,10 +35,11 @@ export function observable(Base) {
         connectedCallback() {
             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, key);
+                    const propVal = Reflect.get(this, mapTo);
                     if (propVal !== undefined && propVal !== null && propVal !== '') {
-                        this.setAttribute(key, parsers[key].write(propVal));
+                        this.setAttribute(key, write(propVal));
                     }
                 }
             }
@@ -46,7 +48,8 @@ export function observable(Base) {
             }
         }
         attributeChangedCallback(name, oldVal, newVal) {
-            Reflect.set(this, name, parsers[name].read(newVal));
+            const { read, mapTo } = parsers[name];
+            Reflect.set(this, mapTo, read(newVal));
             if (super.attributeChangedCallback) {
                 super.attributeChangedCallback(name, oldVal, newVal);
             }
@@ -56,8 +59,9 @@ export function observable(Base) {
                 for (let change in changes) {
                     if (attributes.includes(change)) {
                         const value = parsers[change].write(changes[change].value);
-                        if (value !== this.getAttribute(change)) {
-                            this.setAttribute(change, value);
+                        const attrName = propNameToAttrName(change);
+                        if (value !== this.getAttribute(attrName)) {
+                            this.setAttribute(attrName, value);
                         }
                     }
                 }