@difizen/libro-common 0.3.4 → 1.0.0

package/src/observable/notifier.spec.ts

@@ -0,0 +1,141 @@
+import assert from 'assert';
+
+import { prop, Notifier, observable } from './index';
+
+describe('tracker', () => {
+  it('#create tracker', () => {
+    class Foo {
+      @prop() name?: string;
+    }
+    class Bar {
+      name?: string;
+    }
+    const fooRaw = new Foo();
+    const foo = observable(fooRaw);
+    const bar = new Bar();
+    Notifier.find(foo, 'name');
+    assert(Notifier.find(observable([])));
+    assert(!!Notifier.find(foo, 'name'));
+    assert(!!Notifier.find(fooRaw, 'name'));
+    assert(!!Notifier.find(bar, 'name'));
+  });
+
+  it('#trigger', () => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const foo = observable(new Foo());
+    let changed = false;
+    const notifier = Notifier.find(foo, 'name');
+    notifier?.onChange(() => {
+      changed = true;
+    });
+    Notifier.trigger(foo, 'name');
+    assert(changed);
+  });
+
+  it('#trigger', () => {
+    class Foo {
+      @prop() name?: string;
+      get onNameChange() {
+        return Notifier.toEvent(this, 'name');
+      }
+    }
+    const foo = observable(new Foo());
+    let changed = false;
+    foo.onNameChange(() => {
+      changed = true;
+    });
+    Notifier.trigger(foo, 'name');
+    assert(changed);
+  });
+
+  it('#trigger array', () => {
+    class Foo {
+      @prop() arr: number[] = [1, 2, 3];
+    }
+    const foo = observable(new Foo());
+    let times = 0;
+    const notifier = Notifier.find(foo, 'arr');
+    notifier?.onChange(() => {
+      times += 1;
+    });
+    foo.arr.push(1);
+    foo.arr.splice(1, 1);
+    assert(times === 5);
+  });
+  it('#dispose tracker', () => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const foo = observable(new Foo());
+    const tracker = Notifier.find(foo, 'name');
+    tracker?.dispose();
+    const newTracker = Notifier.find(foo, 'name');
+    assert(tracker?.disposed && newTracker !== tracker);
+  });
+  it('#tracker notify', (done) => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const foo = observable(new Foo());
+    const tracker = Notifier.find(foo, 'name');
+    tracker?.onChange(() => {
+      done();
+    });
+    assert(!!Notifier.find(foo, 'name'));
+    tracker?.notify(foo, 'name');
+  });
+  it('#tracker changed', (done) => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const foo = observable(new Foo());
+    const tracker = Notifier.find(foo, 'name');
+    tracker?.onChange(() => {
+      done();
+    });
+    assert(!!Notifier.find(foo, 'name'));
+    tracker?.notify(foo, 'name');
+  });
+  it('#tracker once', () => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const foo = observable(new Foo());
+    const tracker = Notifier.find(foo, 'name');
+    let times = 0;
+    let once = 0;
+    tracker?.once(() => {
+      once += 1;
+    });
+    tracker?.onChange(() => {
+      times += 1;
+    });
+    assert(!!Notifier.find(foo, 'name'));
+    tracker?.notify(foo, 'name');
+    tracker?.notify(foo, 'name');
+    assert(times === 2);
+    assert(once === 1);
+  });
+
+  it('#trigger', () => {
+    class Foo {
+      @prop() name?: string;
+    }
+    const raw = new Foo();
+
+    const event0 = Notifier.toEvent(raw, 'name');
+    const event1 = Notifier.toEvent(raw, 'name', null);
+    const event2 = Notifier.toEvent(raw, 'name', true);
+    const foo = observable(raw);
+
+    const notifier = Notifier.getOrCreate(foo, 'name');
+
+    assert(event0 === notifier?.onChangeSync);
+    assert(event1 === notifier?.onChange);
+    assert(event2 === notifier?.onChangeAsync);
+    assert(event0 !== event2);
+    assert(event0 === event1);
+  });
+});

package/src/observable/notifier.ts

