@difizen/libro-common 0.3.3 → 1.0.0

package/src/observable/hooks.spec.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import assert from 'assert';
+
+import React, { useEffect } from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { prop, useObserve, observable, useObservableState } from './index';
+
+describe('use', () => {
+  it('#useObserve basic ', (done) => {
+    class Foo {
+      @prop() info = 0;
+    }
+    const SINGLETON_FOO = new Foo();
+    const FooRender = () => {
+      const foo = useObserve(SINGLETON_FOO);
+      return <div>{foo && foo.info}</div>;
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <FooRender />
+        </>,
+      );
+
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      SINGLETON_FOO.info = 1;
+    });
+    act(() => {
+      const json = component.toJSON();
+      assert(
+        !(json instanceof Array) &&
+          json &&
+          json.children instanceof Array &&
+          json.children?.find((item) => item === '1'),
+      );
+      done();
+    });
+  });
+
+  it('#useObserve effects ', (done) => {
+    class Foo {
+      @prop() info = 0;
+    }
+    const SINGLETON_FOO = new Foo();
+    let times = 0;
+    let infoTimes = 0;
+    const FooRender = () => {
+      const foo = useObserve(SINGLETON_FOO);
+      React.useEffect(() => {
+        times += 1;
+      }, [foo]);
+      React.useEffect(() => {
+        infoTimes += 1;
+      }, [foo.info]);
+      return <div>{foo && foo.info}</div>;
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <FooRender />
+        </>,
+      );
+
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      SINGLETON_FOO.info = 1;
+    });
+    act(() => {
+      const json = component.toJSON();
+      assert(
+        !(json instanceof Array) &&
+          json &&
+          json.children instanceof Array &&
+          json.children?.find((item) => item === '1'),
+      );
+      assert(times === 1);
+      assert(infoTimes === 2);
+      done();
+    });
+  });
+  it('#useObserve array', (done) => {
+    class Foo {
+      @prop() list: number[] = [1, 2, 3];
+    }
+    const foo = new Foo();
+    let renderTimes = 0;
+    const FooRender = () => {
+      const f = useObserve(foo);
+      renderTimes += 1;
+      return <div>{f.list.length}</div>;
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <FooRender />
+        </>,
+      );
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      foo.list.push(1);
+      foo.list.splice(1, 1);
+    });
+    act(() => {
+      assert(renderTimes === 2);
+      done();
+    });
+  });
+  it('#useObserve deep array ', (done) => {
+    class Foo {
+      @prop() info = '';
+    }
+    class Bar {
+      @prop() list: Foo[] = [];
+    }
+    const SINGLETON_BAR = new Bar();
+    const foo = new Foo();
+    SINGLETON_BAR.list.push(foo);
+    const FooRender = () => {
+      const bar = useObserve(SINGLETON_BAR);
+      return <div>{bar.list.filter((item) => item.info.length > 0).length}</div>;
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <FooRender />
+        </>,
+      );
+
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      foo.info = 'a';
+    });
+    act(() => {
+      const json = component.toJSON();
+      assert(
+        !(json instanceof Array) &&
+          json &&
+          json.children instanceof Array &&
+          json.children?.find((item) => item === '1'),
+      );
+      done();
+    });
+  });
+
+  it('#useObserve reactable array', (done) => {
+    const ARR: any[] = observable([]);
+    const Render = () => {
+      const arr = useObserve(ARR);
+      const arr1 = useObservableState<string[]>([]);
+      useEffect(() => {
+        arr.push('effect');
+        arr1.push('effect1');
+      }, [arr, arr1]);
+      return (
+        <div>
+          {JSON.stringify(arr)}
+          {arr1[0]}
+          {arr.length}
+        </div>
+      );
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <Render />
+        </>,
+      );
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      ARR.push('a');
+    });
+    act(() => {
+      const json = component.toJSON();
+      assert(
+        !(json instanceof Array) &&
+          json &&
+          json.children instanceof Array &&
+          json.children?.includes('2') &&
+          json.children?.includes('effect1'),
+      );
+      done();
+    });
+  });
+
+  it('#useObserve deep arr', (done) => {
+    class Bar {
+      @prop() name = '';
+    }
+    class Foo {
+      @prop() arr: Bar[] = [];
+    }
+    const foo = new Foo();
+    const Render = () => {
+      const trackableFoo = useObserve(foo);
+      useEffect(() => {
+        trackableFoo.arr.push(new Bar());
+        trackableFoo.arr.push(new Bar());
+      }, [trackableFoo]);
+
+      return <div>{trackableFoo.arr.map((item) => item.name)}</div>;
+    };
+    let component: renderer.ReactTestRenderer;
+    act(() => {
+      component = renderer.create(
+        <>
+          <Render />
+        </>,
+      );
+      const json = component.toJSON();
+      assert(json === null);
+    });
+    act(() => {
+      foo.arr[0] && (foo.arr[0].name = 'a');
+    });
+    act(() => {
+      const json = component.toJSON();
+      assert(
+        !(json instanceof Array) &&
+          json &&
+          json.children instanceof Array &&
+          json.children?.includes('a'),
+      );
+      done();
+    });
+  });
+});

