@difizen/libro-common 0.3.4 → 1.0.0

package/src/core/components/application.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useMemo, useState, createRef } from 'react';
+
+import { ApplicationState, ApplicationStateService } from '../application';
+import { Application, ApplicationModule } from '../application';
+import type { ManaContext } from '../module';
+import { ManaModule } from '../module';
+import { useMount, useUnmount } from '../utils/hooks';
+import { createSlotPreference, PortalSlotId, Slot } from '../view';
+import { PortalSlotView } from '../view/portal-slot-view';
+import { RootComponents } from '../view/root-view';
+
+import type { ContextProps } from './context';
+import { ContextComponent } from './context';
+import { RootViewRender } from './root-view-render';
+import './index.less';
+
+const PortalModule = ManaModule.create().register(
+  createSlotPreference({ slot: PortalSlotId, view: PortalSlotView }),
+);
+
+export interface ApplicationProps extends ContextProps {
+  onInitialized?: (ctx: ManaContext, app: Application) => void;
+  onWillStart?: (ctx: ManaContext, app: Application) => void;
+  onReady?: (ctx: ManaContext, app: Application) => void;
+  /**
+   * 使用路由模式时需要开启
+   */
+  renderChildren?: boolean;
+  renderAfterReady?: boolean;
+}
+
+export const ApplicationComponent = (props: ApplicationProps) => {
+  const {
+    onReady,
+    onInitialized,
+    onWillStart,
+    modules = [],
+    loading,
+    renderChildren = false,
+    renderAfterReady = false,
+  } = props;
+  const nextModels = useMemo(() => {
+    return [ApplicationModule, PortalModule, ...modules];
+  }, [modules]);
+
+  const hostRef = createRef<HTMLDivElement>();
+  const [ready, setReady] = useState(false);
+  const [appReady, setAppReady] = useState(false);
+  const [application, setApplication] = useState<Application | undefined>(undefined);
+  const LoadingComponent = () =>
+    loading ? <div className="mana-preload">{loading}</div> : null;
+  const onModuleReady = (ctx: ManaContext) => {
+    const current = hostRef.current;
+    setReady(true);
+    const app = ctx.container.get(Application);
+    setApplication(app);
+    const rootComponents = ctx.container.get<RootComponents>(RootComponents);
+    if (!rootComponents.Loading) {
+      rootComponents.Loading = LoadingComponent;
+    }
+    const appState = ctx.container.get(ApplicationStateService);
+    if (current && app) {
+      app.host = current;
+    }
+    appState
+      .reachedState(ApplicationState.Initialized)
+      .then(() => {
+        if (onInitialized) {
+          onInitialized(ctx, app);
+        }
+        return;
+      })
+      .catch((_e) => {
+        //
+      });
+    if (onWillStart) {
+      onWillStart(ctx, app);
+    }
+    app.start();
+    appState
+      .reachedState(ApplicationState.Ready)
+      .then(() => {
+        if (onReady) {
+          setAppReady(true);
+          onReady(ctx, app);
+        }
+        return;
+      })
+      .catch((_e) => {
+        //
+      });
+  };
+  useMount(() => {
+    if (hostRef.current && application) {
+      application.host = hostRef.current;
+      application.mount();
+    }
+  });
+  useUnmount(() => {
+    if (application) {
+      application.unmount();
+    }
+  });
+  const loadingValue = loading ? <LoadingComponent /> : null;
+  const renderContent = () => {
+    if (!ready) {
+      // 模块加载未完成
+      return loadingValue;
+    }
+    if (!renderChildren) {
+      // 基于 rootSlot 渲染
+      return (
+        <>
+          <RootViewRender loading={loadingValue} />
+          <Slot name={PortalSlotId} viewProps={{ shadow: true }} />
+        </>
+      );
+    }
+    if (appReady || !renderAfterReady) {
+      // 模块加载完成 或 renderAfterReady 情况下 app 启动完成
+      return (
+        <>
+          {props.children}
+          <Slot name={PortalSlotId} viewProps={{ shadow: true }} />
+        </>
+      );
+    }
+    // renderAfterReady 情况下 app 未启动完成
+    return loadingValue;
+  };
+  return (
+    <div ref={hostRef} className={`app`} tabIndex={1}>
+      <ContextComponent
+        {...props}
+        loading={loadingValue}
+        modules={nextModels}
+        onReady={onModuleReady}
+      >
+        {renderContent()}
+      </ContextComponent>
+    </div>
+  );
+};

package/src/core/components/context.tsx

