alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.66k stars 2.55k forks source link

请问我该在什么时候使用material.loadIncrementalAssets #1340

Closed hoifong closed 1 year ago

hoifong commented 1 year ago

Describe the bug (required) / 详细描述 bug(必填)

我在使用material.setAssets之后使用material.loadIncrementalAssets,会报错。 A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述 我有两份assets.json, 一份是用来在插件初始化时提供必须的依赖:

basicAssets

{
  "packages": [
    {
      "package": "moment",
      "version": "2.24.0",
      "urls": ["/core/moment.js"],
      "library": "moment"
    },
    {
      "package": "lodash",
      "library": "_",
      "urls": ["/core/lodash.js"]
    },
    {
      "title": "fusion组件库",
      "package": "@alifd/next",
      "version": "1.24.18",
      "urls": ["/css/next.css", "/core/next.js"],
      "library": "Next"
    }
  ],
  "components": [],
  "sort": {
    "groupList": ["精选组件", "原子组件"],
    "categoryList": [
      "基础元素",
      "布局容器类",
      "表格类",
      "表单详情类",
      "帮助类",
      "对话框类",
      "业务类",
      "通用",
      "引导",
      "信息输入",
      "信息展示",
      "信息反馈"
    ]
  },
  "groupList": ["精选组件", "原子组件"],
  "ignoreComponents": {}
}

另一份用来提供内部我们内部的组件库:

componentsAssets

{
  "packages": [
    {
      "package": "lowcode-rc",
      "version": "0.0.1",
      "library": "LowcodeRc",
      "urls": [
        "/lowcode-rc/build/lowcode/render/default/view.js",
        "/lowcode-rc/build/lowcode/render/default/view.css"
      ],
      "editUrls": ["/lowcode-rc/build/lowcode/view.js", "./lowcode-rc/build/lowcode/view.css"],
      "advancedUrls": {
        "default": [
          "/lowcode-rc/build/lowcode/render/default/view.js",
          "/lowcode-rc/build/lowcode/render/default/view.css"
        ]
      },
      "advancedEditUrls": {}
    }
  ],
  "components": [
    {
      "exportName": "LowcodeRcMeta",
      "npm": {
        "package": "lowcode-rc",
        "version": "0.0.1"
      },
      "url": "/lowcode-rc/build/lowcode/meta.js",
      "urls": {
        "default": "/lowcode-rc/build/lowcode/meta.js"
      },
      "advancedUrls": {
        "default": ["/lowcode-rc/build/lowcode/meta.js"]
      }
    }
  ],
  "sort": {
    "groupList": ["精选组件", "原子组件"],
    "categoryList": [
      "基础元素",
      "布局容器类",
      "表格类",
      "表单详情类",
      "帮助类",
      "对话框类",
      "业务类",
      "通用",
      "引导",
      "信息输入",
      "信息展示",
      "信息反馈"
    ]
  },
  "groupList": ["精选组件", "原子组件"],
  "ignoreComponents": {}
}

代码如下:


function editorInit(ctx: ILowCodePluginContext): ILowCodePluginConfig {
  return {
    async init() {
      const { project, material, skeleton } = ctx;

      material.setAssets(basicAssets as any);
      material.loadIncrementalAssets(componentsAssets as any);

      // 加载 schema
      project.openDocument(
        getProjectSchemaFromLocalStorage("hs-lowcode").componentsTree?.[0] || schema
      );

      //  加载组件面板
      const componentsPane = skeleton.add({
        area: "leftArea",
        type: "PanelDock",
        name: "componentsPane",
        content: ComponentsPane,
        contentProps: {},
        props: {
          align: "top",
          icon: "zujianku",
          description: "组件库"
        }
      });

      componentsPane?.disable?.();
      project.onSimulatorRendererReady(() => {
        componentsPane?.enable?.();
      });
    }
  };
}

错误如下: engine-error


To Reproduce (required) / 如何复现 bug?(必填,非常重要)

Steps to reproduce the behavior: / 详细复现步骤:


English version example:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

中文版示例:

  1. 打开 demo
  2. 点击标题;
  3. 在右侧修改标题内容为「修改后的标题」;
  4. 渲染画布标题组件没有更新显示为「修改后的标题」;

Expected behavior (required) / 预期行为(必填,非常重要)

A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为

组件应该被添加到左侧的组件库当中,并且不报错

Screenshots (optional) / bug 截图(可选)

Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题


Environments (please complete the following information) (required): / 请提供如下信息(必填)

1.0.0

1.0.4

Edge 84.0.522.52

react-scripts@3.4.4

(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)

Additional context (optional) / 更多额外信息(可选)

Any other context of the problem here. / 可以追加更多的额外信息,帮助定位问题

JackLian commented 1 year ago

官方demo里有这个api的调用示例,先看看?

hoifong commented 1 year ago

官方demo里有这个api的调用示例,先看看?

我就是按照官网的调用示例写的,我没有找到关于这个api更详细的使用说明。

liujuping commented 1 year ago

1.调用过 material.setAssets

2.需要加载一些异步的增量资产包。material.loadIncrementalAssets

可能的场景:低代码页面资产包很多的情况下,首屏事件会很长,这时候可以选择通过 material.setAssets 注入 schema 中组件相关的资产包,很多第一次渲染时候不需要的物料相关的资产包在第一次渲染完毕之后再通过 material.loadIncrementalAssets 进行资产包的注入。