beta版引擎通过workbench方式接入，注册插件用的demo中的方式报错

baieceo commented 2 years ago

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

beta版引擎通过workbench方式接入，注册插件用的demo中的方式，报错信息如下

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

Steps to reproduce the behavior: / 详细复现步骤： index.jsx

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import { init, common, plugins, config, project, skeleton } from '@alilc/lowcode-engine';

import '../universal/global.less';
import registerPlugins from './universal/plugin';

const preference = new Map();

preference.set('DataSourcePane', {
  importPlugins: [],
  dataSourceTypes: [
    {
      type: 'fetch',
    },
    {
      type: 'jsonp',
    },
  ],
});

function FormDesigner() {
  /** 插件是否已初始化成功，因为必须要等插件初始化后才能渲染 Workbench */
  const [hasPluginInited, setHasPluginInited] = useState(false);

  async function main() {
    config.setConfig({
      // designMode: 'live',
      // locale: 'zh-CN',
      enableCondition: true,
      enableCanvasLock: true,
      // 默认绑定变量
      supportVariableGlobally: true,
      // simulatorUrl 在当 engine-core.js 同一个父路径下时是不需要配置的！！！
      // 这里因为用的是 alifd cdn，在不同 npm 包，engine-core.js 和 react-simulator-renderer.js 是不同路径
      simulatorUrl: [
        'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/css/react-simulator-renderer.css',
        'https://alifd.alicdn.com/npm/@alilc/lowcode-react-simulator-renderer@latest/dist/js/react-simulator-renderer.js',
      ],
    });

    await registerPlugins();
    await plugins.init(preference);

    setHasPluginInited(true);
  }

  useEffect(() => {
    main();
  }, []);

  return (
    <div>
      {hasPluginInited && <common.skeletonCabin.Workbench skeleton={skeleton} />}
    </div>
  );
}

FormDesigner.layout = {
  hideNav: true,
  hideMenu: true,
};

export default FormDesigner;

./universal/plugin.jsx

import React from 'react';
import { ILowCodePluginContext, plugins, skeleton, project, setters } from '@alilc/lowcode-engine';
import { Button } from '@alifd/next';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ComponentsPane from '@alilc/lowcode-plugin-components-pane';
// import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditor from '@alilc/lowcode-plugin-code-editor';
import ManualPlugin from '@alilc/lowcode-plugin-manual';
import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject';
import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select';

// 注册到引擎
import TitleSetter from '@alilc/lowcode-setter-title';
import BehaviorSetter from '../../setters/behavior-setter';
import CustomSetter from '../../setters/custom-setter';

import { loadIncrementalAssets, getPageSchema, saveSchema, resetSchema, preview } from './utils';
import assets from '../../public/assets.json';