@@ -0,0 +1,67 @@
+import { ObservableContext } from '../../observable/index.js';
+import type { Syringe } from '../../ioc/index.js';
+import * as React from 'react';
+
+import type { ManaContext } from '../module/mana-module-context';
+import { useMount } from '../utils/hooks';
+
+import { useCreateManaContext } from './hooks';
+
+export interface ContextProps {
+  /**
+   * 指定容器上下文
+   */
+  context?: Syringe.Context;
+  /**
+   * 是否作为子容器
+   */
+  asChild?: boolean;
+  children?: React.ReactNode | React.ReactNode[];
+  modules?: Syringe.Module[];
+  onReady?: (context: ManaContext, ...args: any) => void;
+  loading?: JSX.Element | null;
+}
+
+export const ContextComponent = (props: ContextProps) => {
+  const { modules, asChild, onReady, loading, context } = props;
+  const [ready, setReady] = React.useState(false);
+
+  const manaContext = useCreateManaContext(context, !!asChild);
+
+  const contextValue = React.useMemo(() => {
+    return { getContainer: () => manaContext.container };
+  }, [manaContext.container]);
+
+  useMount(() => {
+    const loadModules = async () => {
+      if (modules) {
+        for (const moduleOption of modules) {
+          await manaContext.load(moduleOption);
+        }
+      }
+    };
+    loadModules()
+      .then(() => {
+        if (onReady) {
+          onReady(manaContext);
+        }
+        setReady(true);
+        return;
+      })
+      .catch((_e) => {
+        //
+      });
+  });
+
+  if (ready) {
+    return (
+      <ObservableContext.Provider value={contextValue}>
+        {props.children}
+      </ObservableContext.Provider>
+    );
+  }
+  if (loading) {
+    return loading;
+  }
+  return null;
+};

package/src/core/components/hooks.tsx

@@ -0,0 +1,23 @@
+import { ObservableContext } from '../../observable/index.js';
+import type { Syringe } from '../../ioc/index.js';
+import { GlobalContainer } from '../../ioc/index.js';
+import * as React from 'react';
+
+import { ManaContext } from '../module/mana-module-context';
+
+export const useCreateManaContext = (
+  context: Syringe.Context | undefined,
+  asChild: boolean,
+) => {
+  const observableContext = React.useContext(ObservableContext);
+  const container =
+    context?.container ||
+    (observableContext.getContainer() as Syringe.Container) ||
+    GlobalContainer;
+  return React.useMemo(() => {
+    if (asChild) {
+      return new ManaContext(container.createChild());
+    }
+    return new ManaContext(container);
+  }, [asChild, container]);
+};

package/src/core/components/index.less

@@ -0,0 +1,28 @@
+.app {
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &:focus {
+    outline-width: 0;
+  }
+}
+
+.mana-root {
+  height: 100%;
+  width: 100%;
+}
+
+.mana-preload {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 50000;
+  transition: opacity 0.8s;
+}
+
+.mana-preload.mana-hidden {
+  opacity: 0;
+}

package/src/core/components/index.tsx

@@ -0,0 +1,10 @@
+import { ApplicationComponent } from './application';
+import { ContextComponent } from './context';
+
+export { ApplicationComponent } from './application';
+export { ContextComponent } from './context';
+
+export const ManaComponents = {
+  Application: ApplicationComponent,
+  Context: ContextComponent,
+};

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

@@ -0,0 +1,13 @@
+import { useInject } from '../../observable/index.js';
+
+import { ViewManager, ViewRender } from '../view';
+
+export const RootViewRender = (props: { loading: JSX.Element | null }) => {
+  const { loading } = props;
+  const viewManager = useInject(ViewManager);
+  const rootView = viewManager.root;
+  if (rootView) {
+    return <ViewRender view={rootView} />;
+  }
+  return loading;
+};

package/src/core/configuration/configuration-cache.ts

@@ -0,0 +1,50 @@
+import type { Disposable } from '../../common/index.js';
+import { singleton } from '../../ioc/index.js';
+
+import type { ConfigurationNode } from './configuration-protocol';
+import type { ConfigurationProvider } from './configuration-provider';
+
+@singleton()
+export class ConfigurationCache implements Disposable {
+  protected cache = new Map<ConfigurationProvider, Map<string, any>>();
+
+  has<T>(provider: ConfigurationProvider, node: ConfigurationNode<T>) {
+    return this.cache.has(provider) && this.cache.get(provider)?.has(node.id);
+  }
+
+  set<T>(provider: ConfigurationProvider, node: ConfigurationNode<T>, value: T) {
+    const providerCache = this.cache.get(provider) ?? new Map();
+    providerCache.set(node.id, value);
+    this.cache.set(provider, providerCache);
+  }
+
+  get<T>(provider: ConfigurationProvider, node: ConfigurationNode<T>): T {
+    return this.cache.get(provider)?.get(node.id);
+  }
+
+  remove<T>(provider: ConfigurationProvider, node: ConfigurationNode<T>) {
+    this.cache.get(provider)?.delete(node.id);
+  }
+
+  clear(provider?: ConfigurationProvider) {
+    if (provider) {
+      this.cache.get(provider)?.clear();
+    } else {
+      this.cache.clear();
+    }
+  }
+
+  protected _disposed = false;
+
+  get disposed() {
+    return this._disposed;
+  }
+
+  dispose() {
+    if (this.disposed) {
+      return;
+    }
+    this._disposed = true;
+    this.clear();
+  }
+}

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

