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

package/README.md

@@ -1,21 +1,21 @@
 # Observable
 
 Observable in Joist means something slightly different then in something like RxJs.
-Marking a class with `@observable()` means that instances of that class will BE observable. This means you can watch for changes on select properties.s
+Decorating a class with `@observable` means that instances of that class will BE observable. This means you can watch for changes on select properties.s
 
 #### Installation:
 
 ```BASH
-npm i @joist/observable
+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.0",
+  "version": "2.0.0-alpha.12",
   "main": "./target/build/lib.js",
   "module": "./target/build/lib.js",
   "exports": {
@@ -12,19 +12,20 @@
     "target/build"
   ],
   "sideEffects": false,
-  "description": "Create objects with observable properties",
+  "description": "Dependency Injection in ~800 bytes",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/joist-framework/joist.git"
+    "url": "git+https://github.com/deebloo/joist.git"
   },
   "keywords": [
     "TypeScript",
-    "Observable"
+    "DI",
+    "Dependency Injection"
   ],
   "author": "deebloo",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/joist-framework/joist/issues"
+    "url": "https://github.com/deebloo/joist/issues"
   },
   "publishConfig": {
     "access": "public"
@@ -33,5 +34,5 @@
     "test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
     "build": "tsc -p tsconfig.build.json"
   },
-  "gitHead": "8078ed9c1005afd279b1ccb2c7b7856dd563bec7"
+  "gitHead": "875d5d0c7b5e42f023567bfcbe1d7d6178ab438e"
 }

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,23 +5,29 @@ 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>;
     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>(CustomElement: T): {
+export declare function observable<T extends new (...args: any[]) => any>(Base: T): {
     new (...args: any[]): {
         [x: string]: any;
         propChanges: Changes;
         propChange: Promise<void> | null;
         initializedChanges: Set<string | symbol>;
-        definePropChange(key: string | symbol, propChange: Change): Promise<void>;
+        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>;
+export {};

package/target/build/lib/observable.js

@@ -1,79 +1,124 @@
+import { getAttributeParsers, getObservableAttributes } from './attribute';
 export class Change {
-    value;
-    previousValue;
-    firstChange;
     constructor(value, previousValue, firstChange) {
         this.value = value;
         this.previousValue = previousValue;
         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(CustomElement) {
-    const defs = readPropertyDefs(CustomElement);
-    const props = createPropertyDescripors(defs);
-    return class ObservableElement extends CustomElement {
-        propChanges = {};
-        propChange = null;
-        initializedChanges = new Set();
+export function observable(Base) {
+    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);
-            for (let def in defs) {
-                Reflect.set(this, createPrivateKey(def), Reflect.get(this, def));
+            this.propChanges = {};
+            this.propChange = null;
+            this.initializedChanges = new Set();
+            this.definePropChange = definePropChange;
+            for (let prop in descriptors) {
+                Reflect.set(this, createPrivateKey(prop), Reflect.get(this, prop));
             }
-            Object.defineProperties(this, props);
+            Object.defineProperties(this, descriptors);
         }
-        definePropChange(key, propChange) {
-            if (!this.propChanges[key]) {
-                this.propChanges[key] = propChange;
-            }
-            this.propChanges[key].value = propChange.value;
-            if (!this.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
-                    for (let change in this.propChanges) {
-                        this.propChanges[change].firstChange = !this.initializedChanges.has(change);
-                        this.initializedChanges.add(change);
+        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 !== '' &&
+                        propVal !== parsedVal) {
+                        this.setAttribute(key, parsedVal);
                     }
-                    if (this.onChange) {
-                        this.onChange(this.propChanges);
+                }
+            });
+            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));
+                        }
                     }
-                    // reset for next time
-                    this.propChanges = {};
-                    this.propChange = null;
-                });
+                }
+            }
+            if (super.onPropertyChanged) {
+                super.onPropertyChanged(changes);
             }
-            return this.propChange;
         }
     };
 }
 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);
-                this.definePropChange(def, new Change(val, prevVal, true));
-                Reflect.set(this, privateKey, val);
+                if (prevVal !== val) {
+                    this.definePropChange(prop, new Change(val, prevVal, true));
+                }
+                return Reflect.set(this, privateKey, val);
             },
             get() {
                 return Reflect.get(this, privateKey);
             },
         };
     }
-    return props;
+    return descriptors;
+}
+function definePropChange(key, propChange) {
+    if (!this.propChanges[key]) {
+        this.propChanges[key] = propChange;
+    }
+    this.propChanges[key].value = propChange.value;
+    if (!this.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
+            for (let change in this.propChanges) {
+                this.propChanges[change].firstChange = !this.initializedChanges.has(change);
+                this.initializedChanges.add(change);
+            }
+            if (this.onPropertyChanged) {
+                this.onPropertyChanged(this.propChanges);
+            }
+            // reset for next time
+            this.propChanges = {};
+            this.propChange = null;
+        });
+    }
+    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"}