plain-design 1.0.0-beta.3 → 1.0.0-beta.5

package/src/packages/components/Application/service/createApplicationService.tsx

@@ -1,47 +1,47 @@
-import {ApplicationHolder, iApplicationHolderData, iApplicationManagerData} from "./useApplicationService";
-import {defer} from "plain-utils/utils/defer";
-import {App} from "plain-design-composition";
-import {createError} from "../../../utils/createError";
-
-export function createApplicationService<ManagerComponent extends { use: { class: { props: { getManagerData: () => iApplicationManagerData }, event: { emit: { onReady: () => void } } } } },
-  CreateService extends (getManager: () => Promise<ManagerComponent["use"]["class"]>) => any>(
-  name: string,
-  ManagerComponent: ManagerComponent,
-  createService: CreateService
-) {
-
-  const error = createError(`${name} service`);
-
-  const use = (getApplication?: (applications: iApplicationHolderData[]) => iApplicationHolderData | undefined | null): ReturnType<CreateService> => {
-    const getManager = (): Promise<ManagerComponent["use"]["class"]> => {
-      const { applications } = ApplicationHolder;
-      if (applications.length === 0) {
-        throw error(`Application instance not found, can't use any component service！`);
-      }
-      if (!getApplication) {
-        getApplication = applications => applications[0];
-      }
-      let application = getApplication!(applications)?.application;
-      if (!application) {
-        throw error('No match application instance, be sure to wrapped your root component with Application！');
-      }
-      const dfd = defer<ManagerComponent["use"]["class"]>();
-      application.getManager(`${name}-manager`, ManagerComponent).then(manager => dfd.resolve(manager));
-      return dfd.promise;
-    };
-
-    return createService(getManager);
-  };
-
-  const install = (app: App) => {
-    app.mixin({
-      computed: {
-        [`$${name}`]() {
-          return use(applications => applications.find(i => i.root === this.$root))[`$${name}`];
-        },
-      }
-    });
-  };
-
-  return Object.assign(use, { install });
-}
+import {ApplicationHolder, iApplicationHolderData, iApplicationManagerData} from "./useApplicationService";
+import {defer} from "plain-utils/utils/defer";
+import {App} from "plain-design-composition";
+import {createError} from "../../../utils/createError";
+
+export function createApplicationService<ManagerComponent extends { use: { class: { props: { getManagerData: () => iApplicationManagerData }, event: { emit: { onReady: () => void } } } } },
+  CreateService extends (getManager: () => Promise<ManagerComponent["use"]["class"]>) => any>(
+  name: string,
+  ManagerComponent: ManagerComponent,
+  createService: CreateService
+) {
+
+  const error = createError(`${name} service`);
+
+  const use = (getApplication?: (applications: iApplicationHolderData[]) => iApplicationHolderData | undefined | null): ReturnType<CreateService> => {
+    const getManager = (): Promise<ManagerComponent["use"]["class"]> => {
+      const { applications } = ApplicationHolder;
+      if (applications.length === 0) {
+        throw error(`Application instance not found, can't use any component service！`);
+      }
+      if (!getApplication) {
+        getApplication = applications => applications[0];
+      }
+      let application = getApplication!(applications)?.application;
+      if (!application) {
+        throw error('No match application instance, be sure to wrapped your root component with Application！');
+      }
+      const dfd = defer<ManagerComponent["use"]["class"]>();
+      application.getManager(`${name}-manager`, ManagerComponent).then(manager => dfd.resolve(manager));
+      return dfd.promise;
+    };
+
+    return createService(getManager);
+  };
+
+  const install = (app: App) => {
+    app.mixin({
+      computed: {
+        [`$${name}`]() {
+          return use(applications => applications.find(i => i.root === this.$root))[`$${name}`];
+        },
+      }
+    });
+  };
+
+  return Object.assign(use, { install });
+}

package/src/packages/components/Application/service/createApplicationServiceComponent.tsx

