多文件编辑器

借助此插件可在低码引擎上使用任意层级的文件树进行代码的组织

Demo

import multipleFileCodeEditorFactory from '@alilc/lowcode-plugin-multiple-editor';

import { PrettierPlugin } from '@alilc/lowcode-plugin-multiple-editor/es/plugins/prettier-plugin';


const PLUGIN_NAME = 'multiple-file-code-editor';
// 详细参数可见 ts 类型声明
const plugin: any = multipleFileCodeEditorFactory({
  softSave: true, // true 保存代码时将代码保存在插件类上，并不会调用引擎的 importSchema
  es6: true, // 编译选项，true 时仅做 es module 的编译
  // 可选择使用插进进行代码编辑器功能的拓展
  plugins: [searchPlugin as any, lintPlugin, new PrettierPlugin()],
  // 内置钩子，在插件初始化时进行一些操作，例如添加类型声明
  onInstall(controller: EditorController) {
    for (const [path, content] of extraLibList) {
      controller.addExtraLib(content, path);
    }
    controller.addComponentDeclarations(declarations);
    controller.onImportSchema(async (schema) => {
      // Todo sth.
    });
    window.codeEditorController = controller;
  },
  defaultFiles: {
    utils: `
export function helloWorld() {
  console.log('hello world');
}
    `
  }
});

plugin.pluginName = PLUGIN_NAME;

await plugins.register(plugin);

工作原理

使用该插件时，每次保存时：

1. 编译代码，生成 __initExtra 函数方法，该方法用于初始化各个方法、生命周期的真实定义
2. 修改 constructor 函数体，函数体内执行 __initExtra，constructor 将会在渲染引擎内执行，执行完成后即可得到所有方法和生命周期的真实定义
3. 在 schema 上保存一个文件 Map，保存位置为 schema.componentsTree[0]._sourceCodeMap

使用注意事项

1. 建议所有 project.importSchema 和 project.exportSchema 替换为 codeEditorController.importSchema 和 codeEditorController.exportSchema。原因是插件内部需要对文件内容进行处理
2. 不能在 index.js 的 Class 之外进行函数、变量定义，如需定义则在其他文件内定义
3. 不能在 index.js Class 的 state 定义中使用表达式
4. 如需在 setter 内适用类型定义，请开启 base-editor 的单例模式，仅需在应用入口处调用如下方法即可：
5. 如果低码项目有使用出码，则需对出码进行定制，将 _sourceCodeMap 中的文件生成到项目中，并对文件的引用进行处理，具体处理方式可自行组织

使用单例模式

import { configure } from '@alilc/lowcode-plugin-base-monaco-editor';
configure({ singleton: true });