fix: lifeCycle events and router plugin

.gitignore

@@ -13,7 +13,6 @@ pnpm-lock.yaml
 deploy-space/packages
 deploy-space/.env
 
-
 # IDE
 .vscode
 .idea

packages/react-renderer/src/api/app.tsx

@@ -1,7 +1,7 @@
 import { createRenderer, type AppOptions } from '@alilc/lowcode-renderer-core';
 import { type ComponentType } from 'react';
 import { type Root, createRoot } from 'react-dom/client';
-import { ApplicationView, RendererContext, extension } from '../app';
+import { ApplicationView, RendererContext, boosts } from '../app';
 
 export interface ReactAppOptions extends AppOptions {
   faultComponent?: ComponentType<any>;
@@ -17,7 +17,7 @@ export const createApp = async (options: ReactAppOptions) => {
     // }
 
     // extends boosts
-    extension.install(boostsManager);
+    boostsManager.extend(boosts.toExpose());
 
     let root: Root | undefined;
 

packages/react-renderer/src/api/component.tsx

@@ -1,6 +1,6 @@
 import { createRenderer, type AppOptions } from '@alilc/lowcode-renderer-core';
 import { FunctionComponent } from 'react';
-import { type LowCodeComponentProps, createComponentBySchema } from '../runtime/component';
+import { type LowCodeComponentProps, createComponentBySchema } from '../runtime/schema';
 import { RendererContext } from '../app/context';
 
 interface Render {

packages/react-renderer/src/app/extension.ts → packages/react-renderer/src/app/boosts.ts

@@ -1,4 +1,4 @@
-import { type Plugin, type IBoostsService } from '@alilc/lowcode-renderer-core';
+import { type Plugin } from '@alilc/lowcode-renderer-core';
 import { type ComponentType, type PropsWithChildren } from 'react';
 
 export type WrapperComponent = ComponentType<PropsWithChildren<any>>;
@@ -9,13 +9,13 @@ export interface OutletProps {
 
 export type Outlet = ComponentType<OutletProps>;
 
-export interface ReactRendererExtensionApi {
+export interface ReactRendererBoostsApi {
   addAppWrapper(appWrapper: WrapperComponent): void;
 
   setOutlet(outlet: Outlet): void;
 }
 
-class ReactRendererExtension {
+class ReactRendererBoosts {
   private wrappers: WrapperComponent[] = [];
 
   private outlet: Outlet | null = null;
@@ -28,7 +28,7 @@ class ReactRendererExtension {
     return this.outlet;
   }
 
-  toExpose(): ReactRendererExtensionApi {
+  toExpose(): ReactRendererBoostsApi {
     return {
       addAppWrapper: (appWrapper) => {
         if (appWrapper) this.wrappers.push(appWrapper);
@@ -38,14 +38,10 @@ class ReactRendererExtension {
       },
     };
   }
-
-  install(boostsService: IBoostsService) {
-    boostsService.extend(this.toExpose());
-  }
 }
 
-export const extension = new ReactRendererExtension();
+export const boosts = new ReactRendererBoosts();
 
-export function defineRendererPlugin(plugin: Plugin<ReactRendererExtensionApi>) {
+export function defineRendererPlugin(plugin: Plugin<ReactRendererBoostsApi>) {
   return plugin;
 }

packages/react-renderer/src/app/index.ts

@@ -1,3 +1,3 @@
 export * from './context';
-export * from './extension';
+export * from './boosts';
 export * from './view';

packages/react-renderer/src/app/view.tsx

@@ -1,12 +1,12 @@
 import { useRenderContext } from './context';
-import { getComponentByName } from '../runtime/component';
-import { extension } from './extension';
+import { getComponentByName } from '../runtime/schema';
+import { boosts } from './boosts';
 
 export function ApplicationView() {
   const renderContext = useRenderContext();
   const { schema } = renderContext;
-  const appWrappers = extension.getAppWrappers();
-  const Outlet = extension.getOutlet();
+  const appWrappers = boosts.getAppWrappers();
+  const Outlet = boosts.getOutlet();
 
   if (!Outlet) return null;
 

packages/react-renderer/src/index.ts

@@ -5,4 +5,4 @@ export * from './router';
 
 export type { Spec, ProCodeComponent, LowCodeComponent } from '@alilc/lowcode-shared';
 export type { PackageLoader, CodeScope, Plugin } from '@alilc/lowcode-renderer-core';
-export type { RendererExtends } from './app/extension';
+export type { ReactRendererBoostsApi } from './app/boosts';

packages/react-renderer/src/router/index.ts

@@ -1,2 +1,3 @@
 export * from './context';
 export * from './plugin';
+export type * from '@alilc/lowcode-renderer-router';

packages/react-renderer/src/router/plugin.ts

@@ -1,4 +1,4 @@
-import { defineRendererPlugin } from '../app/extension';
+import { defineRendererPlugin } from '../app/boosts';
 import { LifecyclePhase } from '@alilc/lowcode-renderer-core';
 import { createRouter, type RouterOptions } from '@alilc/lowcode-renderer-router';
 import { createRouterView } from './routerView';
@@ -29,13 +29,14 @@ export const routerPlugin = defineRendererPlugin({
     const router = createRouter(routerConfig);
 
     boosts.codeRuntime.getScope().set('router', router);
+    boosts.temporaryUse('router', router);
 
     const RouterView = createRouterView(router);
 
     boosts.addAppWrapper(RouterView);
     boosts.setOutlet(RouteOutlet);
 
-    whenLifeCylePhaseChange(LifecyclePhase.Ready).then(() => {
+    whenLifeCylePhaseChange(LifecyclePhase.AfterInitPackageLoad).then(() => {
       return router.isReady();
     });
   },

packages/react-renderer/src/router/route.tsx

@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { useRenderContext } from '../app/context';
-import { OutletProps } from '../app/extension';
+import { OutletProps } from '../app/boosts';
 import { useRouteLocation } from './context';
-import { createComponentBySchema } from '../runtime/component';
+import { createComponentBySchema } from '../runtime/schema';
 
 export function RouteOutlet(props: OutletProps) {
   const context = useRenderContext();

packages/react-renderer/src/runtime/render.tsx → packages/react-renderer/src/runtime/components.tsx

@@ -16,7 +16,7 @@ import { type ComponentType, type ReactInstance, useMemo, createElement } from '
 import { useRenderContext } from '../app/context';
 import { useReactiveStore } from './hooks/useReactiveStore';
 import { useModel } from './context';
-import { getComponentByName } from './component';
+import { getComponentByName } from './schema';
 
 export type ReactComponent = ComponentType<any>;
 export type ReactWidget = IWidget<ReactComponent, ReactInstance>;

packages/react-renderer/src/runtime/context.ts

@@ -1,6 +1,6 @@
 import { IComponentTreeModel } from '@alilc/lowcode-renderer-core';
 import { createContext, useContext, type ReactInstance } from 'react';
-import { type ReactComponent } from './render';
+import { type ReactComponent } from './components';
 
 export const ModelContext = createContext<IComponentTreeModel<ReactComponent, ReactInstance>>(
   undefined!,

packages/react-renderer/src/runtime/index.ts

@@ -1,2 +1,2 @@
-export * from './component';
-export * from './render';
+export * from './schema';
+export * from './components';

packages/react-renderer/src/runtime/component.tsx → packages/react-renderer/src/runtime/schema.tsx

@@ -4,7 +4,7 @@ import { isValidElementType } from 'react-is';
 import { useRenderContext } from '../app/context';
 import { reactiveStateFactory } from './reactiveState';
 import { dataSourceCreator } from './dataSource';
-import { type ReactComponent, type ReactWidget, createElementByWidget } from './render';
+import { type ReactComponent, type ReactWidget, createElementByWidget } from './components';
 import { ModelContextProvider } from './context';
 import { appendExternalStyle } from '../utils/element';
 

packages/renderer-core/__tests__/parts/code-runtime/codeScope.spec.ts → packages/renderer-core/__tests__/services/code-runtime/codeScope.spec.ts

@@ -1,5 +1,8 @@
+/**
+ * @vitest-environment jsdom
+ */
 import { describe, it, expect } from 'vitest';
-import { CodeScope } from '../../../src/parts/code-runtime';
+import { CodeScope } from '../../../src/services/code-runtime';
 
 describe('CodeScope', () => {
   it('should return initial values', () => {
@@ -18,9 +21,8 @@ describe('CodeScope', () => {
   it('inject should not overwrite existing values without force', () => {
     const initValue = { a: 1 };
     const scope = new CodeScope(initValue);
-    scope.set('a', 2);
-    expect(scope.value.a).toBe(1);
-    scope.set('a', 3, true);
+    expect(scope.value.a).not.toBe(2);
+    scope.set('a', 3);
     expect(scope.value.a).toBe(3);
   });
 

packages/renderer-core/__tests__/services/lifeCycle.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest';
+import { LifeCycleService, LifecyclePhase } from '../../src/services/lifeCycleService';
+
+const sleep = () => new Promise((r) => setTimeout(r, 500));
+
+describe('LifeCycleService', () => {
+  it('it works', async () => {
+    let result = '';
+    const lifeCycle = new LifeCycleService();
+
+    lifeCycle.when(LifecyclePhase.Ready).then(() => {
+      result += '1';
+    });
+    lifeCycle.when(LifecyclePhase.Ready).finally(() => {
+      result += '2';
+    });
+    lifeCycle.when(LifecyclePhase.AfterInitPackageLoad).then(() => {
+      result += '3';
+    });
+    lifeCycle.when(LifecyclePhase.AfterInitPackageLoad).finally(() => {
+      result += '4';
+    });
+
+    lifeCycle.phase = LifecyclePhase.Ready;
+
+    await sleep();
+
+    expect(result).toEqual('12');
+
+    lifeCycle.phase = LifecyclePhase.AfterInitPackageLoad;
+
+    await sleep();
+
+    expect(result).toEqual('1234');
+  });
+});

packages/renderer-core/src/main.ts

@@ -31,7 +31,7 @@ export class RendererMain<RenderObject> {
     @IBoostsService private boostsService: IBoostsService,
     @ILifeCycleService private lifeCycleService: ILifeCycleService,
   ) {
-    this.lifeCycleService.when(LifecyclePhase.OptionsResolved).finally(async () => {
+    this.lifeCycleService.when(LifecyclePhase.OptionsResolved).then(async () => {
       const renderContext = {
         schema: this.schemaService,
         packageManager: this.packageManagementService,
@@ -42,8 +42,6 @@ export class RendererMain<RenderObject> {
 
       this.renderObject = await this.adapter(renderContext);
 
-      await this.packageManagementService.loadPackages(this.initOptions.packages ?? []);
-
       this.lifeCycleService.phase = LifecyclePhase.Ready;
     });
   }
@@ -60,13 +58,19 @@ export class RendererMain<RenderObject> {
 
     this.codeRuntimeService.initialize(options.codeRuntime ?? {});
 
-    this.extensionHostService.registerPlugin(plugins);
-
     this.lifeCycleService.phase = LifecyclePhase.OptionsResolved;
+
+    await this.lifeCycleService.when(LifecyclePhase.Ready);
+
+    await this.extensionHostService.registerPlugin(plugins);
+
+    await this.packageManagementService.loadPackages(this.initOptions.packages ?? []);
+
+    this.lifeCycleService.phase = LifecyclePhase.AfterInitPackageLoad;
   }
 
   async getApp(): Promise<RendererApplication<RenderObject>> {
-    await this.lifeCycleService.when(LifecyclePhase.Ready);
+    await this.lifeCycleService.when(LifecyclePhase.AfterInitPackageLoad);
 
     // construct application
     return Object.freeze<RendererApplication<RenderObject>>({
@@ -79,8 +83,7 @@ export class RendererMain<RenderObject> {
       ...this.renderObject,
 
       use: (plugin) => {
-        this.extensionHostService.registerPlugin(plugin);
-        return this.extensionHostService.doSetupPlugin(plugin);
+        return this.extensionHostService.registerPlugin(plugin);
       },
     });
   }

packages/renderer-core/src/services/extension/boosts.ts

@@ -4,14 +4,18 @@ import { ICodeRuntimeService } from '../code-runtime';
 import { IRuntimeUtilService } from '../runtimeUtilService';
 import { IRuntimeIntlService } from '../runtimeIntlService';
 
-export type IBoosts<Extends> = IBoostsApi & Extends;
+export type IBoosts<Extends> = IBoostsApi & Extends & { [key: string]: any };
 
 export interface IBoostsApi {
   readonly codeRuntime: ICodeRuntimeService;
 
   readonly intl: Pick<IRuntimeIntlService, 't' | 'setLocale' | 'getLocale' | 'addTranslations'>;
 
   readonly util: Pick<IRuntimeUtilService, 'add' | 'remove'>;
+  /**
+   * 允许插件挂载额外的对象在 boosts 上，方便其他插件使用
+   */
+  temporaryUse(name: string, value: any): void;
 }
 
 /**
@@ -43,6 +47,9 @@ export class BoostsService implements IBoostsService {
       codeRuntime: this.codeRuntimeService,
       intl: this.runtimeIntlService,
       util: this.runtimeUtilService,
+      temporaryUse: (name, value) => {
+        this.extend(name, value);
+      },
     };
   }
 
@@ -55,6 +62,8 @@ export class BoostsService implements IBoostsService {
       } else {
         if (!this.extendsValue[name]) {
           this.extendsValue[name] = value;
+        } else {
+          console.warn(`${name} is exist`);
         }
       }
     } else if (isObject(name)) {

packages/renderer-core/src/services/extension/extensionHostService.ts

@@ -3,18 +3,14 @@ import { type Plugin, type PluginContext } from './plugin';
 import { IBoostsService } from './boosts';
 import { IPackageManagementService } from '../package';
 import { ISchemaService } from '../schema';
-import { type RenderAdapter } from './render';
-import { IComponentTreeModelService } from '../model';
 import { ILifeCycleService, LifecyclePhase } from '../lifeCycleService';
 
 interface IPluginRuntime extends Plugin {
   status: 'setup' | 'ready';
 }
 
 export interface IExtensionHostService {
-  registerPlugin(plugin: Plugin | Plugin[]): void;
-
-  doSetupPlugin(plugin: Plugin): Promise<void>;
+  registerPlugin(plugin: Plugin | Plugin[]): Promise<void>;
 
   getPlugin(name: string): Plugin | undefined;
 
@@ -50,15 +46,9 @@ export class ExtensionHostService implements IExtensionHostService {
         return this.lifeCycleService.when(phase);
       },
     };
-
-    this.lifeCycleService.when(LifecyclePhase.OptionsResolved).then(async () => {
-      for (const plugin of this.pluginRuntimes) {
-        await this.doSetupPlugin(plugin);
-      }
-    });
   }
 
-  registerPlugin(plugins: Plugin | Plugin[]) {
+  async registerPlugin(plugins: Plugin | Plugin[]) {
     plugins = Array.isArray(plugins) ? plugins : [plugins];
 
     for (const plugin of plugins) {
@@ -67,19 +57,17 @@ export class ExtensionHostService implements IExtensionHostService {
         continue;
       }
 
-      this.pluginRuntimes.push({
-        ...plugin,
-        status: 'ready',
-      });
+      await this.doSetupPlugin(plugin);
     }
   }
 
-  async doSetupPlugin(plugin: Plugin) {
+  private async doSetupPlugin(plugin: Plugin) {
     const pluginRuntime = plugin as IPluginRuntime;
 
-    if (!this.pluginRuntimes.some((item) => item.name !== pluginRuntime.name)) {
-      return;
-    }
+    this.pluginRuntimes.push({
+      ...pluginRuntime,
+      status: 'ready',
+    });
 
     const isSetup = (name: string) => {
       const setupPlugins = this.pluginRuntimes.filter((item) => item.status === 'setup');