@netless/window-manager 0.4.0-canary.5 → 0.4.0-canary.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.5",
+  "version": "0.4.0-canary.6",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",

package/src/App/Storage/StorageEvent.ts

@@ -0,0 +1,21 @@
+export type StorageEventListener<T> = (event: T) => void;
+
+export class StorageEvent<TMessage> {
+  listeners = new Set<StorageEventListener<TMessage>>();
+
+  get length(): number {
+    return this.listeners.size;
+  }
+
+  dispatch(message: TMessage): void {
+    this.listeners.forEach(callback => callback(message));
+  }
+
+  addListener(listener: StorageEventListener<TMessage>): void {
+    this.listeners.add(listener);
+  }
+
+  removeListener(listener: StorageEventListener<TMessage>): void {
+    this.listeners.delete(listener);
+  }
+}

package/src/App/Storage/index.ts

@@ -0,0 +1,243 @@
+import type { AkkoObjectUpdatedProperty } from "white-web-sdk";
+import { get, has, isObject } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
+import type { AppContext } from "../../AppContext";
+import { safeListenPropsUpdated } from "../../Utils/Reactive";
+import { isRef, makeRef, plainObjectKeys } from "./utils";
+import type { Diff, MaybeRefValue, RefValue } from "./typings";
+import { StorageEvent } from "./StorageEvent";
+
+export * from './typings';
+
+const STORAGE_NS = "_WM-STORAGE_";
+
+export class Storage<TState = any> implements Storage<TState> {
+  readonly id: string;
+
+  private readonly _context: AppContext<{ [STORAGE_NS]: TState }>;
+  private readonly _sideEffect = new SideEffectManager();
+  private _state: TState;
+  private _destroyed = false;
+
+  private _refMap = new WeakMap<any, RefValue>();
+
+  /**
+   * `setState` alters local state immediately before sending to server. This will cache the old value for onStateChanged diffing.
+   */
+  private _lastValue = new Map<string | number | symbol, TState[Extract<keyof TState, string>]>();
+
+  constructor(context: AppContext<any>, id: string, defaultState?: TState) {
+    if (id == null) {
+      throw new Error("Cannot create Storage with empty id.");
+    }
+
+    if (defaultState && !isObject(defaultState)) {
+      throw new Error(`Default state for Storage ${id} is not an object.`);
+    }
+
+    this._context = context;
+    this.id = id;
+
+    const attrs = context.getAttributes();
+    this._state = {} as TState;
+    const rawState = get<TState>(attrs, [STORAGE_NS, id], this._state);
+
+    if (this._context.getIsWritable()) {
+      if (!isObject(rawState) || rawState === this._state) {
+        if (!attrs[STORAGE_NS]) {
+          this._context.updateAttributes([STORAGE_NS], {});
+        }
+        this._context.updateAttributes([STORAGE_NS, this.id], this._state);
+        if (defaultState) {
+          this.setState(defaultState);
+        }
+      } else {
+        // strip mobx
+        plainObjectKeys(rawState).forEach(key => {
+          try {
+            const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
+            if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
+              this._state[key] = rawValue.v;
+              if (isObject(rawValue.v)) {
+                this._refMap.set(rawValue.v, rawValue);
+              }
+            } else {
+              this._state[key] = rawValue;
+            }
+          } catch (e) {
+            console.error(e);
+          }
+        });
+      }
+    }
+
+    this._sideEffect.addDisposer(
+      safeListenPropsUpdated(
+        () => get(context.getAttributes(), [STORAGE_NS, this.id]),
+        this._updateProperties.bind(this),
+        this.destroy.bind(this)
+      )
+    );
+  }
+
+  get state(): Readonly<TState> {
+    if (this._destroyed) {
+      console.warn(`Accessing state on destroyed Storage "${this.id}"`)
+    }
+    return this._state;
+  }
+
+  readonly onStateChanged = new StorageEvent<Diff<TState>>();
+
+  ensureState(state: Partial<TState>): void {
+    return this.setState(
+      plainObjectKeys(state).reduce((payload, key) => {
+        if (!has(this._state, key)) {
+          payload[key] = state[key];
+        }
+        return payload;
+      }, {} as Partial<TState>)
+    );
+  }
+
+  setState(state: Partial<TState>): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot call setState on destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot setState on Storage "${this.id}" without writable access`), state);
+      return;
+    }
+
+    const keys = plainObjectKeys(state);
+    if (keys.length > 0) {
+      keys.forEach(key => {
+        const value = state[key];
+        if (value === this._state[key]) {
+          return;
+        }
+
+        if (value === void 0) {
+          this._lastValue.set(key, this._state[key]);
+          delete this._state[key];
+          this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+        } else {
+          this._lastValue.set(key, this._state[key]);
+          this._state[key] = value as TState[Extract<keyof TState, string>];
+
+          let payload: MaybeRefValue<typeof value> = value;
+          if (isObject(value)) {
+            let refValue = this._refMap.get(value);
+            if (!refValue) {
+              refValue = makeRef(value);
+              this._refMap.set(value, refValue);
+            }
+            payload = refValue;
+          }
+
+          this._context.updateAttributes([STORAGE_NS, this.id, key], payload);
+        }
+      });
+    }
+  }
+
+  emptyStore(): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot empty Storage "${this.id}" without writable access.`));
+      return;
+    }
+
+    this._context.updateAttributes([STORAGE_NS, this.id], {});
+  }
+
+  deleteStore(): void {
+    if (!this._context.getIsWritable()) {
+      console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
+      return;
+    }
+
+    this.destroy();
+
+    this._context.updateAttributes([STORAGE_NS, this.id], void 0);
+  }
+
+  get destroyed(): boolean {
+    return this._destroyed;
+  }
+
+  destroy() {
+    this._destroyed = true;
+    this._sideEffect.flushAll();
+  }
+
+  private _updateProperties(actions: ReadonlyArray<AkkoObjectUpdatedProperty<TState, string>>): void {
+    if (this._destroyed) {
+      console.error(new Error(`Cannot call _updateProperties on destroyed Storage "${this.id}".`));
+      return;
+    }
+
+    if (actions.length > 0) {
+      const diffs: Diff<TState> = {};
+
+      for (let i = 0; i < actions.length; i++) {
+        try {
+          const action = actions[i]
+          const key = action.key as Extract<keyof TState, string>;
+          const value = isObject(action.value) ? JSON.parse(JSON.stringify(action.value)) : action.value;
+          let oldValue: TState[Extract<keyof TState, string>] | undefined;
+          if (this._lastValue.has(key)) {
+            oldValue = this._lastValue.get(key);
+            this._lastValue.delete(key);
+          }
+
+          switch (action.kind) {
+            case 2: {
+              // Removed
+              if (has(this._state, key)) {
+                oldValue = this._state[key];
+                delete this._state[key];
+              }
+              diffs[key] = { oldValue };
+              break;
+            }
+            default: {
+              let newValue = value;
+
+              if (isRef<TState[Extract<keyof TState, string>]>(value)) {
+                const { k, v } = value;
+                const curValue = this._state[key];
+                if (isObject(curValue) && this._refMap.get(curValue)?.k === k) {
+                  newValue = curValue;
+                } else {
+                  newValue = v;
+                  if (isObject(v)) {
+                    this._refMap.set(v, value);
+                  }
+                }
+              }
+
+              if (newValue !== this._state[key]) {
+                oldValue = this._state[key];
+                this._state[key] = newValue;
+              }
+
+              diffs[key] = { newValue, oldValue };
+              break;
+            }
+          }
+        } catch (e) {
+          console.error(e)
+        }
+      }
+
+      this.onStateChanged.dispatch(diffs);
+    }
+  }
+}