@@ -0,0 +1,55 @@
+import type { JSONSchemaType } from 'ajv';
+
+import type { ConfigurationStorage } from './configuration-storage';
+
+export interface ConfigurationNode<T> {
+  /**
+   * 唯一id
+   */
+  id: string;
+
+  /**
+   * 位置顺序
+   */
+  order?: number;
+
+  /**
+   * 类型
+   * string、number、select、boolean
+   *
+   * link to schema
+   */
+  type?: string;
+
+  /**
+   * 展示名称
+   */
+  title?: string;
+
+  /**
+   * 描述
+   */
+  description?: string;
+
+  /**
+   * 默认值
+   */
+  defaultValue: T;
+
+  /**
+   * 存储后端，默认内存，可选localstorage
+   * 配合provider使用
+   */
+  storage?: ConfigurationStorage;
+
+  /**
+   * 当前配置是否能被覆盖，当为false时不可以重新注册具有相同id的配置
+   *
+   */
+  overridable?: boolean;
+
+  /**
+   * 符合json schema规范的json配置，用来校验配置的值
+   */
+  schema: JSONSchemaType<T>;
+}

package/src/core/configuration/configuration-provider.ts

@@ -0,0 +1,105 @@
+import type { MaybePromise } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import { singleton, Syringe } from '../../ioc/index.js';
+
+import type { ConfigurationNode } from './configuration-protocol';
+import type { ConfigurationStorage } from './configuration-storage';
+import {
+  LocalConfigurationStorage,
+  DefaultConfigurationStorage,
+} from './configuration-storage';
+
+export const ConfigurationProvider = Syringe.defineToken('ConfigurationProvider');
+
+export interface ConfigurationProvider {
+  canHandle: (storage: ConfigurationStorage) => false | number;
+
+  has: <T>(node: ConfigurationNode<T>) => MaybePromise<boolean>;
+
+  get: <T>(node: ConfigurationNode<T>) => MaybePromise<T>;
+
+  set: <T>(node: ConfigurationNode<T>, value: T) => MaybePromise<void>;
+
+  remove: <T>(node: ConfigurationNode<T>) => MaybePromise<void>;
+
+  /**
+   * 开启缓存，默认false
+   * 对本地同步调用不用开启
+   * 对远端异步调用建议开启，防止请求过多
+   */
+  enableCache?: boolean;
+
+  /**
+   * 提前批量获取配置作为缓存, enableCache打开后会在应用初始化调用
+   * @param nodes
+   * @returns
+   */
+  prefetch?: (nodes: ConfigurationNode<any>[]) => MaybePromise<any[]>;
+}
+
+@singleton({ contrib: [ConfigurationProvider] })
+export class DefaultConfigurationProvider implements ConfigurationProvider {
+  @prop()
+  protected configStore = new Map<string, any>();
+
+  /**
+   * 默认用内存的provider
+   * @returns
+   */
+  canHandle(storage: ConfigurationStorage): false | number {
+    if (storage === DefaultConfigurationStorage) {
+      return 100;
+    }
+    return 0;
+  }
+
+  has = <T>(node: ConfigurationNode<T>) => {
+    return this.configStore.has(node.id);
+  };
+
+  get = <T>(node: ConfigurationNode<T>) => {
+    return this.configStore.get(node.id);
+  };
+
+  set = <T>(node: ConfigurationNode<T>, value: T) => {
+    this.configStore.set(node.id, value);
+  };
+
+  remove = <T>(node: ConfigurationNode<T>) => {
+    this.configStore.delete(node.id);
+  };
+}
+
+@singleton({ contrib: [ConfigurationProvider] })
+export class LocalStorageConfigurationProvider implements ConfigurationProvider {
+  protected configStore = localStorage;
+
+  canHandle(storage: ConfigurationStorage): false | number {
+    if (storage === LocalConfigurationStorage) {
+      return 100;
+    }
+    return 0;
+  }
+
+  has = <T>(node: ConfigurationNode<T>) => {
+    return this.configStore.getItem(this.prefix(node.id)) !== null;
+  };
+
+  get = <T>(node: ConfigurationNode<T>): T => {
+    const result = this.configStore.getItem(this.prefix(node.id));
+    return JSON.parse(result ?? '');
+  };
+
+  set = <T>(node: ConfigurationNode<T>, value: T) => {
+    this.configStore.setItem(this.prefix(node.id), JSON.stringify(value));
+  };
+
+  remove = <T>(node: ConfigurationNode<T>) => {
+    this.configStore.removeItem(this.prefix(node.id));
+  };
+
+  protected prefix(key: string): string {
+    const pathname = typeof window === 'undefined' ? '' : window.location.pathname;
+    return `mana:configuration:${pathname}:${key}`;
+  }
+}