@difizen/libro-common 0.3.3 → 1.0.0

package/src/core/view/view-open-handler.ts

@@ -0,0 +1,139 @@
+import type { Event, MaybePromise, URI } from '../../common/index.js';
+import { Emitter } from '../../common/index.js';
+import { inject, postConstruct, singleton } from '../../ioc/index.js';
+
+import type { BaseView } from './default-view';
+import type { OpenHandler } from './open-handler';
+import { SlotViewManager } from './slot-view-manager';
+import { ViewManager } from './view-manager';
+import type { ViewOpenOption } from './view-protocol';
+import { RootSlotId } from './view-protocol';
+
+export interface ViewOpenHandlerOptions extends ViewOpenOption {
+  slot?: string;
+  viewOptions?: any;
+}
+
+/**
+ * Generic base class for {@link OpenHandler}s that are opening a View for a given {@link URI}.
+ */
+@singleton()
+export abstract class ViewOpenHandler<W extends BaseView> implements OpenHandler {
+  protected readonly viewManager!: ViewManager;
+
+  protected readonly slotViewManager!: SlotViewManager;
+
+  constructor(
+    @inject(ViewManager) viewManager: ViewManager,
+    @inject(SlotViewManager) slotViewManager: SlotViewManager,
+  ) {
+    this.viewManager = viewManager;
+    this.slotViewManager = slotViewManager;
+  }
+
+  protected readonly onCreatedEmitter = new Emitter<W>();
+  /**
+   * Emit when a new View is created.
+   */
+  readonly onCreated: Event<W> = this.onCreatedEmitter.event;
+
+  @postConstruct()
+  protected init(): void {
+    this.viewManager.onDidCreateView(({ factoryId, view }) => {
+      if (factoryId === this.id) {
+        this.onCreatedEmitter.fire(view as W);
+      }
+    });
+  }
+
+  /**
+   * The view open handler id.
+   *
+   * #### Implementation
+   * - A view factory for this id should be registered.
+   */
+  abstract readonly id: string;
+  abstract canHandle(uri: URI, options?: ViewOpenHandlerOptions): MaybePromise<number>;
+
+  /**
+   * Open a View for the given uri and options.
+   * Reject if the given options are not View options or a View cannot be opened.
+   * @param uri the uri of the resource that should be opened.
+   * @param options the View opener options.
+   *
+   * @returns promise of the View that resolves when the View has been opened.
+   */
+  async open(uri: URI, options?: ViewOpenHandlerOptions): Promise<W> {
+    const view = await this.getOrCreateView(uri, options);
+    await this.doOpen(view, options || {});
+    return view;
+  }
+  protected async doOpen(view: W, options: ViewOpenHandlerOptions): Promise<void> {
+    // if (!view.isAttached) {
+    const { slot = RootSlotId, ...openOption } = options;
+    this.slotViewManager.addView(view, slot, openOption);
+    // }
+  }
+
+  /**
+   * Tries to get an existing View for the given uri.
+   * @param uri the uri of the View.
+   *
+   * @returns a promise that resolves to the existing View or `undefined` if no View for the given uri exists.
+   */
+  getByUri(uri: URI): Promise<W | undefined> {
+    return this.getView(uri);
+  }
+
+  /**
+   * Return an existing View for the given uri or creates a new one.
+   *
+   * It does not open a View, use {@link ViewOpenHandler#open} instead.
+   * @param uri uri of the View.
+   *
+   * @returns a promise of the existing or newly created View.
+   */
+  getOrCreateByUri(uri: URI): Promise<W> {
+    return this.getOrCreateView(uri);
+  }
+
+  /**
+   * Retrieves all open Views that have been opened by this handler.
+   *
+   * @returns all open Views for this open handler.
+   */
+  get all(): Promise<W[]> {
+    return (async () => {
+      return (await this.viewManager.getViews(this.id)) as W[];
+    })();
+  }
+
+  protected async getView(
+    uri: URI,
+    options?: ViewOpenHandlerOptions,
+  ): Promise<W | undefined> {
+    const ViewOptions = this.createViewOptions(uri, options);
+    return this.viewManager.getView<W>(this.id, ViewOptions);
+  }
+
+  protected getOrCreateView(uri: URI, options?: ViewOpenHandlerOptions): Promise<W> {
+    const ViewOptions = this.createViewOptions(uri, options);
+    return this.viewManager.getOrCreateView<W>(this.id, ViewOptions);
+  }
+
+  protected abstract createViewOptions(
+    uri: URI,
+    options?: ViewOpenHandlerOptions,
+  ): Record<any, any>;
+
+  /**
+   * Closes all Views that have been opened by this open handler.
+   * @param options the close options that should be applied to all Views.
+   *
+   * @returns a promise of all closed Views that resolves after they have been closed.
+   */
+  async closeAll(slot: string): Promise<void[]> {
+    const all = await this.all;
+    return Promise.all(all.map((view) => this.slotViewManager.removeView(view, slot)));
+  }
+}