@@ -0,0 +1,126 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Disposable } from '../common/index.js';
+import { Event } from '../common/index.js';
+
+import { AsyncEmitter } from './async-event';
+import { ObservableConfig } from './config';
+import type { Notify } from './core';
+import { ObservableSymbol } from './core';
+import { Notifiable } from './notifiable';
+import { Observability } from './utils';
+
+export interface Notification<T = any> {
+  target: T;
+  prop?: any;
+}
+export class Notifier implements Disposable {
+  protected changedEmitter = new AsyncEmitter<Notification>();
+  disposed = false;
+  get onChange(): Event<any> {
+    if (ObservableConfig.async) {
+      return this.onChangeAsync;
+    }
+    return this.onChangeSync;
+  }
+  get onChangeAsync() {
+    return this.changedEmitter.eventAsync;
+  }
+  get onChangeSync() {
+    return this.changedEmitter.event;
+  }
+
+  dispose() {
+    this.changedEmitter.dispose();
+    this.disposed = true;
+  }
+
+  once(trigger: Notify, context?: any): Disposable {
+    const toDispose = this.onChange((e) => {
+      trigger(e.target, e.prop);
+      toDispose.dispose();
+    }, context);
+    return toDispose;
+  }
+
+  notify(target: any, prop?: any): void {
+    this.changedEmitter.fire({ target, prop });
+    if (prop) {
+      Notifier.trigger(target);
+    }
+  }
+
+  static trigger(target: any, prop?: any): void {
+    const exist = Notifier.get(target, prop);
+    if (exist) {
+      exist.notify(target, prop);
+    }
+  }
+  static getOrCreate(target: any, prop?: any): Notifier {
+    const notifier = Notifiable.getNotifier(target);
+    if (notifier) {
+      return notifier;
+    }
+    const origin = Observability.getOrigin(target);
+    const exist = Notifier.get(origin, prop);
+    if (exist && !exist.disposed) {
+      return exist;
+    }
+    const ntf = new Notifier();
+    Notifier.set(origin, ntf, prop);
+    return ntf;
+  }
+  static find(target: any, prop?: any): Notifier | undefined {
+    if (Observability.marked(target, prop) || Observability.canBeObservable(target)) {
+      return Notifier.getOrCreate(target, prop);
+    }
+    return undefined;
+  }
+  static get(target: any, property?: any): Notifier | undefined {
+    if (property === undefined) {
+      return Reflect.getMetadata(ObservableSymbol.Notifier, target);
+    } else {
+      return Reflect.getMetadata(ObservableSymbol.Notifier, target, property);
+    }
+  }
+
+  static set(target: any, notifier: Notifier, property?: any): void {
+    if (property === undefined) {
+      Reflect.defineMetadata(ObservableSymbol.Notifier, notifier, target);
+    } else {
+      Reflect.defineMetadata(ObservableSymbol.Notifier, notifier, target, property);
+    }
+  }
+
+  static once(notifier: Notifier, key: any, onChange: () => void) {
+    const toDispose = Observability.getDisposable(key, notifier);
+    if (toDispose) {
+      toDispose.dispose();
+    }
+    const disposable = notifier.once(() => {
+      onChange();
+    });
+    Observability.setDisposable(key, disposable, notifier);
+  }
+
+  /**
+   * Get event from target
+   * @param target
+   * @param prop
+   * @param async false by default
+   * @returns
+   */
+  static toEvent(target: any, prop?: any, async: boolean | null = false) {
+    const notifier = Notifier.find(target, prop);
+    if (notifier) {
+      if (async === null) {
+        return notifier.onChange;
+      }
+      if (async) {
+        return notifier.onChangeAsync;
+      } else {
+        return notifier.onChangeSync;
+      }
+    }
+    return Event.None;
+  }
+}

package/src/observable/observable.spec.ts

