@joist/observable 2.0.0-canary.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2019-2020 Danny Blue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# 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
+
+#### Installation:
+
+```BASH
+npm i @joist/observable
+```
+
+#### Example:
+
+```TS
+import { observable, observer, OnChange, Changes } from '@joist/observable';
+
+@observable
+class State implements OnChange {
+  // Changes to these will trigger callback
+  @observe todos: string[] = [];
+  @observe userName?: string;
+
+  // changes to this will not
+  someValue: boolean = false;
+
+  onChange(changes: Changes) {
+    console.log(changes);
+    // { todos: { value: ['Build Shit'], previousValue: [] }, userName: { value: 'Danny Blue', previousValue: undefined } }
+  }
+}
+
+const state = new State();
+
+state.todos = [...state.todos, 'Build Shit'];
+state.userName = 'Danny Blue'
+```
+
+#### Event target example:
+
+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';
+
+class StateChangeEvent extends Event {
+  consetructor(public changes: Changes) {
+    super('statechange')
+  }
+}
+
+@observable
+class State extends EventTarget implements OnChange {
+  // Changes to these will trigger callback
+  @observe todos: string[] = [];
+  @observe userName?: string;
+
+  // changes to this will not
+  someValue: boolean = false;
+
+  onChange(changes: Changes) {
+    this.dispatchEvent(new StateChangeEvent());
+  }
+}
+
+const state = new State();
+
+state.addEventListener('statechange', (e) => {
+  console.log(e.changes);
+});
+
+state.todos = [...state.todos, 'Build Shit'];
+state.userName = 'Danny Blue'
+```

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@joist/observable",
+  "version": "2.0.0-canary.0+d60b309",
+  "main": "./target/build/lib.js",
+  "module": "./target/build/lib.js",
+  "exports": {
+    ".": {
+      "import": "./target/build/lib.js"
+    }
+  },
+  "files": [
+    "target/build"
+  ],
+  "sideEffects": false,
+  "description": "Dependency Injection in ~800 bytes",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/deebloo/joist.git"
+  },
+  "keywords": [
+    "TypeScript",
+    "DI",
+    "Dependency Injection"
+  ],
+  "author": "deebloo",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/deebloo/joist/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "test": "tsc -p tsconfig.test.json && wtr --config ../../wtr.config.mjs --port 8002",
+    "build": "tsc -p tsconfig.build.json"
+  },
+  "gitHead": "d60b309e8217c15aa200955d6cf0921f0c5a2cc3"
+}

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

@@ -0,0 +1,27 @@
+export declare class Change<T = any> {
+    value: T;
+    previousValue: T | undefined;
+    firstChange: boolean;
+    constructor(value: T, previousValue: T | undefined, firstChange: boolean);
+}
+export declare type Changes = Record<string | symbol, Change>;
+export interface OnChange {
+    onChange(changes: Changes): void;
+}
+export declare function readPropertyDefs(c: any): Record<string | symbol, {}>;
+export interface ObservableBase {
+    propChanges: Changes;
+    propChange: Promise<void> | null;
+    initializedChanges: Set<string | symbol>;
+    definePropChange(key: string | symbol, propChange: Change): Promise<void>;
+}
+export declare function observe(target: any, key: string): void;
+export declare function observable<T extends new (...args: any[]) => any>(CustomElement: 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>;
+    };
+} & T;

package/target/build/lib/observable.js

@@ -0,0 +1,79 @@
+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 = 'properties';
+export function observe(target, key) {
+    target[PROPERTY_KEY] = target[PROPERTY_KEY] || {};
+    target[PROPERTY_KEY][key] = {};
+}
+export function observable(CustomElement) {
+    const defs = readPropertyDefs(CustomElement);
+    const props = createPropertyDescripors(defs);
+    return class ObservableElement extends CustomElement {
+        propChanges = {};
+        propChange = null;
+        initializedChanges = new Set();
+        constructor(...args) {
+            super(...args);
+            for (let def in defs) {
+                Reflect.set(this, createPrivateKey(def), Reflect.get(this, def));
+            }
+            Object.defineProperties(this, props);
+        }
+        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.onChange) {
+                        this.onChange(this.propChanges);
+                    }
+                    // reset for next time
+                    this.propChanges = {};
+                    this.propChange = null;
+                });
+            }
+            return this.propChange;
+        }
+    };
+}
+function createPrivateKey(key) {
+    return `__${key}`;
+}
+function createPropertyDescripors(defs) {
+    const props = {};
+    for (let def in defs) {
+        const privateKey = createPrivateKey(def);
+        props[def] = {
+            set(val) {
+                const prevVal = Reflect.get(this, privateKey);
+                this.definePropChange(def, new Change(val, prevVal, true));
+                Reflect.set(this, privateKey, val);
+            },
+            get() {
+                return Reflect.get(this, privateKey);
+            },
+        };
+    }
+    return props;
+}
+//# sourceMappingURL=observable.js.map

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

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

package/target/build/lib.d.ts

@@ -0,0 +1 @@
+export { observable, Change, OnChange, observe, Changes } from './lib/observable';

package/target/build/lib.js

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

package/target/build/lib.js.map

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