@joist/observable 3.0.6 → 3.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joist/observable",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "type": "module",
   "main": "./target/lib.js",
   "module": "./target/lib.js",
@@ -13,6 +13,7 @@
     }
   },
   "files": [
+    "src",
     "target"
   ],
   "sideEffects": false,

package/src/lib/meta.test.ts

@@ -0,0 +1,22 @@
+import { expect } from '@open-wc/testing';
+import { MetaData } from './meta.js';
+
+describe('meta:meta', () => {
+  it('should return default metadata', () => {
+    const key = {};
+    const data = new MetaData().read(key);
+
+    expect(data).to.deep.equal({
+      changes: new Set(),
+      upgradable: new Map(),
+      scheduler: null,
+    });
+  });
+
+  it('should return the same metadata object after init', () => {
+    const key = {};
+    const data = new MetaData();
+
+    expect(data.read(key)).to.equal(data.read(key));
+  });
+});

package/src/lib/meta.ts

@@ -0,0 +1,23 @@
+export type EffectFn = (changes: Set<string | symbol>) => void;
+
+export class ObservableMetaData {
+  scheduler: Promise<void> | null = null;
+  upgradable = new Map<string | symbol, unknown>();
+  changes = new Set<string | symbol>();
+}
+
+export class MetaData {
+  #data = new WeakMap<object, ObservableMetaData>();
+
+  read<T extends object>(value: T) {
+    if (this.#data.has(value)) {
+      return this.#data.get(value) as ObservableMetaData;
+    }
+
+    const data = new ObservableMetaData();
+
+    this.#data.set(value, data);
+
+    return data;
+  }
+}

package/src/lib/observe.test.ts

@@ -0,0 +1,106 @@
+import { expect, fixture, html } from '@open-wc/testing';
+
+import { effect, observe } from './observe.js';
+
+describe('observable: observe()', () => {
+  it('should work with static accessors', (done) => {
+    class Counter {
+      @observe static accessor value = 0;
+
+      @effect static onPropChanged() {
+        expect(Counter.value).to.equal(1);
+
+        done();
+      }
+    }
+
+    expect(Counter.value).to.equal(0);
+
+    Counter.value++;
+
+    expect(Counter.value).to.equal(1);
+  });
+
+  it('should work with instance accessors', (done) => {
+    class Counter {
+      @observe accessor value = 0;
+
+      // confirm it works with private methods
+      // @ts-ignore
+      @effect #onChange() {
+        expect(this.value).to.equal(1);
+
+        done();
+      }
+    }
+
+    const counter = new Counter();
+
+    expect(counter.value).to.equal(0);
+
+    counter.value++;
+
+    expect(counter.value).to.equal(1);
+  });
+
+  it('should return a set of changed props', (done) => {
+    class Counter {
+      @observe accessor value = 0;
+
+      @effect onChange(changes: Set<symbol | string>) {
+        expect(changes.has('value')).to.be.true;
+
+        done();
+      }
+    }
+
+    const counter = new Counter();
+    counter.value++;
+  });
+
+  it('should work as an even emitter', (done) => {
+    class Counter extends EventTarget {
+      @observe accessor value = 0;
+
+      @effect onChange() {
+        this.dispatchEvent(new Event('changed'));
+      }
+    }
+
+    const counter = new Counter();
+
+    counter.addEventListener('changed', () => {
+      expect(counter.value).to.equal(1);
+
+      done();
+    });
+
+    counter.value++;
+  });
+
+  it('should upgrade custom elements', (done) => {
+    class Counter extends HTMLElement {
+      @observe accessor value = 0;
+
+      constructor() {
+        super();
+
+        expect(this.value).to.equal(100);
+      }
+
+      @effect onChange() {
+        expect(this.value).to.equal(101);
+
+        done();
+      }
+    }
+
+    fixture<any>(html`<observable-1></observable-1>`).then((el) => {
+      el.value = 100;
+
+      customElements.define('observable-1', Counter);
+
+      el.value++;
+    });
+  });
+});

package/src/lib/observe.ts

@@ -0,0 +1,76 @@
+// ensure that the metadata symbol exists
+(Symbol as any).metadata ??= Symbol('Symbol.metadata');
+
+import { EffectFn, MetaData } from './meta.js';
+
+const metaData = new MetaData();
+
+export interface ObservableCtx {
+  metadata: {
+    effects?: Set<EffectFn>;
+  };
+}
+
+export function observe<This extends object, Value>(
+  base: ClassAccessorDecoratorTarget<This, Value>,
+  ctx: ClassAccessorDecoratorContext<This, Value> & ObservableCtx
+): ClassAccessorDecoratorResult<This, Value> {
+  // handle upgradable values (specifically custom elements)
+  ctx.addInitializer(function (this: This) {
+    const meta = metaData.read(this);
+
+    let value: Value | undefined;
+
+    // attempt to read value.
+    try {
+      value = ctx.access.get(this);
+    } catch {}
+
+    if (value) {
+      // if there is a value, delete it and cache it for init
+      delete (<any>this)[ctx.name];
+
+      meta.upgradable.set(ctx.name, value);
+    }
+  });
+
+  return {
+    init(value) {
+      const meta = metaData.read(this);
+
+      if (meta.upgradable.has(ctx.name)) {
+        return meta.upgradable.get(ctx.name) as Value;
+      }
+
+      return value;
+    },
+    set(value) {
+      const meta = metaData.read(this);
+
+      if (meta.scheduler === null) {
+        meta.scheduler = Promise.resolve().then(() => {
+          if (ctx.metadata.effects) {
+            for (let effect of ctx.metadata.effects) {
+              effect.call(this, meta.changes);
+            }
+          }
+
+          meta.scheduler = null;
+          meta.changes.clear();
+        });
+      }
+
+      meta.changes.add(ctx.name);
+
+      base.set.call(this, value);
+    },
+  };
+}
+
+export function effect<T extends object>(
+  value: EffectFn,
+  ctx: ClassMethodDecoratorContext<T> & ObservableCtx
+) {
+  ctx.metadata.effects ??= new Set();
+  ctx.metadata.effects.add(value);
+}

package/src/lib.ts

@@ -0,0 +1 @@
+export { observe, effect } from './lib/observe.js';