package/src/observable/hooks.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+
+import { Tracker } from './tracker';
+import { Observability } from './utils';
+
+interface Action<T> {
+  key: keyof T;
+  value: any;
+}
+function isAction(data: Record<string, any> | undefined): data is Action<any> {
+  return !!data && data['key'] !== undefined && data['value'] !== undefined;
+}
+const reducer = <T>(state: Partial<T>, part: Action<T> | undefined) => {
+  if (isAction(part)) {
+    return { ...state, [part.key]: part.value };
+  }
+  return { ...state };
+};
+
+export function useObserve<T>(obj: T): T {
+  const [, dispatch] = React.useReducer<
+    (prevState: Partial<T>, action: Action<T>) => Partial<T>
+  >(reducer, {});
+  if (!Observability.canBeObservable(obj)) {
+    return obj;
+  }
+  return Tracker.track(obj, dispatch);
+}
+/**
+ * @deprecated
+ */
+export function useObservableState<T>(initialValue: T): T {
+  const object = React.useMemo(() => {
+    return initialValue;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return useObserve(object);
+}

package/src/observable/index.ts

@@ -0,0 +1,11 @@
+export * from './context';
+export * from './hooks';
+export * from './tracker';
+export * from './watch';
+export * from './notifier';
+export * from './observable';
+export * from './notifiable';
+export * from './decorator';
+export * from './utils';
+export * from './core';
+export * from './config';

package/src/observable/notifiable.spec.ts

@@ -0,0 +1,205 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import assert from 'assert';
+
+import { isPlainObject } from '../common/index.js';
+
+import { Notifiable, Notifier, Observability } from './index';
+
+describe('reactivity', () => {
+  it('#can be reactable', () => {
+    class Foo {}
+    const a = new Foo();
+    assert(!Notifiable.canBeNotifiable(a));
+    assert(!Notifiable.canBeNotifiable(null));
+    assert(!Notifiable.canBeNotifiable(undefined));
+    assert(Notifiable.canBeNotifiable([]));
+    assert(Notifiable.canBeNotifiable({}));
+    assert(Notifiable.canBeNotifiable(new Map()));
+    const arrValue = Notifiable.transform([]);
+    assert(Notifiable.canBeNotifiable(arrValue));
+  });
+  it('#transform base', () => {
+    const tValue = Notifiable.transform(undefined);
+    assert(tValue === undefined);
+    if (tValue) {
+      assert(Notifiable.getNotifier(tValue) === undefined);
+    }
+    const arr = ['a'];
+    const arrValue = Notifiable.transform(arr);
+    const arrNotifier = Notifiable.tryGetNotifier(arrValue);
+    const arrValue1 = Notifiable.transform(arr);
+    const arrNotifier1 = Notifiable.tryGetNotifier(arrValue1);
+    assert(Notifiable.canBeNotifiable(arr));
+    assert(Notifiable.is(arrValue));
+
+    assert(!!arrNotifier);
+    assert(arrValue !== arr);
+    assert(arrValue1 === arrValue);
+    assert(arrNotifier1 === arrNotifier);
+    const arrValue2 = Notifiable.transform(arrValue);
+    const arrNotifier2 = Notifiable.tryGetNotifier(arrValue2);
+
+    assert(arrNotifier === arrNotifier2);
+    assert(arrValue === arrValue2);
+    class A {}
+    const a = new A();
+    const objValue = Notifiable.transform(a);
+    const objNotifier = Notifiable.tryGetNotifier(objValue);
+    assert(!objNotifier);
+    assert(a === objValue);
+  });
+
+  it('#do not transform frozen', () => {
+    const fObj = Object.freeze({});
+    const fArr = Object.freeze([fObj]);
+    const obj = {
+      a: fArr,
+      o: fObj,
+    };
+    const arr = [fArr, fObj];
+    const tValue = Notifiable.transform(obj);
+    const tArr = Notifiable.transform(arr);
+    const tFArr = Notifiable.transform(fArr);
+    assert(tValue.a === fArr);
+    assert(tValue.o === fObj);
+    assert(tArr[0] === fArr);
+    assert(tArr[1] === fObj);
+    assert(tFArr[0] === fObj);
+  });
+
+  it('#runtime frozen', () => {
+    const obj = {};
+    const arr = [obj];
+    const foo = {
+      a: arr,
+      o: obj,
+    };
+    Object.freeze(obj);
+    Object.freeze(arr);
+    const tValue = Notifiable.transform(foo);
+    const tArr = Notifiable.transform(arr);
+    assert(tValue.a === arr);
+    assert(tValue.o === obj);
+    assert(tArr[0] === obj);
+  });
+
+  it('#transform array', () => {
+    const v: any[] = [];
+    const tValue = Notifiable.transform(v);
+    assert(tValue instanceof Array);
+    assert(Notifiable.is(tValue));
+    assert(Observability.getOrigin(tValue) === v);
+  });
+  it('#transform array nested', () => {
+    const v: any[] = [[]];
+    const tValue = Notifiable.transform(v);
+    assert(tValue[0] instanceof Array);
+    assert(Notifiable.is(tValue[0]));
+  });
+
+  it('#transform map', () => {
+    const v: Map<string, string> = new Map();
+    const tValue = Notifiable.transform(v);
+    assert(tValue instanceof Map);
+    assert(Notifiable.is(tValue));
+    assert(Observability.getOrigin(tValue) === v);
+  });
+  it('#transform map nested', () => {
+    const v: Map<string, any> = new Map();
+    v.set('a', {});
+    const tValue = Notifiable.transform(v);
+    assert(tValue instanceof Map);
+    assert(Notifiable.is(tValue.get('a')));
+  });
+
+  it('#transform plain object', () => {
+    const v = {};
+    const tValue = Notifiable.transform(v);
+    assert(isPlainObject(tValue));
+    assert(Notifiable.is(tValue));
+    assert(Observability.getOrigin(tValue) === v);
+  });
+  it('#transform plain object nested', () => {
+    const v = { a: {} };
+    const tValue = Notifiable.transform(v);
+    assert(isPlainObject(tValue.a));
+    assert(Notifiable.is(tValue.a));
+  });
+
+  it('#array notifier', () => {
+    const v: any[] = [];
+    const tValue = Notifiable.transform(v);
+    const notifier = Notifiable.tryGetNotifier(tValue);
+    let changedTimes = 0;
+    if (notifier) {
+      notifier.onChange(() => {
+        changedTimes += 1;
+      });
+    }
+    // Pushing brings changes, one is the set value and the other is the set length
+    tValue.push('a');
+    tValue.pop();
+    assert(tValue.length === 0);
+    assert(changedTimes === 3);
+  });
+  it('#map notifier', () => {
+    const v: Map<string, string> = new Map();
+    const tValue = Notifiable.transform(v);
+    const notifier = Notifiable.tryGetNotifier(tValue);
+    let changedTimes = 0;
+    if (notifier) {
+      notifier.onChange(() => {
+        changedTimes += 1;
+      });
+    }
+    tValue.set('a', 'a');
+    const aValue = tValue.get('a');
+    assert(aValue === 'a');
+    assert(tValue.size === 1);
+    tValue.set('b', 'b');
+    tValue.delete('a');
+    tValue.clear();
+    assert(changedTimes === 4);
+  });
+
+  it('#plainObject notifier', () => {
+    const v: Record<any, any> = { a: '', b: { c: '' }, d: '' };
+    const tValue = Notifiable.transform(v);
+    const notifier = Notifiable.tryGetNotifier(tValue);
+    const tValue1 = Notifiable.transform(v['b']);
+    const notifier1 = Notifiable.tryGetNotifier(tValue1);
+    let changedTimes = 0;
+    if (notifier) {
+      notifier.onChange(() => {
+        changedTimes += 1;
+      });
+    }
+    if (notifier1) {
+      notifier1.onChange(() => {
+        changedTimes += 1;
+      });
+    }
+    tValue['a'] = 'a';
+    assert(tValue['a'] === 'a');
+    tValue['b'].c = 'c';
+    assert(tValue['b'].c === 'c');
+    delete tValue['d'];
+    assert(changedTimes === 3);
+  });
+
+  it('#get notifier', () => {
+    const foo = {
+      a: {
+        b: {
+          c: 1,
+        },
+      },
+    };
+    const f = Notifiable.transform(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);
+  });
+});

package/src/observable/notifiable.ts

@@ -0,0 +1,185 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable prefer-spread */
+import { isPlainObject } from '../common/index.js';
+
+import { ObservableSymbol } from './core';
+import { Notifier } from './notifier';
+import { isReadonly, Observability } from './utils';
+
+export interface Notifiable {
+  [ObservableSymbol.Notifier]: Notifier;
+}
+
+export namespace Notifiable {
+  export const token = Symbol('Notifiable');
+  export function is(target: any): target is Notifiable {
+    return Observability.isObject(target) && !!target[ObservableSymbol.Notifier];
+  }
+  export function getNotifier(target: Notifiable): Notifier {
+    return target[ObservableSymbol.Notifier];
+  }
+  export function tryGetNotifier(target: any): Notifier | undefined {
+    if (is(target)) {
+      return getNotifier(target);
+    }
+    return undefined;
+  }
+  export function set<T extends object>(target: T, value: Notifiable): void {
+    Reflect.defineMetadata(token, value, target);
+  }
+
+  export function get<T extends object>(target: T): T & Notifiable {
+    return Reflect.getMetadata(token, target);
+  }
+  export function canBeNotifiable(value: any): boolean {
+    if (!Observability.isObject(value)) {
+      return false;
+    }
+    if (Object.isFrozen(value)) {
+      return false;
+    }
+    if (value instanceof Array) {
+      return true;
+    }
+    if (value instanceof Map) {
+      return true;
+    }
+    if (isPlainObject(value)) {
+      return true;
+    }
+    return false;
+  }
+  export function transform<T = any>(target: T): T | (T & Notifiable) {
+    if (is(target)) {
+      return target;
+    }
+    if (!Observability.canBeObservable(target)) {
+      return target;
+    }
+    const origin = Observability.getOrigin(target);
+    const notifiable = Notifiable.get(origin);
+    if (notifiable) {
+      return notifiable;
+    }
+    if (origin instanceof Array) {
+      return transformArray(origin);
+    }
+    if (origin instanceof Map) {
+      return transformMap(origin);
+    }
+    if (isPlainObject(origin)) {
+      return transformPlainObject(origin);
+    }
+    return target;
+  }
+
+  export function transformArray<T extends Array<any>>(target: T): T & Notifiable {
+    const notifier = Notifier.getOrCreate(target);
+    const notifiable = new Proxy(target, {
+      get(self: any, property: string | symbol): any {
+        if (property === ObservableSymbol.Notifier) {
+          return notifier;
+        }
+        if (property === ObservableSymbol.Self) {
+          return self;
+        }
+        const result = Reflect.get(self, property);
+        if (isReadonly(target, property)) {
+          return result;
+        }
+        const origin = Observability.getOrigin(result);
+        return Notifiable.transform(origin);
+      },
+      set(self: any, prop: string | symbol, value: any): any {
+        const result = Reflect.set(self, prop, value);
+        notifier.notify(value);
+        return result;
+      },
+    });
+    set(target, notifiable);
+    return notifiable;
+  }
+
+  export function transformPlainObject<T extends object>(target: T): T & Notifiable {
+    const notifier = Notifier.getOrCreate(target);
+    const notifiable = new Proxy(target, {
+      get(self: any, property: string | symbol): any {
+        if (property === ObservableSymbol.Notifier) {
+          return notifier;
+        }
+        if (property === ObservableSymbol.Self) {
+          return self;
+        }
+        const result = Reflect.get(self, property);
+        if (isReadonly(target, property)) {
+          return result;
+        }
+        const origin = Observability.getOrigin(result);
+        return Notifiable.transform(origin);
+      },
+      set(self: any, prop: string | symbol, value: any): any {
+        const result = Reflect.set(self, prop, value);
+        notifier.notify(value);
+        return result;
+      },
+      deleteProperty(self: any, prop: string | symbol): boolean {
+        const result = Reflect.deleteProperty(self, prop);
+        notifier.notify(undefined);
+        return result;
+      },
+    });
+    set(target, notifiable);
+    return notifiable;
+  }
+
+  export function transformMap<T extends Map<any, any>>(target: T): T & Notifiable {
+    const notifier = Notifier.getOrCreate(target);
+    const notifiable = new Proxy(target, {
+      get(self: any, prop: string | symbol): any {
+        if (prop === ObservableSymbol.Notifier) {
+          return notifier;
+        }
+        if (prop === ObservableSymbol.Self) {
+          return self;
+        }
+        let result;
+        switch (prop) {
+          case 'delete':
+            return (...args: any) => {
+              result = self.delete.apply(self, args);
+              notifier.notify(undefined);
+              return result;
+            };
+          case 'clear':
+            return (...args: any) => {
+              result = (self as Map<any, any>).clear.apply(self, args);
+              notifier.notify(undefined);
+              return result;
+            };
+          case 'set':
+            return (...args: any) => {
+              result = self.set.apply(self, args);
+              notifier.notify(undefined);
+              return result;
+            };
+          case 'get':
+            return (...args: any) => {
+              result = self.get.apply(self, args);
+              const origin = Observability.getOrigin(result);
+              return Notifiable.transform(origin);
+            };
+          default:
+            result = Reflect.get(self, prop);
+            if (typeof result === 'function') {
+              return result.bind(self);
+            } else {
+              const origin = Observability.getOrigin(result);
+              return Notifiable.transform(origin);
+            }
+        }
+      },
+    });
+    set(target, notifiable);
+    return notifiable;
+  }
+}