package/src/core/view/view-protocol.ts

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { MaybePromise, Event, Disposable, Newable } from '../../common/index.js';
+import { Syringe } from '../../ioc/index.js';
+import type React from 'react';
+
+import type { ManaModule } from '../module';
+
+export enum ViewPriority {
+  PRIOR = 1000,
+  DEFAULT = 100,
+  IDLE = -1,
+}
+export interface ViewSize {
+  width?: number;
+  height?: number;
+}
+
+export const OriginViewComponent = Symbol('OriginViewComponent');
+export const ViewComponent = Symbol('ViewComponent');
+export type ViewComponent<P = any> = React.FC<P> | React.ForwardRefExoticComponent<P>;
+
+export interface Title<T> {
+  /**
+   * The object which owns the title.
+   */
+  owner: T;
+  /**
+   * The label for the title.
+   */
+  label?: React.ReactNode | React.FC;
+  /**
+   * The icon class name for the title.
+   */
+  icon?: React.ReactNode | React.FC;
+  /**
+   * The caption for the title.
+   */
+  caption?: string;
+  /**
+   * The extra class name for the title.
+   */
+  className?: string;
+  /**
+   * The closable state for the title.
+   */
+  closable?: boolean;
+}
+
+export interface View extends Disposable {
+  /**
+   * Ref of container dom node owned by the view.
+   */
+  container?: React.RefObject<HTMLDivElement> | null | undefined;
+  /**
+   * Whether the view has been disposed.
+   */
+  isDisposed?: boolean | undefined;
+  /**
+   * Whether the view is added to the slot/view.
+   */
+  isAttached?: boolean | undefined;
+  /**
+   * Whether the view is visible.
+   */
+  isVisible?: boolean | undefined;
+  /**
+   * The id of the view.
+   */
+  id: string;
+  /**
+   * The title of the view.
+   */
+  title: Title<View>;
+  /**
+   * The tilabeltle of the view.
+   * @deprecated
+   */
+  label?: React.ReactNode;
+  /**
+   * The React Render of the view.
+   */
+  view: ViewComponent;
+  /**
+   * Event fire when the view is disposed.
+   */
+  onDisposed: Event<void>;
+
+  /**
+   * The classname of view container
+   */
+  className?: string;
+
+  onViewResize?: undefined | ((size: ViewSize) => void);
+  onViewMount?: undefined | (() => void);
+  onViewUnmount?: undefined | (() => void);
+}
+
+export namespace View {
+  export function is(data?: Record<string, any>): data is View {
+    return (
+      !!data &&
+      typeof data === 'object' &&
+      'id' in data &&
+      'view' in data &&
+      typeof data['view'] === 'function'
+    );
+  }
+}
+
+export const RootViewId = '__ROOT_VIEW__';
+
+export const ViewFactory = Syringe.defineToken('ViewFactory');
+export const ViewOption = Symbol('ViewOption');
+export const ViewInstance = Symbol('ViewInstance');
+
+export const ViewDefineToken = Symbol('ViewDefineToken');
+
+export interface ViewFactory {
+  /**
+   * The factory id.
+   */
+  readonly id: string;
+
+  /**
+   * Creates a view using the given options.
+   * @param options factory specific information as serializable JSON data.
+   * @returns the newly created view or a promise of the view
+   */
+  createView: (options?: any, module?: ManaModule) => MaybePromise<View>;
+}
+
+/**
+ *  The default behavior configuration of the view
+ */
+export interface ViewPreference<T = Record<any, any>> {
+  /**
+   * To create view on application start
+   */
+  view: Newable<View>;
+  autoCreate?: boolean;
+  slot?: string;
+  priority?: number;
+  options?: T;
+  openOptions?: ViewOpenOption;
+}
+
+export type ViewPreferenceContribution = ViewPreference[];
+export const ViewPreferenceContribution = Syringe.defineToken(
+  'ViewPreferenceContribution',
+);
+
+export interface StatefulView {
+  storeState: () => Record<string, any> | undefined;
+  restoreState: (oldState: Record<string, any>) => void;
+}
+
+export namespace StatefulView {
+  export function is(arg: any): arg is StatefulView {
+    return (
+      arg !== undefined &&
+      typeof arg.storeState === 'function' &&
+      typeof arg.restoreState === 'function'
+    );
+  }
+}
+
+export interface SlotViewOption {
+  className?: string;
+  area: string;
+  sort?: boolean;
+}
+export namespace SlotViewOption {
+  export function is(data?: Record<string, any>): data is SlotViewOption {
+    return !!data && typeof data === 'object' && 'area' in data;
+  }
+}
+
+export interface ViewOpenOption {
+  order?: string;
+  reveal?: boolean;
+}
+
+export const RootSlotId = '__mana_root_slot__';
+export const PortalSlotId = '__mana_portal_slot__';
+
+export interface SlotView extends View {
+  getViewOption: (child: View) => ViewOpenOption | undefined;
+  addView: (view: View, option?: ViewOpenOption) => Promise<Disposable>;
+  removeView: (view: View) => void;
+  contains: (instanceOrId: View | string) => boolean;
+  children: View[];
+}
+
+export namespace SlotView {
+  export function is(data?: Record<string, any>): data is SlotView {
+    return !!data && typeof data === 'object' && 'addView' in data;
+  }
+}
+
+/**
+ *  The default behavior configuration of the view
+ */
+export interface SlotPreference<Options = Record<string, any>> {
+  /**
+   * The default view for the slot
+   */
+  slot: string;
+  view: Newable<View>;
+  priority?: number;
+  options?: Options;
+}
+
+export type SlotPreferenceContribution = SlotPreference[];
+export const SlotPreferenceContribution = Syringe.defineToken(
+  'SlotPreferenceContribution',
+);
+
+export const ViewContextMetaKey = Symbol('ViewContextMetaKey');