@@ -1,41 +1,41 @@
-import {designComponent, onMounted, RenderNode} from "plain-design-composition";
-
-/**
- * 创建应用服务组件
- * @author  韦胜健
- * @date    2022.5.3 13:28
- */
-export function createApplicationServiceComponent<Option>(
-  {
-    name,
-    setup,
-  }: {
-    name: string,
-    setup: (data: { option: Option, destroy: () => void }) => {
-      refer: {
-        isShow: { value: boolean },
-        isOpen: { value: boolean },
-        service: (option: Option) => void
-      },
-      render: () => RenderNode,
-    },
-  }
-) {
-  return designComponent({
-    name: `${name}-service`,
-    props: {
-      option: { type: Object, required: true }
-    },
-    emits: {
-      onDestroy: () => true,
-      onReady: () => true,
-    },
-    setup({ props, event }) {
-      onMounted(() => event.emit.onReady());
-      const option = props.option as Option;
-      const { render, refer } = setup({ option, destroy: event.emit.onDestroy });
-      refer.service(option);
-      return { render, refer: { ...refer, event } };
-    },
-  });
-}
+import {designComponent, onMounted, RenderNode} from "plain-design-composition";
+
+/**
+ * 创建应用服务组件
+ * @author  韦胜健
+ * @date    2022.5.3 13:28
+ */
+export function createApplicationServiceComponent<Option>(
+  {
+    name,
+    setup,
+  }: {
+    name: string,
+    setup: (data: { option: Option, destroy: () => void }) => {
+      refer: {
+        isShow: { value: boolean },
+        isOpen: { value: boolean },
+        service: (option: Option) => void
+      },
+      render: () => RenderNode,
+    },
+  }
+) {
+  return designComponent({
+    name: `${name}-service`,
+    props: {
+      option: { type: Object, required: true }
+    },
+    emits: {
+      onDestroy: () => true,
+      onReady: () => true,
+    },
+    setup({ props, event }) {
+      onMounted(() => event.emit.onReady());
+      const option = props.option as Option;
+      const { render, refer } = setup({ option, destroy: event.emit.onDestroy });
+      refer.service(option);
+      return { render, refer: { ...refer, event } };
+    },
+  });
+}

package/src/packages/components/Application/service/createApplicationServiceManager.tsx

