@joist/observable 2.0.0-beta.0 → 2.0.0-beta.12

package/README.md

@@ -6,16 +6,16 @@ Decorating a class with `@observable` means that instances of that class will BE
 #### Installation:
 
 ```BASH
-npm i @joist/observable@alpha
+npm i @joist/observablebeta
 ```
 
 #### Example:
 
 ```TS
-import { observable, observer, OnChange, Changes } from '@joist/observable';
+import { observable, observer, OnPropertyChanged, Changes } from '@joist/observable';
 
 @observable
-class State implements OnChange {
+class State implements OnPropertyChanged {
   // Changes to these will trigger callback
   @observe todos: string[] = [];
   @observe userName?: string;
@@ -23,7 +23,7 @@ class State implements OnChange {
   // changes to this will not
   someValue: boolean = false;
 
-  onChange(changes: Changes) {
+  onPropertyChanged(changes: Changes) {
     console.log(changes);
     // { todos: { value: ['Build Shit'], previousValue: [] }, userName: { value: 'Danny Blue', previousValue: undefined } }
   }
@@ -40,7 +40,7 @@ state.userName = 'Danny Blue'
 If you want to externally monitor your class for changes you can extend event target and dispatch events. (available in both node and the browser)
 
 ```TS
-import { observable, observer, OnChange, Changes } from '@joist/observable';
+import { observable, observer, OnPropertyChanged, Changes } from '@joist/observable';
 
 class StateChangeEvent extends Event {
   consetructor(public changes: Changes) {
@@ -49,7 +49,7 @@ class StateChangeEvent extends Event {
 }
 
 @observable
-class State extends EventTarget implements OnChange {
+class State extends EventTarget implements OnPropertyChanged {
   // Changes to these will trigger callback
   @observe todos: string[] = [];
   @observe userName?: string;
@@ -57,8 +57,8 @@ class State extends EventTarget implements OnChange {
   // changes to this will not
   someValue: boolean = false;
 
-  onChange(changes: Changes) {
-    this.dispatchEvent(new StateChangeEvent());
+  onPropertyChanged(changes: Changes) {
+    this.dispatchEvent(new StateChangeEvent(changes));
   }
 }
 
@@ -71,3 +71,31 @@ state.addEventListener('statechange', (e) => {
 state.todos = [...state.todos, 'Build Shit'];
 state.userName = 'Danny Blue'
 ```
+
+#### Attributes
+
+If you are using @observable with custom elements it is very likely that you will want to read from and write to attributes.
+Joist accounts for this by giving you an `@attr` decorator.
+
+```TS
+import { observable, observe, attr} from '@joist/observable';
+
+@observable
+class TestElement extends HTMLElement {
+  // reads as a string and writes directly to the name attribute
+  @observe @attr name = '';
+
+  // reads as a number and writes back a string
+  @observe
+  @attr({ read: Number })
+  count: number = 0;
+
+  // reads as a Date object and writes back a string
+  @observe
+  @attr<Date>({
+    read: (val) => new Date(val),
+    write: (val) => val.toString()
+  })
+  count = new Date();
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.12",
   "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": "c78191a2cab50ec09abee20f688b245d235948d1"
+  "gitHead": "1962273dca1744f0227fd76c143b07d93566e809"
 }

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

@@ -0,0 +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>(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

@@ -0,0 +1,41 @@
+import { defaultParser, propNameToAttrName, } from './attribute-parsers';
+export function getObservableAttributes(c) {
+    return Reflect.get(c, 'observedAttributes') || [];
+}
+export function getAttributeParsers(c) {
+    const parsers = Reflect.get(c, 'attributeParsers') || {};
+    return parsers;
+}
+export function attr(targetOrParser, key) {
+    if (targetOrParser instanceof HTMLElement && typeof key === 'string') {
+        const attrName = propNameToAttrName(key);
+        return defineAttribute(targetOrParser, attrName, key);
+    }
+    return (target, key) => {
+        const parser = targetOrParser;
+        const attrName = propNameToAttrName(key);
+        defineAttribute(target, attrName, key);
+        const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
+        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, attrName, propName) {
+    const observedAttributes = Reflect.get(target.constructor, 'observedAttributes');
+    if (observedAttributes) {
+        observedAttributes.push(attrName);
+    }
+    else {
+        Reflect.set(target.constructor, 'observedAttributes', [attrName]);
+    }
+    const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
+    if (attributeParsers) {
+        attributeParsers[attrName] = defaultParser(propName);
+    }
+    else {
+        Reflect.set(target.constructor, 'attributeParsers', { [attrName]: defaultParser(propName) });
+    }
+    return void 0;
+}

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

@@ -5,16 +5,16 @@ export declare class Change<T = any> {
     constructor(value: T, previousValue: T | undefined, firstChange: boolean);
 }
 export declare type Changes = Record<string | symbol, Change>;
-export interface OnChange {
-    onChange(changes: Changes): void;
+export interface OnPropertyChanged {
+    onPropertyChanged(changes: Changes): void;
 }
-export declare function readPropertyDefs(c: any): Array<string | symbol>;
+export declare function getObservableProperties(c: any): Array<string | symbol>;
 export interface ObservableBase {
     propChanges: Changes;
     propChange: Promise<void> | null;
     initializedChanges: Set<string | symbol>;
-    onChange?: (changes: Changes) => void;
     definePropChange(key: string | symbol, propChange: Change): Promise<void>;
+    onPropertyChanged?(changes: Changes): void;
 }
 export declare function observe(target: any, key: string): void;
 export declare function observable<T extends new (...args: any[]) => any>(Base: T): {
@@ -24,6 +24,9 @@ export declare function observable<T extends new (...args: any[]) => any>(Base:
         propChange: Promise<void> | null;
         initializedChanges: Set<string | symbol>;
         definePropChange: typeof definePropChange;
+        connectedCallback(this: HTMLElement & any): void;
+        attributeChangedCallback(this: HTMLElement & any, name: string, oldVal: string, newVal: string): void;
+        onPropertyChanged(changes: Changes): void;
     };
 } & T;
 declare function definePropChange(this: ObservableBase, key: string | symbol, propChange: Change): Promise<void>;

package/target/build/lib/observable.js

@@ -1,3 +1,5 @@
+import { getAttributeParsers, getObservableAttributes } from './attribute';
+import { propNameToAttrName } from './attribute-parsers';
 export class Change {
     constructor(value, previousValue, firstChange) {
         this.value = value;
@@ -5,17 +7,19 @@ export class Change {
         this.firstChange = firstChange;
     }
 }
-const PROPERTY_KEY = 'props';
-export function readPropertyDefs(c) {
-    return c[PROPERTY_KEY] || {};
+const PROPERTY_KEY = 'observedProperties';
+export function getObservableProperties(c) {
+    return c[PROPERTY_KEY] || [];
 }
 export function observe(target, key) {
     target.constructor[PROPERTY_KEY] = target.constructor[PROPERTY_KEY] || [];
     target.constructor[PROPERTY_KEY].push(key);
 }
 export function observable(Base) {
-    const props = readPropertyDefs(Base);
-    const descriptors = createPropertyDescripors(props);
+    const properties = getObservableProperties(Base);
+    const attributes = getObservableAttributes(Base);
+    const parsers = getAttributeParsers(Base);
+    const descriptors = createPropertyDescripors(properties);
     return class Observable extends Base {
         constructor(...args) {
             super(...args);
@@ -23,16 +27,51 @@ export function observable(Base) {
             this.propChange = null;
             this.initializedChanges = new Set();
             this.definePropChange = definePropChange;
-            initObservbale.call(this, descriptors);
+            for (let prop in descriptors) {
+                Reflect.set(this, createPrivateKey(prop), Reflect.get(this, prop));
+            }
+            Object.defineProperties(this, descriptors);
+        }
+        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, mapTo);
+                    if (propVal !== undefined && propVal !== null && propVal !== '') {
+                        this.setAttribute(key, write(propVal));
+                    }
+                }
+            }
+            if (super.connectedCallback) {
+                super.connectedCallback();
+            }
+        }
+        attributeChangedCallback(name, oldVal, newVal) {
+            const { read, mapTo } = parsers[name];
+            Reflect.set(this, mapTo, read(newVal));
+            if (super.attributeChangedCallback) {
+                super.attributeChangedCallback(name, oldVal, newVal);
+            }
+        }
+        onPropertyChanged(changes) {
+            if (this instanceof HTMLElement) {
+                for (let change in changes) {
+                    const attrName = propNameToAttrName(change);
+                    if (attributes.includes(attrName)) {
+                        const value = parsers[attrName].write(changes[change].value);
+                        if (value !== this.getAttribute(attrName)) {
+                            this.setAttribute(attrName, value);
+                        }
+                    }
+                }
+            }
+            if (super.onPropertyChanged) {
+                super.onPropertyChanged(changes);
+            }
         }
     };
 }
-function initObservbale(descriptors) {
-    for (let prop in descriptors) {
-        Reflect.set(this, createPrivateKey(prop), Reflect.get(this, prop));
-    }
-    Object.defineProperties(this, descriptors);
-}
 function createPrivateKey(key) {
     return `__${key.toString()}`;
 }
@@ -65,19 +104,20 @@ 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);
             }
-            if (this.onChange) {
-                this.onChange(this.propChanges);
-            }
-            // reset for next time
-            this.propChanges = {};
+            // clear out before calling to account for changes made INSIDE of the onPropertyChanged callback
             this.propChange = null;
+            this.propChanges = {};
+            if (this.onPropertyChanged) {
+                this.onPropertyChanged(changes);
+            }
         });
     }
     return this.propChange;
 }
-//# sourceMappingURL=observable.js.map

package/target/build/lib.d.ts

@@ -1 +1,2 @@
-export { observable, Change, OnChange, observe, Changes } from './lib/observable';
+export { observable, Change, OnPropertyChanged, observe, Changes } from './lib/observable';
+export { attr } from './lib/attribute';

package/target/build/lib.js

@@ -1,2 +1,2 @@
 export { observable, Change, observe } from './lib/observable';
-//# sourceMappingURL=lib.js.map
+export { attr } from './lib/attribute';

package/target/build/lib/observable.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"observable.js","sourceRoot":"","sources":["../../../lib/observable.ts"],"names":[],"mappings":"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"}

package/target/build/lib.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lib.js","sourceRoot":"","sources":["../../lib.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAY,OAAO,EAAW,MAAM,kBAAkB,CAAC"}