package/src/core/view/view-render.tsx

@@ -0,0 +1,39 @@
+import { useInject } from '../../observable/index.js';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+import { isWrapperViewComponent } from './view-container';
+import { ViewContext } from './view-context';
+import type { View } from './view-protocol';
+import { OriginViewComponent } from './view-protocol';
+import { ViewComponent } from './view-protocol';
+
+// import { ViewManager } from './view-manager';
+
+export interface ViewRenderProps {
+  view: View;
+  shadow?: boolean;
+  children?: ReactNode | ReactNode[];
+}
+
+const ViewComponentRender = (props: ViewRenderProps) => {
+  const { shadow, children } = props;
+  const Component = useInject<ViewComponent>(ViewComponent);
+  const OriginComponent = useInject<ViewComponent>(OriginViewComponent);
+  return shadow ? (
+    <OriginComponent {...props}>{children}</OriginComponent>
+  ) : (
+    <Component {...props}>{children}</Component>
+  );
+};
+export const ViewRender = memo(function ViewRender(props: ViewRenderProps) {
+  const { view, shadow } = props;
+  if (isWrapperViewComponent(view.view) && !shadow) {
+    return <view.view {...props} />;
+  }
+  return (
+    <ViewContext view={view}>
+      <ViewComponentRender {...props} />
+    </ViewContext>
+  );
+});

