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

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/observable@canary
 ```
 
 #### 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({
+    read: (val: string) => new Date(val),
+    write: (val: Date) => val.toString()
+  })
+  count: number = 0;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.13",
   "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": "a1e00a87cdc22383fdaab2ad49b645eed1e9e370"
+  "gitHead": "e9d8689c31099c04f23e0511270f45eca6ae4cea"
 }

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

@@ -0,0 +1,8 @@
+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 attr<T extends HTMLElement>(t: T, key: string): void;

package/target/build/lib/attribute.js

@@ -0,0 +1,47 @@
+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;
+}
+export function attr(targetOrParser, key) {
+    if (targetOrParser instanceof HTMLElement) {
+        return defineAttribute(targetOrParser, key);
+    }
+    return (target, key) => {
+        const parser = targetOrParser;
+        defineAttribute(target, key);
+        const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
+        attributeParsers[key].read = parser.read || attributeParsers[key].read;
+        attributeParsers[key].write = parser.write || attributeParsers[key].write;
+        Reflect.set(target.constructor, 'attributeParsers', attributeParsers);
+        return void 0;
+    };
+}
+function defineAttribute(target, key) {
+    const observedAttributes = Reflect.get(target.constructor, 'observedAttributes');
+    if (observedAttributes) {
+        observedAttributes.push(key);
+    }
+    else {
+        Reflect.set(target.constructor, 'observedAttributes', [key]);
+    }
+    const attributeParsers = Reflect.get(target.constructor, 'attributeParsers');
+    if (attributeParsers) {
+        attributeParsers[key] = { read: defaultRead, write: String };
+    }
+    else {
+        const attributeParsers = {};
+        attributeParsers[key] = { read: defaultRead, write: String };
+        Reflect.set(target.constructor, 'attributeParsers', attributeParsers);
+    }
+    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): Record<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,4 @@
+import { getAttributeParsers, getObservableAttributes } from './attribute';
 export class Change {
     constructor(value, previousValue, firstChange) {
         this.value = value;
@@ -5,17 +6,19 @@ export class Change {
         this.firstChange = firstChange;
     }
 }
-export function readPropertyDefs(c) {
-    return c.properties || c.prototype.properties || {};
+const PROPERTY_KEY = 'observedProperties';
+export function getObservableProperties(c) {
+    return c[PROPERTY_KEY] || [];
 }
-const PROPERTY_KEY = 'properties';
 export function observe(target, key) {
-    target[PROPERTY_KEY] = target[PROPERTY_KEY] || {};
-    target[PROPERTY_KEY][key] = {};
+    target.constructor[PROPERTY_KEY] = target.constructor[PROPERTY_KEY] || [];
+    target.constructor[PROPERTY_KEY].push(key);
 }
 export function observable(Base) {
-    const defs = readPropertyDefs(Base);
-    const props = createPropertyDescripors(defs);
+    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,25 +26,65 @@ export function observable(Base) {
             this.propChange = null;
             this.initializedChanges = new Set();
             this.definePropChange = definePropChange;
-            for (let def in defs) {
-                Reflect.set(this, createPrivateKey(def), Reflect.get(this, def));
+            for (let prop in descriptors) {
+                Reflect.set(this, createPrivateKey(prop), Reflect.get(this, prop));
+            }
+            Object.defineProperties(this, descriptors);
+        }
+        connectedCallback() {
+            attributes.forEach((key) => {
+                const { write } = parsers[key];
+                const val = this.getAttribute(key);
+                if (val === null) {
+                    const propVal = Reflect.get(this, key);
+                    const parsedVal = write(propVal);
+                    if (propVal !== undefined && propVal !== null && propVal !== '' && val !== parsedVal) {
+                        this.setAttribute(key, parsedVal);
+                    }
+                }
+            });
+            if (super.connectedCallback) {
+                super.connectedCallback();
+            }
+        }
+        attributeChangedCallback(name, oldVal, newVal) {
+            const { read } = parsers[name];
+            Reflect.set(this, name, read(newVal));
+            if (super.attributeChangedCallback) {
+                super.attributeChangedCallback(name, oldVal, newVal);
+            }
+        }
+        onPropertyChanged(changes) {
+            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));
+                        }
+                    }
+                }
+            }
+            if (super.onPropertyChanged) {
+                super.onPropertyChanged(changes);
             }
-            Object.defineProperties(this, props);
         }
     };
 }
 function createPrivateKey(key) {
-    return `__${key}`;
+    return `__${key.toString()}`;
 }
-function createPropertyDescripors(defs) {
-    const props = {};
-    for (let def in defs) {
-        const privateKey = createPrivateKey(def);
-        props[def] = {
+function createPropertyDescripors(props) {
+    const descriptors = {};
+    for (let i = 0; i < props.length; i++) {
+        const prop = props[i];
+        const privateKey = createPrivateKey(prop);
+        descriptors[prop] = {
             set(val) {
                 const prevVal = Reflect.get(this, privateKey);
                 if (prevVal !== val) {
-                    this.definePropChange(def, new Change(val, prevVal, true));
+                    this.definePropChange(prop, new Change(val, prevVal, true));
                 }
                 return Reflect.set(this, privateKey, val);
             },
@@ -50,7 +93,7 @@ function createPropertyDescripors(defs) {
             },
         };
     }
-    return props;
+    return descriptors;
 }
 function definePropChange(key, propChange) {
     if (!this.propChanges[key]) {
@@ -66,8 +109,8 @@ function definePropChange(key, propChange) {
                 this.propChanges[change].firstChange = !this.initializedChanges.has(change);
                 this.initializedChanges.add(change);
             }
-            if (this.onChange) {
-                this.onChange(this.propChanges);
+            if (this.onPropertyChanged) {
+                this.onPropertyChanged(this.propChanges);
             }
             // reset for next time
             this.propChanges = {};
@@ -76,4 +119,3 @@ function definePropChange(key, propChange) {
     }
     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"}