feat(docs-website, engine, model): 🎸 add update assetsPackageList logic

affects: docs-website, engine, model

packages/docs-website/pluginDoc/custom-setter.mdx

@@ -50,7 +50,7 @@ return (
     schema={page as any}
     // 传入组件物料
     material={[...InnerComponentMeta, ...Material]}
-    // 船队组件物料对应的 js 运行库，只能使用 umd 模式的 js
+    // 组件物料对应的 js 运行库，只能使用 umd 模式的 js
     assetPackagesList={assetPackagesList}
     beforePluginRun={({ pluginManager }) => {
       pluginManager.customPlugin('RightPanel', (pluginInstance) => {

packages/engine/src/core/assetPackagesListManage.ts

@@ -0,0 +1,16 @@
+import { AssetPackage } from '@chamn/model';
+
+export class AssetsPackageListManager {
+  private _assets: AssetPackage[];
+  constructor(assets: AssetPackage[]) {
+    this._assets = assets;
+  }
+
+  getList() {
+    return this._assets;
+  }
+
+  setList(newAssets: AssetPackage[]) {
+    this._assets = [...newAssets, ...this._assets];
+  }
+}

packages/engine/src/core/pluginManager.ts

@@ -4,6 +4,7 @@ import { i18n } from 'i18next';
 import mitt, { Emitter } from 'mitt';
 import { Workbench } from '../component/Workbench';
 import { CustomI18n } from '../i18n';
+import { AssetsPackageListManager } from './assetPackagesListManage';
 
 export type PluginObj<C, E = any> = {
   name: string;
@@ -27,7 +28,7 @@ type PluginManagerOptions = {
   emitter: Emitter<any>;
   pageModel: CPage;
   i18n: CustomI18n;
-  assets: AssetPackage[];
+  assetsPackageListManager: AssetsPackageListManager;
   engine: Engine;
 };
 
@@ -55,16 +56,16 @@ export class PluginManager {
   getWorkbench!: () => Workbench;
   pageModel!: CPage;
   i18n: CustomI18n;
-  assets: AssetPackage[];
+  assetsPackageListManager: AssetsPackageListManager;
   engine: Engine;
   customPluginHooks: Record<string, CustomPluginHook[]> = {};
 
-  constructor({ getWorkbench, emitter, pageModel, i18n, assets, engine }: PluginManagerOptions) {
+  constructor({ getWorkbench, emitter, pageModel, i18n, assetsPackageListManager, engine }: PluginManagerOptions) {
     this.getWorkbench = getWorkbench;
     this.emitter = emitter;
     this.pageModel = pageModel;
     this.i18n = i18n;
-    this.assets = assets;
+    this.assetsPackageListManager = assetsPackageListManager;
     this.engine = engine;
   }
 
@@ -86,7 +87,7 @@ export class PluginManager {
       pluginManager: this,
       pageModel: this.pageModel,
       i18n: this.i18n,
-      assets: this.assets,
+      assetsPackageListManager: this.assetsPackageListManager,
       engine: this.engine,
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       pluginReadyOk: () => {},

packages/engine/src/index.tsx

@@ -8,7 +8,8 @@ import { AssetPackage, CMaterialType, CNode, CPage, CPageDataType, CRootNode, Em
 import { getDefaultRender, beforeInitRender } from './utils/defaultEngineConfig';
 import { DesignerPluginInstance } from './plugins/Designer/type';
 import clsx from 'clsx';
-import { AssetLoader, collectVariable } from '@chamn/render';
+import { AssetLoader, ComponentsType, collectVariable } from '@chamn/render';
+import { AssetsPackageListManager } from './core/assetPackagesListManage';
 
 export type EnginContext = {
   pluginManager: PluginManager;
@@ -41,13 +42,15 @@ export class Engine extends React.Component<EngineProps> {
   pageModel: CPage;
   material: CMaterialType[] | undefined;
   emitter: Emitter<any>;
+  assetsPackageListManager: AssetsPackageListManager;
 
   constructor(props: EngineProps) {
     super(props);
     this.pageSchema = props.schema;
     this.material = props.material;
     this.currentSelectNode = null;
     (window as any).__CHAMELEON_ENG__ = this;
+    this.assetsPackageListManager = new AssetsPackageListManager(props.assetPackagesList || []);
 
     try {
       this.pageModel = new CPage(this.pageSchema, {
@@ -77,7 +80,7 @@ export class Engine extends React.Component<EngineProps> {
       emitter: this.emitter,
       pageModel: this.pageModel,
       i18n,
-      assets: this.props.assetPackagesList || [],
+      assetsPackageListManager: this.assetsPackageListManager,
     });
     this.pluginManager = pluginManager;
     // 使用默认的渲染策略
@@ -131,10 +134,19 @@ export class Engine extends React.Component<EngineProps> {
     this.pageModel.updatePage(page);
   };
 
-  updateMaterials = async (materials: CMaterialType[], assetPackagesList: AssetPackage[]) => {
+  updateMaterials = async (
+    materials: CMaterialType[],
+    assetPackagesList: AssetPackage[],
+    options: {
+      formatComponents?: (componentMap: ComponentsType) => ComponentsType;
+    }
+  ) => {
     const designerPlugin = await this.pluginManager.get<DesignerPluginInstance>('Designer');
     const designerPluginExport = designerPlugin?.export;
 
+    this.pluginManager.assetsPackageListManager.setList(assetPackagesList);
+    this.pageModel.assetPackagesList = this.pluginManager.assetsPackageListManager.getList();
+
     const subWin = designerPluginExport?.getDesignerWindow();
 
     if (!subWin) {
@@ -145,7 +157,10 @@ export class Engine extends React.Component<EngineProps> {
     // 从子窗口获取物料对象
     const assetLoader = new AssetLoader(assetPackagesList, subWin);
     await assetLoader.load();
-    const componentCollection = collectVariable(assetPackagesList, subWin);
+    let componentCollection = collectVariable(assetPackagesList, subWin);
+    if (options?.formatComponents) {
+      componentCollection = options.formatComponents(componentCollection);
+    }
     // 更新 render 中的组件库
     designerPluginExport?.updateRenderComponents(componentCollection);
     this.pageModel.materialsModel.addMaterials(materials);

packages/engine/src/plugins/Designer/components/Canvas/index.tsx

@@ -49,7 +49,7 @@ export class Designer extends React.Component<DesignerPropsType, DesignerStateTy
       hoverToolbarView: null,
       selectToolbarView: null,
       ghostView: null,
-      assets: props.pluginCtx.assets || ([] as AssetPackage[]),
+      assets: props.pluginCtx.assetsPackageListManager.getList() || ([] as AssetPackage[]),
       portalView: null,
       selectRectViewRender: null,
       hoverRectViewRender: null,

packages/model/src/Page/index.ts

@@ -307,6 +307,7 @@ export class CPage {
       if (el.componentName && el.package && el.version) {
         return true;
       }
+      console.warn(`${el} not a valid material info`);
       return false;
     });
     this.materialsModel.usedMaterials = [];