package/src/core/view/view-storage.ts

@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { prop } from '../../observable/index.js';
+import { inject, singleton } from '../../ioc/index.js';
+
+import { DebugService, StorageService } from '../common';
+
+import { SlotViewManager } from './slot-view-manager';
+import { ViewManager } from './view-manager';
+import type { View, ViewOpenOption } from './view-protocol';
+import { RootViewId } from './view-protocol';
+import { SlotView } from './view-protocol';
+import { StatefulView } from './view-protocol';
+
+interface SavedView {
+  factoryId: string;
+  // viewType: 'slotView' | 'view';
+  option: any;
+  slot?: string | undefined;
+  children?: SavedView[] | undefined;
+  slots?: SavedView[] | undefined;
+  state?: any | undefined;
+  openOption?: ViewOpenOption | undefined;
+}
+export namespace SavedView {
+  export function is(data?: Record<string, any>): data is SavedView {
+    return !!data && typeof data === 'object' && 'factoryId' in data;
+  }
+}
+
+const ShouldPreventStoreViewKey = 'mana-should-prevent-store-view';
+
+@singleton()
+export class ViewStorage {
+  protected storageKey = 'mana-view-info';
+  protected restoreCount = 0;
+  protected readonly viewManager: ViewManager;
+  protected readonly slotViewManager: SlotViewManager;
+  protected readonly debugService: DebugService;
+  protected readonly storageService: StorageService;
+
+  @prop()
+  protected shouldStoreViews = false;
+
+  get canStoreView(): boolean {
+    return this.shouldStoreViews;
+  }
+  get onlyRootView(): boolean {
+    return this.restoreCount < 2;
+  }
+
+  constructor(
+    @inject(ViewManager) viewManager: ViewManager,
+    @inject(SlotViewManager) slotViewManager: SlotViewManager,
+    @inject(DebugService) debugService: DebugService,
+    @inject(StorageService) storageService: StorageService,
+  ) {
+    this.viewManager = viewManager;
+    this.slotViewManager = slotViewManager;
+    this.debugService = debugService;
+    this.storageService = storageService;
+
+    if (localStorage.getItem(ShouldPreventStoreViewKey) === 'once') {
+      localStorage.removeItem(ShouldPreventStoreViewKey);
+    }
+
+    if (localStorage.getItem(ShouldPreventStoreViewKey) === 'false') {
+      this.shouldStoreViews = true;
+    }
+  }
+
+  disableStoreView() {
+    this.shouldStoreViews = false;
+    this.storageService.setData(this.storageKey, undefined);
+    localStorage.setItem(ShouldPreventStoreViewKey, 'true');
+  }
+
+  enableStoreView() {
+    this.shouldStoreViews = true;
+    localStorage.setItem(ShouldPreventStoreViewKey, 'false');
+  }
+
+  resetViews() {
+    this.shouldStoreViews = false;
+    this.storageService.setData(this.storageKey, undefined);
+    localStorage.removeItem(ShouldPreventStoreViewKey);
+    window.location.reload();
+  }
+
+  async saveViews(): Promise<void> {
+    const rootView = await this.viewManager.getView(RootViewId);
+    let viewInfo: SavedView | undefined;
+    if (rootView) {
+      viewInfo = this.getViewInfo(rootView);
+    }
+    this.storageService.setData(this.storageKey, viewInfo);
+  }
+
+  protected getViewInfo(
+    view: View,
+    slot?: string,
+    openOption?: ViewOpenOption,
+  ): SavedView | undefined {
+    const baseInfo = this.getViewBaseInfo(view, slot);
+    if (!baseInfo) {
+      return;
+    }
+    this.debugService(
+      'store view >>>>>>>>>>>>>>>',
+      baseInfo.factoryId,
+      baseInfo.option,
+      baseInfo.slot,
+    );
+    return {
+      ...baseInfo,
+      slots: this.getViewSlotsInfo(view),
+      children: this.getViewChildrenInfo(view),
+      openOption: openOption,
+    };
+  }
+
+  protected getViewBaseInfo(view: View, slot?: string): SavedView | undefined {
+    const factoryId = this.viewManager.getFactoryIdByView(view);
+    if (!factoryId) {
+      return;
+    }
+    const option = this.viewManager.getViewOption(view);
+    return {
+      factoryId,
+      slot,
+      option,
+      state: StatefulView.is(view) ? view.storeState() : undefined,
+    };
+  }
+  protected getViewSlotsInfo(parentView: View): SavedView[] | undefined {
+    const slotNames = this.slotViewManager.getSlotChildren(parentView);
+    if (!slotNames) {
+      return undefined;
+    }
+    const slots = slotNames
+      .map((slot) => {
+        const slotView = this.slotViewManager.getSlotView(slot);
+        if (slotView) {
+          return this.getViewInfo(slotView, slot);
+        }
+        return undefined;
+      })
+      .filter(SavedView.is);
+    if (slots.length > 0) {
+      return slots;
+    }
+    return undefined;
+  }
+  protected getViewChildrenInfo(view: View): SavedView[] | undefined {
+    if (!SlotView.is(view)) {
+      return undefined;
+    }
+    const children = view.children
+      .map((item) => {
+        const openOption = view.getViewOption(item);
+        delete openOption?.reveal;
+        return this.getViewInfo(item, undefined, openOption);
+      })
+      .filter(SavedView.is);
+    if (children.length > 0) {
+      return children;
+    }
+    return undefined;
+  }
+
+  async getSavedView(): Promise<SavedView | undefined> {
+    const viewInfo = await this.storageService.getData<SavedView>(this.storageKey);
+    return viewInfo;
+  }
+
+  async restoreView(savedView: SavedView): Promise<View | undefined> {
+    const { factoryId, option, state } = savedView;
+    try {
+      this.debugService(
+        'restore view >>>>>>>>>>>>>>>',
+        factoryId,
+        option,
+        savedView.slot,
+      );
+      const view = await this.viewManager.getOrCreateView(factoryId, option);
+      if (savedView.slot) {
+        this.slotViewManager.setSlotView(savedView.slot, view);
+      }
+      if (savedView.slots) {
+        await Promise.all(
+          savedView.slots.map(async (item) => await this.restoreView(item)),
+        );
+      }
+      if (savedView.children) {
+        await Promise.all(
+          savedView.children.map(async (item) => {
+            const child = await this.restoreView(item);
+            if (child && SlotView.is(view) && savedView.slot) {
+              await this.slotViewManager.addView(
+                child,
+                savedView.slot,
+                item.openOption,
+              );
+            }
+          }),
+        );
+      }
+      if (StatefulView.is(view)) {
+        view.restoreState(state);
+      }
+      if (!SlotView.is(view)) {
+        this.restoreCount += 1;
+      }
+      return view;
+    } catch (error) {
+      return undefined;
+    }
+  }
+}

package/src/index.ts

@@ -10,3 +10,4 @@ export * from './display-wrapper.js';
 export * from './protocol/index.js';
 export * from './dom.js';
 export * from './mime.js';
+// export * from './common/index.js';

package/src/ioc/container-api.ts

@@ -0,0 +1,22 @@
+import type { interfaces } from 'inversify';
+
+import type { Syringe } from './core';
+
+export const ContainerCacheToken = Symbol('ContainerCacheToken');
+export class ContainerAPI {
+  static toContainer?: (ctn: interfaces.Container) => Syringe.Container;
+  static setCache(ctn: interfaces.Container, value: Syringe.Container) {
+    Reflect.defineMetadata(ContainerCacheToken, value, ctn);
+  }
+  static getOrCreateContainer(ctn: interfaces.Container) {
+    const exist = Reflect.getMetadata(ContainerCacheToken, ctn);
+    if (!exist) {
+      if (this.toContainer) {
+        const container = this.toContainer(ctn);
+        this.setCache(ctn, container);
+        return container;
+      }
+    }
+    return exist;
+  }
+}