@@ -0,0 +1,265 @@
+import 'react';
+import assert from 'assert';
+
+import {
+  prop,
+  Notifiable,
+  Notifier,
+  observable,
+  Observability,
+  ObservableProperties,
+} from './index';
+
+describe('observable', () => {
+  it('#observable properties', () => {
+    class Foo {
+      @prop() name = '';
+    }
+    const foo = observable(new Foo());
+    const instanceBasic = observable(foo);
+    const nullInstance = observable(null as any);
+    assert(!Observability.marked(nullInstance));
+    assert(Observability.marked(instanceBasic));
+    assert(Observability.marked(instanceBasic, 'name'));
+    assert(ObservableProperties.get(instanceBasic)?.includes('name'));
+  });
+  it('#extends properties', () => {
+    class ClassBasic {
+      @prop() name = '';
+      name1 = '';
+      name2 = '';
+    }
+    class ClassBasic1 extends ClassBasic {
+      @prop() override name1 = '';
+    }
+    class ClassBasic2 extends ClassBasic1 {
+      override name1 = '';
+      @prop() override name2 = '';
+    }
+    const instanceBasic = observable(new ClassBasic());
+    const instanceBasic1 = observable(new ClassBasic1());
+    const instanceBasic2 = observable(new ClassBasic2());
+    assert(ObservableProperties.get(instanceBasic)?.includes('name'));
+    assert(ObservableProperties.get(instanceBasic)?.length === 1);
+    assert(ObservableProperties.get(instanceBasic1)?.includes('name'));
+    assert(ObservableProperties.get(instanceBasic1)?.includes('name1'));
+    assert(ObservableProperties.get(instanceBasic1)?.length === 2);
+    assert(ObservableProperties.get(instanceBasic2)?.includes('name'));
+    assert(ObservableProperties.get(instanceBasic2)?.includes('name1'));
+    assert(ObservableProperties.get(instanceBasic2)?.includes('name2'));
+    assert(ObservableProperties.get(instanceBasic2)?.length === 3);
+  });
+  it('#basic usage', () => {
+    class ClassBasic {
+      @prop() name = '';
+    }
+    const instanceBasic = observable(new ClassBasic());
+    let changed = false;
+    const tracker = Notifier.find(instanceBasic, 'name');
+    tracker?.onChange(() => {
+      changed = true;
+    });
+    instanceBasic.name = 'a';
+    instanceBasic.name = 'b';
+    assert(instanceBasic.name === 'b');
+    assert(changed);
+  });
+  it('#array usage', () => {
+    class ClassArray {
+      @prop() list: string[] = [];
+    }
+    const instanceArray = observable(new ClassArray());
+    instanceArray.list = [];
+    let changed = false;
+    if (Notifiable.is(instanceArray.list)) {
+      const notifier = Notifiable.getNotifier(instanceArray.list);
+      notifier.onChange(() => {
+        changed = true;
+      });
+    }
+    const tracker = Notifier.find(instanceArray, 'list');
+    tracker?.onChange(() => {
+      changed = true;
+    });
+    instanceArray.list.push('');
+    assert(changed);
+    instanceArray.list = [];
+    assert(instanceArray.list.length === 0);
+  });
+
+  it('#property usage', () => {
+    class ClassArray {
+      @prop() enable = false;
+    }
+    const instance = observable(new ClassArray());
+    assert(Observability.marked(instance, 'enable'));
+    // instanceArray.enable = true;
+    let changeTimes = 0;
+    const notifier = Notifier.getOrCreate(instance, 'enable');
+    notifier.onChange(() => {
+      changeTimes += 1;
+    });
+    instance.enable = true;
+    assert(changeTimes === 1);
+  });
+
+  it('#child class', (done) => {
+    class Foo {
+      @prop() fooName = 'foo';
+    }
+    class Bar extends Foo {
+      @prop() barName?: string;
+      @prop() barInfo?: string;
+    }
+    const bar = observable(new Bar());
+    let changed = false;
+    const tracker = Notifier.find(bar, 'fooName');
+    tracker?.onChange(() => {
+      changed = true;
+      assert(changed);
+      done();
+    });
+    bar.fooName = 'foo name';
+  });
+
+  it('#shared properties', () => {
+    class Foo {
+      @prop() list: string[] = [];
+    }
+    class Bar {
+      @prop() list: string[] = [];
+    }
+    const foo = observable(new Foo());
+    const bar = observable(new Bar());
+    foo.list = bar.list;
+    let changed = false;
+    const notifier = Notifier.find(bar, 'list');
+    notifier?.onChange(() => {
+      changed = true;
+    });
+    foo.list.push('');
+    assert(changed);
+  });
+  it('#observable notifiable', () => {
+    const v: any[] = [];
+    class Foo {}
+    const foo = new Foo();
+    const notifiable = observable(v);
+    const notifiable1 = observable(v);
+    const notifiable2 = observable(notifiable);
+    assert(notifiable1 === notifiable2);
+    assert(notifiable === notifiable1);
+    const observableFoo = observable(foo);
+    assert(Notifiable.is(notifiable));
+    assert(Observability.marked(v));
+    assert(observableFoo === foo);
+    let changed = false;
+    const notifier = Notifier.find(notifiable);
+    notifier?.onChange(() => {
+      changed = true;
+    });
+    notifiable1.push('');
+    assert(changed);
+  });
+  it('#get notifier', () => {
+    const foo = {
+      a: {
+        b: {
+          c: 1,
+        },
+      },
+    };
+    const f = observable(foo);
+    assert(Notifiable.is(f.a.b));
+    const notifier = Notifiable.getNotifier(f.a.b);
+    const originalB = Observability.getOrigin(f.a.b);
+    const maybeNewNotifier = Notifier.getOrCreate(originalB);
+    assert(notifier === maybeNewNotifier);
+  });
+
+  it('#observable nested', () => {
+    class Foo {
+      @prop() info = '';
+    }
+    class Bar {
+      @prop() obj: { foo: Foo | undefined } = {
+        foo: undefined,
+      };
+    }
+    const bar = new Bar();
+    const foo = new Foo();
+    let bChangeTimes = 0;
+    const b = observable(bar);
+    const bNotifier = Notifier.find(b, 'obj');
+    bNotifier?.onChange(() => {
+      bChangeTimes += 1;
+    });
+
+    let objChangeTimes = 0;
+
+    assert(Notifiable.is(b.obj));
+    const objNotifier = Notifiable.getNotifier(b.obj);
+    objNotifier?.onChange(() => {
+      objChangeTimes += 1;
+    });
+
+    bar.obj.foo = foo;
+    const f = observable(foo);
+    let fooChangeTimes = 0;
+    const fooNotifier = Notifier.find(f, 'info');
+    fooNotifier?.onChange(() => {
+      fooChangeTimes += 1;
+    });
+    foo.info = 'foo';
+    assert(b.obj === b.obj);
+    assert(bChangeTimes === 1);
+    assert(objChangeTimes === 1);
+    assert(fooChangeTimes === 1);
+  });
+
+  it('#observable nested obj', () => {
+    const foo = {
+      a: {
+        b: {
+          c: 1,
+        },
+      },
+    };
+    const f = observable(foo);
+    assert(Notifiable.is(f));
+    const fNotifier = Notifiable.getNotifier(f);
+    let fChangeTimes = 0;
+    fNotifier?.onChange(() => {
+      fChangeTimes += 1;
+    });
+
+    assert(Notifiable.is(f.a.b));
+    const bNotifier = Notifiable.getNotifier(f.a.b);
+    let bChangeTimes = 0;
+    bNotifier?.onChange(() => {
+      bChangeTimes += 1;
+    });
+
+    f.a.b.c = 2;
+    assert(fChangeTimes === 0);
+    assert(bChangeTimes === 1);
+  });
+  it('#observable property set', () => {
+    const arr: string[] = [];
+    class ClassBasic {
+      @prop() arr = arr;
+    }
+    const instance = observable(new ClassBasic());
+    let times = 0;
+    const notifier = Notifier.find(instance, 'arr');
+    notifier?.onChange(() => {
+      times += 1;
+    });
+    const observavleArr = observable(arr);
+    observavleArr.push(''); // 2
+    assert(times === 2);
+    instance.arr = []; //3
+    observavleArr.push('');
+    assert((times as number) === 3);
+  });
+});

