@ctzy-web-client/web-base-client-vue 1.0.1

package/src/application/Application.js

@@ -0,0 +1,538 @@
+import { createApp, reactive, h } from 'vue';
+import {
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+  createMemoryHistory,
+} from 'vue-router';
+import { EventDispatcher, HttpRequest } from '@ctzy-web-client/support';
+import {
+  IocContainer,
+  InstantiationService,
+  SERVICE_INFO,
+  CLASS_ID,
+} from '@ctzy-web-client/ioc';
+import { DataModelAdapter, SimpleOrm } from '@ctzy-web-client/data-model';
+import { MicroApplication } from './MicroApplication';
+import { pageDataParser } from '../utils';
+import App from './app.vue';
+import { RequestInterceptors, RouterInterceptors } from '../interceptors';
+import { ReactiveInstantiationService } from '../ioc';
+
+/**
+ * web 应用配置
+ * @typedef {Object} WebApplictionOption
+ * @property {Object} request 请求相关的配置
+ * @property {String} request.baseURL 请求基础路径
+ * @property {String|Number} request.timeout 请求超时时间
+ * @property {String} routeBaseUrl 路由基础路径 默认 /
+ * @property {String} routeMode 路由模式 hash | history
+ * @property {Array<Object>|Object} pages 注册的页面
+ * @property {Array<Object>|Object} pages[].parent 父路由
+ */
+
+export class Application extends EventDispatcher {
+  constructor(appName, options) {
+    super();
+
+    /**
+     * @type {string}
+     */
+    this.appName = appName;
+
+    /**
+     * @type {WebApplictionOption}
+     */
+    this.options = options || {};
+
+    /**
+     * @private
+     * @type {import('vue').App}
+     */
+    this._app = null;
+    /**
+     * @private
+     * @type {import('vue-router').Router}
+     */
+    this._router = null;
+
+    this._history = null;
+
+    /**
+     * @private
+     * @type {IocContainer}
+     */
+    this._iocContainer = new IocContainer();
+
+    /**
+     * @type {Application}
+     */
+    this.parent = null;
+    /**
+     * @type {MicroApplication[]}
+     */
+    this.microApplications = [];
+
+    /**
+     * @type {Application[]}
+     */
+    this.subApplications = [];
+
+    /**
+     * @private
+     * @type {string}
+     */
+    this._targetSelector = '';
+
+    this._extendOptions = null;
+
+    this._plugins = [];
+
+    this.global = options.global;
+
+    this.applicationSlots = new Map();
+
+    if (!this.global) {
+      throw new Error('options.global 不存在');
+    }
+
+    /**
+     * @private
+     * @type {Promise<void>}
+     */
+    this._viewportMountPromise = null;
+
+    this.global.__INNER_APPLICATION__ = this;
+
+    this._initEvent();
+
+    this._initIocContainer();
+    this._setRequestInterceptors();
+
+    this._exportLifecycle();
+
+    /**
+     * @type {Promise<void>}
+     */
+    this._resolveRoutesPromise = null;
+
+    this._mountResolve = null;
+  }
+
+  addApplicationSlot(type, id, slot) {
+    let withTypeSlots = this.applicationSlots.get(type);
+
+    if (!withTypeSlots) {
+      withTypeSlots = new Map();
+      this.applicationSlots.set(type, withTypeSlots);
+    }
+
+    withTypeSlots.set(id, slot);
+
+    this.emit('slot-change', type);
+    this.emitParentApplication('slot-change', type);
+  }
+
+  removeApplicationSlot(type, id) {
+    const withTypeSlots = this.applicationSlots.get(type);
+
+    if (!withTypeSlots) {
+      return;
+    }
+
+    withTypeSlots.delete(id);
+
+    this.emit('slot-change', type);
+    this.emitParentApplication('slot-change', type);
+  }
+
+  getApplicationSlots(type) {
+    let withTypeSlots = this.applicationSlots.get(type);
+    if (!withTypeSlots) {
+      return [];
+    }
+    return Array.from(withTypeSlots.values());
+  }
+
+  getIocContainer() {
+    return this._iocContainer;
+  }
+
+  getInstantiationService() {
+    return this.getIocContainer().getService(InstantiationService);
+  }
+
+  createInstance(Clazz, options) {
+    return this.getInstantiationService().createInstance(Clazz, options);
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  _initIocContainer() {
+    this._iocContainer.setInstantiationService(ReactiveInstantiationService);
+    this._iocContainer.registerService(
+      RequestInterceptors,
+      RequestInterceptors,
+      { overwrite: true }
+    );
+    this._iocContainer.registerService(RouterInterceptors, RouterInterceptors, {
+      overwrite: true,
+    });
+    this._iocContainer.registerService(HttpRequest, HttpRequest, {
+      overwrite: true,
+      args: [this.options.request || {}],
+    });
+    this._iocContainer.registerService(SimpleOrm, SimpleOrm, {
+      overwrite: false,
+    });
+    this._iocContainer.registerService(DataModelAdapter, DataModelAdapter, {
+      overwrite: false,
+    });
+
+    this._iocContainer.registerService('Application', Application, {
+      overwrite: false,
+    });
+    this._iocContainer._serviceCollection.setInstance('Application', this);
+
+    // this._iocContainer.registerService(
+    //   InstantiationService,
+    //   ReactiveInstantiationService,
+    //   {
+    //     overwrite: false,
+    //   }
+    // );
+    this._iocContainer.registerValue('AppName', this.appName || '');
+
+    const delayRegisterServices = this.global.__DELAY_REGISTER_SERVICES__ || [];
+
+    for (const Service of delayRegisterServices) {
+      const serviceOptions = Service[SERVICE_INFO];
+      this._iocContainer.registerService(
+        serviceOptions.value,
+        Service,
+        serviceOptions
+      );
+    }
+
+    Reflect.deleteProperty(this.global, '__DELAY_REGISTER_SERVICES__');
+  }
+
+  _setRequestInterceptors() {
+    /**
+     * @type {RequestClient}
+     */
+    const httpRequest = this._iocContainer.getService(HttpRequest);
+
+    const requestInterceptors =
+      this._iocContainer.getService(RequestInterceptors);
+    //设置请求相关的配置
+    httpRequest.setOptions(this.options.request);
+    httpRequest.addRequestInterceptors(
+      requestInterceptors.request.bind(requestInterceptors),
+      requestInterceptors.requestError.bind(requestInterceptors)
+    );
+    httpRequest.addResponseInterceptors(
+      requestInterceptors.response.bind(requestInterceptors),
+      requestInterceptors.requestError.bind(requestInterceptors)
+    );
+  }
+
+  _setRouteInterceptors() {
+    const routerInterceptors =
+      this._iocContainer.getService(RouterInterceptors);
+
+    this._router.beforeEach(
+      routerInterceptors.beforeEach.bind(routerInterceptors)
+    );
+    this._router.beforeResolve(
+      routerInterceptors.beforeResolve.bind(routerInterceptors)
+    );
+    this._router.afterEach(
+      routerInterceptors.afterEach.bind(routerInterceptors)
+    );
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  _initVue() {
+    this._app = createApp({
+      setup: () => {
+        const applicaiton = reactive(this);
+
+        return () => h(this.options.app || App, { applicaiton });
+      },
+    });
+
+    this._plugins.forEach((plugin) => {
+      this._app.use(plugin);
+    });
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  _initRouter() {
+    if (!this._app) {
+      throw new Error('Vue实例不存在');
+    }
+
+    let history = null;
+
+    let base = this.options.routeBaseUrl || '/';
+
+    if (this.global.__POWERED_BY_QIANKUN__ && base === '/') {
+      base = `/${this.appName}`;
+    }
+
+    if (this._extendOptions?.base) {
+      base = this._extendOptions.base + base;
+    }
+
+    switch (this.options.routeMode) {
+      case 'hash':
+        history = createWebHashHistory(base);
+        break;
+      case 'memory':
+        history = createMemoryHistory(base);
+        break;
+      default:
+        history = createWebHistory(base);
+    }
+
+    this._history = history;
+    this._router = createRouter({ history, routes: [] });
+
+    this._setRouteInterceptors();
+
+    this._app.use(this._router);
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  async _resolveRoutes() {
+    //页面定义
+    let pageDefines = await pageDataParser(this.options.pages);
+
+    if (!this._router) {
+      return;
+    }
+
+    pageDefines = pageDefines.filter(
+      (pageDefine) =>
+        typeof pageDefine.name === 'string' &&
+        typeof pageDefine.route === 'string'
+    );
+
+    const routes = pageDefines.map((define) => ({
+      name: define.name,
+      redirect: define.redirect,
+      path: define.route,
+      props:
+        define.props || ((route) => Object.assign(route.params, route.query)),
+      meta: define.meta,
+      component: define.component,
+      children: [],
+    }));
+
+    const rootRoutes = [];
+
+    for (let i = 0, length = routes.length; i < length; i++) {
+      const pageDefine = pageDefines[i];
+      const route = routes[i];
+      for (let j = 0; j < length; j++) {
+        if (i === j) {
+          continue;
+        }
+        const innerPageDefine = pageDefines[j];
+        const innerRoute = routes[j];
+
+        if (pageDefine.name == null || innerPageDefine.name == null) {
+          continue;
+        }
+
+        if (pageDefine.name === innerPageDefine.parent) {
+          route.children.push(innerRoute);
+        }
+      }
+
+      if (!pageDefine.parent) {
+        rootRoutes.push(route);
+      }
+    }
+
+    for (const rootRoute of rootRoutes) {
+      this._router.addRoute(rootRoute);
+    }
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  _initEvent() {
+    this.on('subApplicationCreate', (application) => {
+      this.subApplications.push(application);
+    });
+
+    this.on('subApplicationDestroy', (application) => {
+      this.subApplications = this.subApplications.filter(
+        (app) => app !== application
+      );
+    });
+  }
+
+  /**
+   * @private
+   * @memberof Application
+   */
+  _exportLifecycle() {
+    if (!this.global.__POWERED_BY_QIANKUN__ || !this.appName) {
+      this._viewportMountPromise = Promise.resolve();
+      return;
+    }
+
+    if (!this.global.moudleQiankunAppLifeCycles) {
+      this.global.moudleQiankunAppLifeCycles = {};
+    }
+    this.global.moudleQiankunAppLifeCycles[this.appName] = {
+      bootstrap: async (props) => {},
+      mount: async ({ ownerApplication, container, extendOptions = {} }) => {
+        this.parent = ownerApplication || null;
+
+        this._extendOptions = extendOptions;
+
+        this._initVue();
+
+        this._initRouter();
+
+        if (ownerApplication) {
+          this._iocContainer.setParent(ownerApplication.getIocContainer());
+        }
+
+        if (this._targetSelector) {
+          this._app.mount(container.querySelector(this._targetSelector));
+        }
+
+        this._resolveRoutesPromise = this._resolveRoutes();
+        this._resolveRoutesPromise.then(() => {
+          this._resolveRoutesPromise = null;
+        });
+
+        if (typeof this._mountResolve === 'function') {
+          this._mountResolve();
+        }
+
+        this.parent?.emit('subApplicationCreate', this);
+      },
+      unmount: async () => {
+        this.parent?.emit('subApplicationDestroy', this);
+        this.parent = null;
+        this._history.destroy();
+        this._app.unmount();
+        this._app = null;
+        this._router = null;
+        this._extendOptions = null;
+        this._iocContainer.setParent(null);
+        // this._iocContainer.clear();
+        if (this._targetSelector) {
+          this.unmount();
+        }
+      },
+    };
+  }
+
+  /**
+   *
+   * @param {string} name
+   * @return {MicroApplication}
+   * @memberof Application
+   */
+  getMicroApplication(name) {
+    return (
+      this.microApplications.find(
+        (microApplication) => microApplication.name === name
+      ) ?? null
+    );
+  }
+
+  /**
+   * @param {object} options
+   * @memberof Application
+   * @returns {MicroApplication}
+   */
+  createMicroApplication(options) {
+    const microApplication = new MicroApplication(options, this);
+    this.microApplications.push(microApplication);
+    return microApplication;
+  }
+
+  /**
+   * 触发父应用事件
+   * @param {string} eventName
+   * @param  {...any} args
+   * @returns
+   */
+  emitParentApplication(eventName, ...args) {
+    if (!this.parent) {
+      return;
+    }
+
+    this.parent.emit('fromSubApplication', this.appName, eventName, ...args);
+  }
+
+  /**
+   * 使用插件
+   * @param {import('vue').Plugin} plugin
+   * @returns {Application}
+   */
+  use(plugin) {
+    this._plugins.push(plugin);
+    // this._app.use(plugin);
+    return this;
+  }
+
+  /**
+   * @param {string} target
+   * @memberof Application
+   */
+  async mount(target) {
+    if (typeof target !== 'string') {
+      throw new Error('mount: 指接受字符串参数。');
+    }
+
+    if (this.global.__POWERED_BY_QIANKUN__) {
+      const mountPromise = new Promise((resolve) => {
+        this._mountResolve = resolve;
+      });
+
+      this._targetSelector = target;
+
+      await mountPromise;
+
+      return;
+    }
+
+    this._initVue();
+    this._initRouter();
+    this._app.mount(target);
+
+    this._resolveRoutesPromise = this._resolveRoutes();
+    this._resolveRoutesPromise.then(() => {
+      this._resolveRoutesPromise = null;
+    });
+  }
+
+  /**
+   * @memberof Application
+   */
+  unmount() {
+    this._app?.unmount();
+  }
+}

package/src/application/MicroApplication.js

@@ -0,0 +1,67 @@
+import { loadMicroApp } from 'qiankun';
+
+export class MicroApplication {
+  constructor(options, application) {
+    options = options || {};
+    this.name = options.name;
+    this.entry = options.entry;
+
+    this.extendOptions = options?.extendOptions || {};
+
+    this.ownerApplication = application;
+
+    this._microApp = null;
+    this.container = null;
+  }
+
+  /**
+   * @private
+   * @return {import('qiankun').MicroApp}
+   * @memberof MicroApplication
+   */
+  _loadMicroApp() {
+    return loadMicroApp({
+      name: this.name,
+      entry: this.entry,
+      container: this.container,
+      props: {
+        // ...this.props,
+        extendOptions: this.extendOptions,
+        ownerApplication: this.ownerApplication,
+      },
+    });
+  }
+
+  /**
+   * @returns {Promise<void>}
+   * @memberof MicroApplication
+   */
+  async mountApplication() {
+    if (this._microApp?.getStatus() === 'UNMOUNTING') {
+      await this._microApp.unmountPromise();
+    }
+
+    if (!this._microApp) {
+      this.container = document.createElement('div');
+      this._microApp = this._loadMicroApp();
+    }
+
+    await this._microApp.mountPromise;
+
+    if (this._microApp.getStatus() === 'NOT_MOUNTED') {
+      await this._microApp.mount();
+    }
+  }
+
+  async unmountApplication() {
+    if (!this._microApp) {
+      return;
+    }
+
+    if (this._microApp.getStatus() !== 'MOUNTED') {
+      await this._microApp.mountPromise;
+    }
+
+    await this._microApp.unmount();
+  }
+}

package/src/application/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <BwaApplication :application="applicaiton">
+    <Suspense>
+      <RouterView />
+    </Suspense>
+  </BwaApplication>
+</template>
+
+<script setup>
+import { toRefs } from 'vue';
+import BwaApplication from './application.vue';
+import { RouterView } from 'vue-router';
+
+const props = defineProps({
+  applicaiton: {
+    Object,
+    required: true,
+  },
+});
+
+const { applicaiton } = toRefs(props);
+</script>

package/src/application/application.vue

@@ -0,0 +1,36 @@
+<template>
+  <div :class="ns.b()">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { applicationKey } from '@ctzy-web-client/tokens';
+import { provide, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useNamespace, provideGlobalConfig } from '../hooks';
+
+defineOptions({
+  name: 'BwaApplication',
+});
+
+const props = defineProps({
+  application: {
+    type: Object,
+    required: true,
+  },
+});
+
+const ns = useNamespace('application');
+
+watch(
+  useRoute(),
+  (currentRoute) => {
+    props.application.emitParentApplication('route-change', currentRoute);
+  },
+  { immediate: true }
+);
+
+provide(applicationKey, ref(props.application));
+provideGlobalConfig({ [applicationKey]: props.application }, null, true);
+</script>

package/src/application/index.js

@@ -0,0 +1,11 @@
+import { withInstall } from 'element-plus/es/utils/vue/install';
+import Application from './application.vue';
+import MicroApplication from './micro-application.vue';
+
+export { Application } from './Application';
+
+export const BwaApplication = withInstall(Application, { MicroApplication });
+
+export const BwaMicroApplication = withInstall(MicroApplication);
+
+export default BwaApplication;