@@ -1,98 +1,98 @@
-import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "plain-design-composition";
-import {iApplicationManagerData} from "./useApplicationService";
-import {createCounter} from "plain-utils/utils/createCounter";
-import {createServiceReadyObserver} from "../utils/createServiceReadyObserver";
-
-const nextCount = createCounter('manager-service');
-
-/**
- * 创建一个默认的 application service manager组件
- * @author  韦胜健
- * @date    2020/11/26 9:20
- */
-export function createApplicationServiceManager<Option extends { hold?: boolean }>(
-  {
-    name,
-    Service,
-  }: {
-    name: string,
-    Service: {
-      use: {
-        class: {
-          isShow: { value: boolean },
-          isOpen: { value: boolean },
-          service: (option: Option) => any,
-          using?: boolean,
-          event: { emit: { onReady: () => void, } }
-        }
-      }
-    },
-  }) {
-  return designComponent({
-    name: `${name}-manager`,
-    props: {
-      getManagerData: { type: Function as PropType<() => iApplicationManagerData>, required: true },
-    },
-    emits: {
-      onReady: () => true,
-    },
-    setup({ props, event }) {
-
-      const optionIds = [] as string[];
-      const options = ref([]) as { value: Option[] };
-      const { refList, onRefList } = useRefList(Service);
-      const serviceReadyObserver = createServiceReadyObserver<Option>();
-      onMounted(() => event.emit.onReady());
-
-      /**
-       * 获取一个 非show以及open的 service提供服务，如果存在
-       * 符合这个条件的service，直接调用service函数，否则创建
-       * 一个service，这个service在setup末尾需要调用一次service
-       * 函数；
-       * @author  韦胜健
-       * @date    2020/11/26 9:23
-       */
-      const service = async (option: Option): Promise<void> => {
-
-        if (!!option.hold) {
-          const prevIndex = options.value.findIndex(i => i === option || toRaw(i) === option);
-          if (prevIndex > -1) {
-            const ins = refList[prevIndex] || await serviceReadyObserver.getNewIns(options.value[prevIndex]);
-            return ins.service(option);
-          }
-        }
-
-        // 没有合适的item，创建新的item提供服务
-        optionIds.push(nextCount());
-        options.value.push(option);
-
-      };
-
-      return {
-        refer: {
-          name,
-          service,
-          props,
-          event,
-        },
-        render: () => {
-          const ServiceComponent = Service as any;
-          return (
-            options.value.map((item, i) => (
-              <ServiceComponent
-                key={optionIds[i]}
-                option={item}
-                ref={onRefList(i)}
-                onDestroy={() => {
-                  options.value.splice(i, 1);
-                  optionIds.splice(i, 1);
-                }}
-                onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
-              />
-            ))
-          );
-        }
-      };
-    },
-  });
-}
+import {designComponent, onMounted, PropType, ref, toRaw, useRefList} from "plain-design-composition";
+import {iApplicationManagerData} from "./useApplicationService";
+import {createCounter} from "plain-utils/utils/createCounter";
+import {createServiceReadyObserver} from "../utils/createServiceReadyObserver";
+
+const nextCount = createCounter('manager-service');
+
+/**
+ * 创建一个默认的 application service manager组件
+ * @author  韦胜健
+ * @date    2020/11/26 9:20
+ */
+export function createApplicationServiceManager<Option extends { hold?: boolean }>(
+  {
+    name,
+    Service,
+  }: {
+    name: string,
+    Service: {
+      use: {
+        class: {
+          isShow: { value: boolean },
+          isOpen: { value: boolean },
+          service: (option: Option) => any,
+          using?: boolean,
+          event: { emit: { onReady: () => void, } }
+        }
+      }
+    },
+  }) {
+  return designComponent({
+    name: `${name}-manager`,
+    props: {
+      getManagerData: { type: Function as PropType<() => iApplicationManagerData>, required: true },
+    },
+    emits: {
+      onReady: () => true,
+    },
+    setup({ props, event }) {
+
+      const optionIds = [] as string[];
+      const options = ref([]) as { value: Option[] };
+      const { refList, onRefList } = useRefList(Service);
+      const serviceReadyObserver = createServiceReadyObserver<Option>();
+      onMounted(() => event.emit.onReady());
+
+      /**
+       * 获取一个 非show以及open的 service提供服务，如果存在
+       * 符合这个条件的service，直接调用service函数，否则创建
+       * 一个service，这个service在setup末尾需要调用一次service
+       * 函数；
+       * @author  韦胜健
+       * @date    2020/11/26 9:23
+       */
+      const service = async (option: Option): Promise<void> => {
+
+        if (!!option.hold) {
+          const prevIndex = options.value.findIndex(i => i === option || toRaw(i) === option);
+          if (prevIndex > -1) {
+            const ins = refList[prevIndex] || await serviceReadyObserver.getNewIns(options.value[prevIndex]);
+            return ins.service(option);
+          }
+        }
+
+        // 没有合适的item，创建新的item提供服务
+        optionIds.push(nextCount());
+        options.value.push(option);
+
+      };
+
+      return {
+        refer: {
+          name,
+          service,
+          props,
+          event,
+        },
+        render: () => {
+          const ServiceComponent = Service as any;
+          return (
+            options.value.map((item, i) => (
+              <ServiceComponent
+                key={optionIds[i]}
+                option={item}
+                ref={onRefList(i)}
+                onDestroy={() => {
+                  options.value.splice(i, 1);
+                  optionIds.splice(i, 1);
+                }}
+                onReady={() => serviceReadyObserver.onReady({ option: item, ins: refList[i] })}
+              />
+            ))
+          );
+        }
+      };
+    },
+  });
+}