package/src/observable/observable.ts

@@ -0,0 +1,87 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ObservableConfig } from './config';
+import { Notifiable } from './notifiable';
+import { Notifier } from './notifier';
+import { InstanceValue, ObservableProperties, Observability } from './utils';
+
+const propertyRelatedNotifier = Symbol('propertyRelatedNotifier');
+
+// redefine observable properties
+export function defineProperty(target: any, property: string, defaultValue?: any) {
+  const notifier = Notifier.getOrCreate(target, property);
+  /**
+   * notify notifier when property changed
+   */
+  const onChange = () => {
+    if (ObservableConfig.paused) {
+      return;
+    }
+    Notifier.trigger(target, property);
+  };
+  /**
+   * set observable property value and register onChange listener
+   * @param value
+   * @param notifier
+   */
+  const handleValue = (value: any) => {
+    InstanceValue.set(target, property, value);
+    if (notifier) {
+      const last = Observability.getDisposable(propertyRelatedNotifier, notifier);
+      if (last) {
+        last.dispose();
+      }
+    }
+    if (Notifiable.is(value)) {
+      const valueNotifier = Notifiable.getNotifier(value);
+      if (notifier && valueNotifier) {
+        const toDispose = valueNotifier.onChangeSync(onChange);
+        Observability.setDisposable(propertyRelatedNotifier, toDispose, notifier);
+      }
+    }
+  };
+  const initialValue = target[property] === undefined ? defaultValue : target[property];
+  handleValue(Notifiable.transform(initialValue));
+  // property getter
+  const getter = function getter(this: any): void {
+    const value = Reflect.getMetadata(property, target);
+    return value;
+  };
+  // property setter
+  const setter = function setter(this: any, value: any): void {
+    const notifiableValue = Notifiable.transform(value);
+    const oldValue = InstanceValue.get(target, property);
+    if (notifiableValue !== oldValue) {
+      handleValue(notifiableValue);
+      onChange();
+    }
+  };
+  // define property
+  if (Reflect.deleteProperty(target, property)) {
+    Reflect.defineProperty(target, property, {
+      configurable: true,
+      enumerable: true,
+      get: getter,
+      set: setter,
+    });
+  }
+  // mark observable property
+  ObservableProperties.add(target, property);
+  Observability.mark(target, property);
+}
+
+export function observable<T extends Record<any, any>>(target: T): T {
+  if (!Observability.canBeObservable(target)) {
+    return target;
+  }
+  const origin = Observability.getOrigin(target);
+  const properties = ObservableProperties.find(origin);
+  if (!properties) {
+    const notifiableValue = Notifiable.transform(origin);
+    if (Notifiable.is(notifiableValue)) {
+      Observability.mark(origin);
+    }
+    return notifiableValue;
+  }
+  properties.forEach((property) => defineProperty(origin, property));
+  return origin;
+}