package/src/App/Storage/typings.ts

@@ -0,0 +1,15 @@
+export type RefValue<TValue = any> = { k: string; v: TValue; __isRef: true };
+
+export type ExtractRawValue<TValue> = TValue extends RefValue<infer TRefValue> ? TRefValue : TValue;
+
+export type AutoRefValue<TValue> = RefValue<ExtractRawValue<TValue>>;
+
+export type MaybeRefValue<TValue> = TValue | AutoRefValue<TValue>;
+
+export type DiffOne<T> = { oldValue?: T; newValue?: T };
+
+export type Diff<T> = { [K in keyof T]?: DiffOne<T[K]> };
+
+export type StorageOnSetStatePayload<TState = unknown> = {
+  [K in keyof TState]?: MaybeRefValue<TState[K]>;
+};

package/src/App/Storage/utils.ts

@@ -0,0 +1,17 @@
+import { has } from "lodash";
+import { genUID } from "side-effect-manager";
+import type { AutoRefValue, ExtractRawValue, RefValue } from "./typings";
+
+export const plainObjectKeys = Object.keys as <T>(o: T) => Array<Extract<keyof T, string>>;
+
+export function isRef<TValue = unknown>(e: unknown): e is RefValue<TValue> {
+  return Boolean(has(e, '__isRef'));
+}
+
+export function makeRef<TValue>(v: TValue): RefValue<TValue> {
+  return { k: genUID(), v, __isRef: true };
+}
+
+export function makeAutoRef<TValue>(v: TValue): AutoRefValue<TValue> {
+  return isRef<ExtractRawValue<TValue>>(v) ? v : makeRef(v as ExtractRawValue<TValue>);
+}