package/src/packages/components/Application/service/useApplicationService.tsx

@@ -1,124 +1,124 @@
-import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "plain-design-composition";
-import {defer, DFD} from 'plain-utils/utils/defer';
-import {createCounter} from "plain-utils/utils/createCounter";
-import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
-
-/**
- * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
- * @author  韦胜健
- * @date    2022.5.4 12:16
- */
-export interface iApplicationManagerData {
-  name: string,
-  ManagerComponent: any
-}
-
-/**
- * iApplicationHolder数据对象类型
- * @author  韦胜健
- * @date    2022.5.4 12:25
- */
-export interface iApplicationHolderData {
-  application: iApplicationInstance,
-  root: any
-}
-
-/**
- * application组件实例的暴露类型
- * @author  韦胜健
- * @date    2022.5.4 12:17
- */
-export interface iApplicationInstance {
-  getManager: <ManagerComponent extends { use: { class: any } }>(name: string, ManagerComponent: ManagerComponent) => Promise<ManagerComponent["use"]["class"]>;
-}
-
-/**
- * application实例管理对象
- * @author  韦胜健
- * @date    2022.5.4 12:17
- */
-export const ApplicationHolder = (() => {
-  let applications: iApplicationHolderData[] = [];
-  const remove = (application: iApplicationInstance, root: any) => {
-    const index = applications.findIndex(i => i.application === application && i.root === root);
-    if (index > -1) {
-      applications.splice(index, 1);
-    }
-  };
-  const add = (application: iApplicationInstance, root: any) => {
-    const index = applications.findIndex(i => i.application === application && i.root === root);
-    if (index === -1) {
-      applications.push({ application, root });
-    }
-    return {};
-  };
-  const useRegistryApplication = (ins: iApplicationInstance) => {
-    const { $root } = getCurrentDesignInstance()!.proxy!;
-    add(ins, $root);
-    onBeforeUnmount(() => remove(ins, $root));
-  };
-  return { applications, useRegistryApplication };
-})();
-
-export const nextManagerId = createCounter('application_manager');
-
-export function useApplicationService() {
-
-  /*manager代理对象引用*/
-  let { refList, onRefList } = useRefList<{ props: { getManagerData: () => iApplicationManagerData } }>();
-  /*当前状态*/
-  const state = reactive({
-    managers: [] as {
-      id: string,
-      dfd: DFD,
-      getManagerData: () => iApplicationManagerData,
-      RenderComponent: any,
-    }[],
-  });
-
-  const refer: iApplicationInstance = {
-    getManager: async (name, ManagerComponent) => {
-      let item = state.managers.find(i => {
-        const { name: _name, ManagerComponent: _ManagerComponent } = i.getManagerData();
-        return _name === name && _ManagerComponent === ManagerComponent;
-      });
-      if (!item) {
-        item = {
-          id: nextManagerId(),
-          getManagerData: () => ({ name, ManagerComponent }),
-          RenderComponent: markRaw(ManagerComponent),
-          dfd: defer(),
-        };
-        /*当前引用中没有该实例，手动创建一个*/
-        state.managers.push(item);
-      }
-      return item.dfd.promise;
-    },
-  };
-
-  ApplicationHolder.useRegistryApplication(refer);
-
-  onBeforeUnmount(
-    ApplicationHooks.onRender.use({
-      processor: ({ list, render }) => {list.push({ render, key: 'application-service', seq: 1 });},
-      render: () => (
-        <Portal to="body">
-          <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
-            {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
-              return (
-                <RenderComponent
-                  key={id}
-                  getManagerData={getManagerData}
-                  ref={onRefList(index)}
-                  onReady={() => dfd.resolve(refList[index])}
-                />
-              );
-            })}
-          </div>
-        </Portal>
-      )
-    })
-  );
-
-  return { refer };
-}
+import {getComponentCls, getCurrentDesignInstance, markRaw, onBeforeUnmount, Portal, reactive, useRefList} from "plain-design-composition";
+import {defer, DFD} from 'plain-utils/utils/defer';
+import {createCounter} from "plain-utils/utils/createCounter";
+import {APPLICATION_SERVICE_CONTAINER_CLASS, ApplicationHooks} from "../utils/application.utils";
+
+/**
+ * applications渲染manager数组的时候，给manager传递的 getManagerData函数的返回值类型
+ * @author  韦胜健
+ * @date    2022.5.4 12:16
+ */
+export interface iApplicationManagerData {
+  name: string,
+  ManagerComponent: any
+}
+
+/**
+ * iApplicationHolder数据对象类型
+ * @author  韦胜健
+ * @date    2022.5.4 12:25
+ */
+export interface iApplicationHolderData {
+  application: iApplicationInstance,
+  root: any
+}
+
+/**
+ * application组件实例的暴露类型
+ * @author  韦胜健
+ * @date    2022.5.4 12:17
+ */
+export interface iApplicationInstance {
+  getManager: <ManagerComponent extends { use: { class: any } }>(name: string, ManagerComponent: ManagerComponent) => Promise<ManagerComponent["use"]["class"]>;
+}
+
+/**
+ * application实例管理对象
+ * @author  韦胜健
+ * @date    2022.5.4 12:17
+ */
+export const ApplicationHolder = (() => {
+  let applications: iApplicationHolderData[] = [];
+  const remove = (application: iApplicationInstance, root: any) => {
+    const index = applications.findIndex(i => i.application === application && i.root === root);
+    if (index > -1) {
+      applications.splice(index, 1);
+    }
+  };
+  const add = (application: iApplicationInstance, root: any) => {
+    const index = applications.findIndex(i => i.application === application && i.root === root);
+    if (index === -1) {
+      applications.push({ application, root });
+    }
+    return {};
+  };
+  const useRegistryApplication = (ins: iApplicationInstance) => {
+    const { $root } = getCurrentDesignInstance()!.proxy!;
+    add(ins, $root);
+    onBeforeUnmount(() => remove(ins, $root));
+  };
+  return { applications, useRegistryApplication };
+})();
+
+export const nextManagerId = createCounter('application_manager');
+
+export function useApplicationService() {
+
+  /*manager代理对象引用*/
+  let { refList, onRefList } = useRefList<{ props: { getManagerData: () => iApplicationManagerData } }>();
+  /*当前状态*/
+  const state = reactive({
+    managers: [] as {
+      id: string,
+      dfd: DFD,
+      getManagerData: () => iApplicationManagerData,
+      RenderComponent: any,
+    }[],
+  });
+
+  const refer: iApplicationInstance = {
+    getManager: async (name, ManagerComponent) => {
+      let item = state.managers.find(i => {
+        const { name: _name, ManagerComponent: _ManagerComponent } = i.getManagerData();
+        return _name === name && _ManagerComponent === ManagerComponent;
+      });
+      if (!item) {
+        item = {
+          id: nextManagerId(),
+          getManagerData: () => ({ name, ManagerComponent }),
+          RenderComponent: markRaw(ManagerComponent),
+          dfd: defer(),
+        };
+        /*当前引用中没有该实例，手动创建一个*/
+        state.managers.push(item);
+      }
+      return item.dfd.promise;
+    },
+  };
+
+  ApplicationHolder.useRegistryApplication(refer);
+
+  onBeforeUnmount(
+    ApplicationHooks.onRender.use({
+      processor: ({ list, render }) => {list.push({ render, key: 'application-service', seq: 1 });},
+      render: () => (
+        <Portal to="body">
+          <div className={getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}>
+            {state.managers.map(({ getManagerData, RenderComponent, dfd, id }, index) => {
+              return (
+                <RenderComponent
+                  key={id}
+                  getManagerData={getManagerData}
+                  ref={onRefList(index)}
+                  onReady={() => dfd.resolve(refList[index])}
+                />
+              );
+            })}
+          </div>
+        </Portal>
+      )
+    })
+  );
+
+  return { refer };
+}