export default async function registerPlugins() {
  await plugins.register(ManualPlugin);

  await plugins.register(Inject);

  // plugin API 见 https://yuque.antfin.com/ali-lowcode/docs/cdukce
  SchemaPlugin.pluginName = 'SchemaPlugin';

  await plugins.register(SchemaPlugin);

  SimulatorResizer.pluginName = 'SimulatorResizer';
  plugins.register(SimulatorResizer);

  const editorInit = (ctx) => {
    return {
      name: 'editor-init',
      async init() {
        // 修改面包屑组件的分隔符属性setter
        // const assets = await (
        //   await fetch(
        //     `https://alifd.alicdn.com/npm/@alilc/lowcode-materials/build/lowcode/assets-prod.json`
        //   )
        // ).json();
        // 设置物料描述
        const { material, project } = ctx;

        material.setAssets(await injectAssets(assets));

        const schema = await getPageSchema();

        // 加载 schema
        project.openDocument(schema);
      },
    };
  };

  editorInit.pluginName = 'editorInit';

  await plugins.register(editorInit);

  const builtinPluginRegistry = (ctx) => {
    return {
      name: 'builtin-plugin-registry',
      async init() {
        const { skeleton } = ctx;

        // 注册组件面板
        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?.();
        });
      },
    };
  };

  builtinPluginRegistry.pluginName = 'builtinPluginRegistry';

  await plugins.register(builtinPluginRegistry);

  // 设置内置 setter 和事件绑定、插件绑定面板
  const setterRegistry = (ctx) => {
    const { setterMap, pluginMap } = window.AliLowCodeEngineExt;

    return {
      name: 'ext-setters-registry',
      async init() {
        const { setters, skeleton } = ctx;
        // 注册setterMap
        setters.registerSetter(setterMap);
        // 注册插件
        // 注册事件绑定面板
        skeleton.add({
          area: 'centerArea',
          type: 'Widget',
          content: pluginMap.EventBindDialog,
          name: 'eventBindDialog',
          props: {},
        });

        // 注册变量绑定面板
        skeleton.add({
          area: 'centerArea',
          type: 'Widget',
          content: pluginMap.VariableBindDialog,
          name: 'variableBindDialog',
          props: {},
        });
      },
    };
  };

  setterRegistry.pluginName = 'setterRegistry';

  await plugins.register(setterRegistry);

  // 注册回退/前进
  await plugins.register(UndoRedoPlugin);

  // 注册中英文切换
  // await plugins.register(ZhEnPlugin);

  const loadAssetsSample = (ctx) => {
    return {
      name: 'loadAssetsSample',
      async init() {
        const { skeleton } = ctx;

        skeleton.add({
          name: 'loadAssetsSample',
          area: 'topArea',
          type: 'Widget',
          props: {
            align: 'right',
            width: 80,
          },
          content: <Button onClick={loadIncrementalAssets}>异步加载资源</Button>,
        });
      },
    };
  };

  loadAssetsSample.pluginName = 'loadAssetsSample';

  await plugins.register(loadAssetsSample);

  // 注册保存面板
  const saveSample = (ctx) => {
    return {
      name: 'saveSample',
      async init() {
        const { skeleton, hotkey } = ctx;

        skeleton.add({
          name: 'saveSample',
          area: 'topArea',
          type: 'Widget',
          props: {
            align: 'right',
          },
          content: <Button onClick={saveSchema}>保存到本地</Button>,
        });

        skeleton.add({
          name: 'resetSchema',
          area: 'topArea',
          type: 'Widget',
          props: {
            align: 'right',
          },
          content: <Button onClick={resetSchema}>重置页面</Button>,
        });

        hotkey.bind('command+s', (e) => {
          e.preventDefault();
          saveSchema();
        });
      },
    };
  };

  saveSample.pluginName = 'saveSample';

  await plugins.register(saveSample);

  DataSourcePanePlugin.pluginName = 'DataSourcePane';

  await plugins.register(DataSourcePanePlugin);

  CodeEditor.pluginName = 'CodeEditor';

  await plugins.register(CodeEditor);

  // 注册出码插件
  CodeGenPlugin.pluginName = 'CodeGenPlugin';

  await plugins.register(CodeGenPlugin);

  const previewSample = (ctx) => {
    return {
      name: 'previewSample',
      async init() {
        const { skeleton } = ctx;
        skeleton.add({
          name: 'previewSample',
          area: 'topArea',
          type: 'Widget',
          props: {
            align: 'right',
          },
          content: (
            <Button type="primary" onClick={preview}>
              预览
            </Button>
          ),
        });
      },
    };
  };

  previewSample.pluginName = 'previewSample';

  await plugins.register(previewSample);

  const customSetter = (ctx) => {
    return {
      name: '___registerCustomSetter___',
      async init() {
        const { setters } = ctx;

        setters.registerSetter('TitleSetter', TitleSetter);
        setters.registerSetter('BehaviorSetter', BehaviorSetter);
        setters.registerSetter('CustomSetter', CustomSetter);
      },
    };
  };

  customSetter.pluginName = 'customSetter';

  await plugins.register(customSetter);
}

English version example：

Go to '...'
Click on '....'
Scroll down to '....'
See error

中文版示例：

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

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): / 请提供如下信息（必填）

AliLowCodeEngine version: [e.g. beta] / https://unpkg.com/@alilc/lowcode-engine@beta/dist/js/engine-core.js
AliLowCodeEngineExt version: [e.g. beta] / https://unpkg.com/@alilc/lowcode-engine-ext@beta/dist/js/engine-ext.js
Browser [e.g. chrome] / 版本 98.0.4758.102（正式版本）（64 位）
materials / plugins / tools / 其他物料 / 插件 / 工具链版本
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; import ComponentsPane from '@alilc/lowcode-plugin-components-pane'; // import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator'; import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; import SchemaPlugin from '@alilc/lowcode-plugin-schema'; import CodeEditor from '@alilc/lowcode-plugin-code-editor'; import ManualPlugin from '@alilc/lowcode-plugin-manual'; import Inject, { injectAssets } from '@alilc/lowcode-plugin-inject'; import SimulatorResizer from '@alilc/lowcode-plugin-simulator-select';

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

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

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

LeoYuan commented 2 years ago

给一个复现项目？比如基于 demo fork 一下~

baieceo commented 2 years ago

给一个复现项目？比如基于 demo fork 一下~

晚些时候提供给您

LeoYuan commented 2 years ago

直接参考这个吧，https://github.com/alibaba/lowcode-demo/tree/main/src/scenarios/custom-initialization

引擎版本注意一下，你用的应该非常非常老~

github-actions[bot] commented 2 years ago

This issue is stale because it has been open 10 days with no activity. Remove stale label or comment or this will be closed in 2 days.

github-actions[bot] commented 2 years ago

This issue was closed because it has been stalled for 10 days with no activity.

alibaba / lowcode-engine