package/src/AppContext.ts

@@ -15,6 +15,7 @@ import type { BoxManager } from "./BoxManager";
 import type { AppEmitterEvent } from "./index";
 import type { AppManager } from "./AppManager";
 import type { AppProxy } from "./AppProxy";
+import { Storage } from './App/Storage';
 
 export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public readonly emitter: Emittery<AppEmitterEvent<TAttrs>>;
@@ -120,4 +121,12 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
     public getAppOptions(): AppOptions | undefined {
         return typeof this.appOptions === 'function' ? (this.appOptions as () => AppOptions)() : this.appOptions
     }
+
+    public createStorage<TState>(storeId: string, defaultState?: TState): Storage<TState> {
+        const storage = new Storage(this, storeId, defaultState);
+        this.emitter.on("destroy", () => {
+            storage.destroy();
+        });
+        return storage;
+    }
 }

package/src/AppManager.ts

@@ -282,7 +282,7 @@ export class AppManager {
         emitter.emit("observerIdChange", this.displayer.observerId);
     };
 
-    private displayerWritableListener = (isReadonly: boolean) => {
+    public displayerWritableListener = (isReadonly: boolean) => {
         const isWritable = !isReadonly;
         const isManualWritable =
             this.windowManger.readonly === undefined || this.windowManger.readonly === false;

package/src/ReconnectRefresher.ts

@@ -1,5 +1,4 @@
 import { debounce, isFunction } from "lodash";
-import { emitter } from "./index";
 import { log } from "./Utils/log";
 import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";

package/src/Utils/Reactive.ts

@@ -1,5 +1,6 @@
 import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
 import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
+import { isObject } from "lodash";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -30,7 +31,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
-    callback: AkkoObjectUpdatedListener<T>
+    callback: AkkoObjectUpdatedListener<T>,
+    onDestroyed?: (props: unknown) => void
   ) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
@@ -41,8 +43,12 @@ export const safeListenPropsUpdated = <T>(
           disposeListenUpdated = null;
         }
         const props = getProps();
-        disposeListenUpdated = () => unlistenUpdated(props, callback);
-        listenUpdated(props, callback);
+        if (isObject(props)) {
+          disposeListenUpdated = () => unlistenUpdated(props, callback);
+          listenUpdated(props, callback);
+        } else {
+          onDestroyed?.(props);
+        }
       },
       { fireImmediately: true }
     );

package/src/index.ts

@@ -186,7 +186,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public static containerSizeRatio = DEFAULT_CONTAINER_RATIO;
     private static isCreated = false;
 
-    public version = "0.4.0-canary.5";
+    public version = "0.4.0-canary.6";
 
     public appListeners?: AppListeners;
 
@@ -479,10 +479,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
      * 设置所有 app 的 readonly 模式
      */
     public setReadonly(readonly: boolean): void {
-        if (this.room?.isWritable) {
-            this.readonly = readonly;
-            this.appManager?.boxManager?.setReadonly(readonly);
-        }
+        this.readonly = readonly;
+        this.boxManager?.setReadonly(readonly);
     }
 
     /**