Merge branch 'develop' into release/1.1.7-beta

docs/docs/guide/design/editor.md

@@ -336,7 +336,7 @@ simulator-renderer 通过调用 host 的方法，将 schema、components 等参
 1. **画布内拖拽：**此时 sensor 是 simulatorHost，拖拽完成之后，会根据拖拽的位置来完成节点的精确插入。
 2. **从组件面板拖拽到画布**：此时的 sensor 还是 simulatorHost，因为拖拽结束的目标还是画布。
 3. **大纲树面板拖拽到画布中**：此时有两个 sensor，一个是大纲树，当我们拖拽到画布区域时，画布区域内的 simulatorHost 开始接管。
-4. **画布拖拽到画布中**：从画布中开始拖拽时，最新生效的是 simulatorHost，当离开画布到大纲树时，大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时，大纲树会将大纲树中的信息转化为 schema，然后渲染到画布中。
+4. **画布拖拽到大纲树中**：从画布中开始拖拽时，最新生效的是 simulatorHost，当离开画布到大纲树时，大纲树 sensor 开始接管生效。当拖拽到大纲树的某一个节点下时，大纲树会将大纲树中的信息转化为 schema，然后渲染到画布中。
 ### 其他
 
 引擎的编排能力远远不止上述所描述的功能，这里只描述了其核心和关键的功能。在整个引擎的迭代和设计过程中还有很多细节来使我们的引擎更好用、更容易扩展。

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-engine-docs",
-  "version": "1.0.27",
+  "version": "1.0.28",
   "description": "低代码引擎版本化文档",
   "license": "MIT",
   "files": [

modules/code-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-code-generator",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "出码引擎 for LowCode Engine",
   "license": "MIT",
   "main": "lib/index.js",
@@ -145,4 +145,4 @@
     "registry": "https://registry.npmjs.org/"
   },
   "repository": "git@github.com:alibaba/lowcode-engine.git"
-}
+}

modules/code-generator/src/index.ts

@@ -9,7 +9,7 @@ import { createModuleBuilder } from './generator/ModuleBuilder';
 import { createDiskPublisher } from './publisher/disk';
 import { createZipPublisher } from './publisher/zip';
 import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs';
-import createIce3JsProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
+import createIceJs3ProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
 import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app';
 
 // 引入说明
@@ -42,7 +42,7 @@ export default {
   createModuleBuilder,
   solutions: {
     icejs: createIceJsProjectBuilder,
-    icejs3: createIce3JsProjectBuilder,
+    icejs3: createIceJs3ProjectBuilder,
     rax: createRaxAppProjectBuilder,
   },
   solutionParts: {

modules/code-generator/src/parser/SchemaParser.ts

@@ -32,7 +32,7 @@ import {
 import { SUPPORT_SCHEMA_VERSION_LIST } from '../const';
 
 import { getErrorMessage } from '../utils/errors';
-import { handleSubNodes, isValidContainerType } from '../utils/schema';
+import { handleSubNodes, isValidContainerType, ContainerType } from '../utils/schema';
 import { uniqueArray } from '../utils/common';
 import { componentAnalyzer } from '../analyzer/componentAnalyzer';
 import { ensureValidClassName } from '../utils/validate';
@@ -161,7 +161,8 @@ export class SchemaParser implements ISchemaParser {
             ...subRoot,
             componentName: getRootComponentName(subRoot.componentName, compDeps),
             containerType: subRoot.componentName,
-            moduleName: ensureValidClassName(changeCase.pascalCase(subRoot.fileName)),
+            moduleName: ensureValidClassName(subRoot.componentName === ContainerType.Component ?
+              subRoot.fileName : changeCase.pascalCase(subRoot.fileName)),
           };
           return container;
         });

modules/code-generator/src/plugins/component/react/containerClass.ts

@@ -48,7 +48,7 @@ const pluginFactory: BuilderComponentPluginFactory<unknown> = () => {
         type: ChunkType.STRING,
         fileType: FileType.JSX,
         name: CLASS_DEFINE_CHUNK_NAME.InsVar,
-        content: `static displayName = '${changeCase.pascalCase(ir.moduleName)}';`,
+        content: `static displayName = '${ir.moduleName}';`,
         linkAfter: [
           CLASS_DEFINE_CHUNK_NAME.Start,
         ],

modules/code-generator/src/plugins/component/react/jsx.ts

@@ -58,7 +58,7 @@ const pluginFactory: BuilderComponentPluginFactory<PluginConfig> = (config?) =>
           generateCompositeType(
             {
               type: 'JSFunction',
-              value: input.value || 'null',
+              value: input.value || 'function () {}',
             },
             Scope.createRootScope(),
           ),

modules/code-generator/src/standalone.ts

@@ -8,7 +8,8 @@ import './polyfills/buffer';
 import { createProjectBuilder } from './generator/ProjectBuilder';
 import { createModuleBuilder } from './generator/ModuleBuilder';
 import { createZipPublisher } from './publisher/zip';
-import createIceJsProjectBuilder, { plugins as reactPlugins } from './solutions/icejs';
+import createIceJsProjectBuilder, { plugins as icejsPlugins } from './solutions/icejs';
+import createIceJs3ProjectBuilder, { plugins as icejs3Plugins } from './solutions/icejs3';
 import createRaxAppProjectBuilder, { plugins as raxPlugins } from './solutions/rax-app';
 
 // 引入说明
@@ -18,6 +19,7 @@ import { COMMON_CHUNK_NAME, CLASS_DEFINE_CHUNK_NAME, DEFAULT_LINK_AFTER } from '
 // 引入通用插件组
 import esmodule from './plugins/common/esmodule';
 import requireUtils from './plugins/common/requireUtils';
+import styleImport from './plugins/common/styleImport';
 
 import css from './plugins/component/style/css';
 import constants from './plugins/project/constants';
@@ -32,6 +34,7 @@ import * as CONSTANTS from './const';
 
 // 引入内置解决方案模块
 import icejs from './plugins/project/framework/icejs';
+import icejs3 from './plugins/project/framework/icejs3';
 import rax from './plugins/project/framework/rax';
 
 export default {
@@ -39,10 +42,12 @@ export default {
   createModuleBuilder,
   solutions: {
     icejs: createIceJsProjectBuilder,
+    icejs3: createIceJs3ProjectBuilder,
     rax: createRaxAppProjectBuilder,
   },
   solutionParts: {
     icejs,
+    icejs3,
     rax,
   },
   publishers: {
@@ -50,6 +55,7 @@ export default {
   },
   plugins: {
     common: {
+
       /**
        * 处理 ES Module
        * @deprecated please use esModule
@@ -57,12 +63,7 @@ export default {
       esmodule,
       esModule: esmodule,
       requireUtils,
-    },
-    react: {
-      ...reactPlugins,
-    },
-    rax: {
-      ...raxPlugins,
+      styleImport,
     },
     style: {
       css,
@@ -72,6 +73,22 @@ export default {
       i18n,
       utils,
     },
+    icejs: {
+      ...icejsPlugins,
+    },
+    icejs3: {
+      ...icejs3Plugins,
+    },
+    rax: {
+      ...raxPlugins,
+    },
+
+    /**
+     * @deprecated please use icejs
+     */
+    react: {
+      ...icejsPlugins,
+    },
   },
   postprocessor: {
     prettier,

modules/code-generator/src/utils/schema.ts

@@ -147,4 +147,10 @@ export function isValidContainerType(schema: IPublicTypeNodeSchema) {
     'Component',
     'Block',
   ].includes(schema.componentName);
+}
+
+export const enum ContainerType {
+  Page = 'Page',
+  Component = 'Component',
+  Block = 'Block',
 }

packages/designer/src/document/document-model.ts

@@ -141,7 +141,7 @@ export interface IDocumentModel extends Omit<IPublicModelDocumentModel<
 
   insertNodes(parent: INode, thing: INode[] | IPublicTypeNodeData[], at?: number | null, copy?: boolean): INode[];
 
-  open(): DocumentModel;
+  open(): IDocumentModel;
 
   remove(): void;
 

packages/designer/src/document/node/props/prop.ts

@@ -16,6 +16,8 @@ export type UNSET = typeof UNSET;
 export interface IProp extends Omit<IPublicModelProp<
   INode
 >, 'exportSchema' | 'node'>, IPropParent {
+  spread: boolean;
+
   key: string | number | undefined;
 
   readonly props: IProps;
@@ -42,6 +44,8 @@ export interface IProp extends Omit<IPublicModelProp<
 
   setupItems(): IProp[] | null;
 
+  isVirtual(): boolean;
+
   get type(): ValueTypes;
 
   get size(): number;

packages/designer/src/plugin/plugin-manager.ts

@@ -143,11 +143,10 @@ export class LowCodePluginManager implements ILowCodePluginManager {
   }
 
   async delete(pluginName: string): Promise<boolean> {
-    const idx = this.plugins.findIndex((plugin) => plugin.name === pluginName);
-    if (idx === -1) return false;
-    const plugin = this.plugins[idx];
+    const plugin = this.plugins.find(({ name }) => name === pluginName);
+    if (!plugin) return false;
     await plugin.destroy();
-
+    const idx = this.plugins.indexOf(plugin);
     this.plugins.splice(idx, 1);
     return this.pluginsMap.delete(pluginName);
   }

packages/designer/src/project/project.ts

@@ -1,7 +1,7 @@
 import { obx, computed, makeObservable, action, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core';
 import { IDesigner } from '../designer';
 import { DocumentModel, isDocumentModel } from '../document';
-import type { IDocumentModel } from "../document";
+import type { IDocumentModel } from '../document';
 import {
   IPublicTypeComponentsMap,
   IPublicEnumTransformStage,
@@ -317,13 +317,13 @@ export class Project implements IProject {
       doc = this.createDocument();
       return doc.open();
     }
-    if (typeof doc === 'string') {
-      const got = this.documents.find((item) => item.fileName === doc || item.id === doc);
+    if (typeof doc === 'string' || typeof doc === 'number') {
+      const got = this.documents.find((item) => item.fileName === String(doc) || String(item.id) === String(doc));
       if (got) {
         return got.open();
       }
 
-      const data = this.data.componentsTree.find((data) => data.fileName === doc);
+      const data = this.data.componentsTree.find((data) => data.fileName === String(doc));
       if (data) {
         doc = this.createDocument(data);
         return doc.open();

packages/editor-skeleton/src/skeleton.ts

@@ -56,7 +56,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
   'onShowWidget' |
   'onHideWidget' |
   'remove' |
-  'hideArea'
+  'hideArea' |
+  'add'
 > {
   editor: IEditor;
 
@@ -101,6 +102,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
   ): WidgetContainer;
 
   createPanel(config: PanelConfig): Panel;
+
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IWidget | Widget | Panel | Stage | Dock | PanelDock | undefined;
 }
 
 export class Skeleton {
@@ -440,7 +443,7 @@ export class Skeleton {
     return restConfig;
   }
 
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>) {
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IWidget | Widget | Panel | Stage | Dock | PanelDock | undefined {
     const parsedConfig = {
       ...this.parseConfig(config),
       ...extraConfig,

packages/editor-skeleton/src/widget/panel.ts

@@ -211,6 +211,10 @@ export class Panel implements IWidget {
     this.setActive(false);
   }
 
+  disable() {}
+
+  enable(): void {}
+
   show() {
     this.setActive(true);
   }

packages/engine/src/modules/classes.ts

@@ -10,6 +10,7 @@ import {
   Selection,
   Prop,
   SimulatorHost,
+  SkeletonItem,
 } from '@alilc/lowcode-shell';
 import { Node as InnerNode } from '@alilc/lowcode-designer';
 
@@ -26,4 +27,5 @@ export default {
   Selection,
   Prop,
   SimulatorHost,
+  SkeletonItem,
 };

packages/engine/src/modules/symbols.ts

@@ -11,6 +11,7 @@ import {
   designerCabinSymbol,
   propSymbol,
   simulatorHostSymbol,
+  skeletonItemSymbol,
 } from '@alilc/lowcode-shell';
 
 export default {
@@ -26,4 +27,5 @@ export default {
   designerCabinSymbol,
   propSymbol,
   simulatorHostSymbol,
+  skeletonItemSymbol,
 };

packages/plugin-designer/src/index.tsx

@@ -62,6 +62,11 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
       if (!this._mounted) {
         return;
       }
+      engineConfig.onGot('locale', (locale) => {
+        this.setState({
+          locale,
+        });
+      });
       const { components, packages, extraEnvironment, utils } = assets;
       const state = {
         componentMetadatas: components || [],

packages/shell/src/api/plugins.ts

@@ -66,8 +66,8 @@ export class Plugins implements IPublicApiPlugins {
     return this[pluginsSymbol].has(pluginName);
   }
 
-  delete(pluginName: string) {
-    this[pluginsSymbol].delete(pluginName);
+  async delete(pluginName: string) {
+    return await this[pluginsSymbol].delete(pluginName);
   }
 
   toProxy() {

packages/shell/src/api/skeleton.ts

@@ -4,8 +4,9 @@ import {
   SkeletonEvents,
 } from '@alilc/lowcode-editor-skeleton';
 import { skeletonSymbol } from '../symbols';
-import { IPublicApiSkeleton, IPublicTypeDisposable, IPublicTypeSkeletonConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
+import { IPublicApiSkeleton, IPublicModelSkeletonItem, IPublicTypeDisposable, IPublicTypeSkeletonConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
 import { getLogger } from '@alilc/lowcode-utils';
+import { SkeletonItem } from '../model/skeleton-item';
 
 const innerSkeletonSymbol = Symbol('skeleton');
 
@@ -46,12 +47,15 @@ export class Skeleton implements IPublicApiSkeleton {
    * @param extraConfig
    * @returns
    */
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>) {
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IPublicModelSkeletonItem | undefined {
     const configWithName = {
       ...config,
       pluginName: this.pluginName,
     };
-    return this[skeletonSymbol].add(configWithName, extraConfig);
+    const item = this[skeletonSymbol].add(configWithName, extraConfig);
+    if (item) {
+      return new SkeletonItem(item);
+    }
   }
 
   /**
@@ -68,6 +72,10 @@ export class Skeleton implements IPublicApiSkeleton {
     skeleton[normalizeArea(area)].container?.remove(name);
   }
 
+  getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] {
+    return this[skeletonSymbol][normalizeArea(areaName)].container.items?.map(d => new SkeletonItem(d));
+  }
+
   /**
    * 显示面板
    * @param name
@@ -193,7 +201,7 @@ export class Skeleton implements IPublicApiSkeleton {
   }
 }
 
-function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea' | 'rightArea' | 'topArea' | 'toolbar' | 'mainArea' | 'bottomArea' | 'leftFixedArea' | 'leftFloatArea' | 'stages' {
+function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea' | 'rightArea' | 'topArea' | 'toolbar' | 'mainArea' | 'bottomArea' | 'leftFixedArea' | 'leftFloatArea' | 'stages' | 'subTopArea' {
   switch (area) {
     case 'leftArea':
     case 'left':
@@ -220,6 +228,8 @@ function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea
       return 'leftFloatArea';
     case 'stages':
       return 'stages';
+    case 'subTopArea':
+      return 'subTopArea';
     default:
       throw new Error(`${area} not supported`);
   }

packages/shell/src/api/workspace.ts

@@ -73,4 +73,8 @@ export class Workspace implements IPublicApiWorkspace {
   onChangeActiveWindow(fn: () => void): IPublicTypeDisposable {
     return this[workspaceSymbol].onChangeActiveWindow(fn);
   }
+
+  onChangeActiveEditorView(fn: () => void): IPublicTypeDisposable {
+    return this[workspaceSymbol].onChangeActiveEditorView(fn);
+  }
 }

packages/shell/src/index.ts

@@ -11,6 +11,7 @@ import {
   Clipboard,
   SettingField,
   Window,
+  SkeletonItem,
 } from './model';
 import {
   Project,
@@ -66,4 +67,5 @@ export {
   SimulatorHost,
   Config,
   SettingField,
+  SkeletonItem,
 };

packages/shell/src/model/editor-view.ts

@@ -10,7 +10,7 @@ export class EditorView {
   constructor(editorView: IViewContext) {
     this[editorViewSymbol] = editorView;
     this[pluginContextSymbol] = this[editorViewSymbol].innerPlugins._getLowCodePluginContext({
-      pluginName: '',
+      pluginName: editorView.editorWindow + editorView.viewName,
     });
   }
 

packages/shell/src/model/index.ts

@@ -20,3 +20,4 @@ export * from './plugin-instance';
 export * from './window';
 export * from './clipboard';
 export * from './editor-view';
+export * from './skeleton-item';

packages/shell/src/model/skeleton-item.ts

@@ -0,0 +1,31 @@
+import { skeletonItemSymbol } from '../symbols';
+import { IPublicModelSkeletonItem } from '@alilc/lowcode-types';
+import { Dock, IWidget, Panel, PanelDock, Stage, Widget } from '@alilc/lowcode-editor-skeleton';
+
+export class SkeletonItem implements IPublicModelSkeletonItem {
+  private [skeletonItemSymbol]: IWidget | Widget | Panel | Stage | Dock | PanelDock;
+
+  constructor(skeletonItem: IWidget | Widget | Panel | Stage | Dock | PanelDock) {
+    this[skeletonItemSymbol] = skeletonItem;
+  }
+
+  get name() {
+    return this[skeletonItemSymbol].name;
+  }
+
+  disable() {
+    this[skeletonItemSymbol].disable?.();
+  }
+
+  enable() {
+    this[skeletonItemSymbol].enable?.();
+  }
+
+  hide() {
+    this[skeletonItemSymbol].hide();
+  }
+
+  show() {
+    this[skeletonItemSymbol].show();
+  }
+}

packages/shell/src/symbols.ts

@@ -35,4 +35,5 @@ export const clipboardSymbol = Symbol('clipboard');
 export const configSymbol = Symbol('configSymbol');
 export const conditionGroupSymbol = Symbol('conditionGroup');
 export const editorViewSymbol = Symbol('editorView');
-export const pluginContextSymbol = Symbol('pluginContext');
+export const pluginContextSymbol = Symbol('pluginContext');
+export const skeletonItemSymbol = Symbol('skeletonItem');

packages/types/src/shell/api/skeleton.ts

@@ -1,3 +1,4 @@
+import { IPublicModelSkeletonItem } from '../model';
 import { IPublicTypeDisposable, IPublicTypeSkeletonConfig } from '../type';
 
 export interface IPublicApiSkeleton {
@@ -9,7 +10,7 @@ export interface IPublicApiSkeleton {
    * @param extraConfig
    * @returns
    */
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): any;
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IPublicModelSkeletonItem | undefined;
 
   /**
    * 移除一个面板实例

packages/types/src/shell/model/index.ts

@@ -31,3 +31,4 @@ export * from './resource';
 export * from './clipboard';
 export * from './setting-field';
 export * from './editor-view';
+export * from './skeleton-item';

packages/types/src/shell/model/skeleton-item.ts

@@ -0,0 +1,6 @@
+/**
+ * @since 1.1.7
+ */
+export interface IPublicModelSkeletonItem {
+
+}

packages/types/src/shell/type/widget-base-config.ts

@@ -25,7 +25,7 @@ export interface IPublicTypePanelDockConfig extends IPublicTypeWidgetBaseConfig
   props?: IPublicTypePanelDockProps;
 
   /** 面板 name, 当没有 props.title 时, 会使用 name 作为标题 */
-  name?: string;
+  name: string;
 }
 
 export interface IPublicTypePanelDockProps {

packages/workspace/src/context/view-context.ts

@@ -7,7 +7,9 @@ import { IEditorWindow } from '../window';
 import { getWebviewPlugin } from '../inner-plugins/webview';
 
 export interface IViewContext extends IBasicContext {
+  editorWindow: IEditorWindow;
 
+  viewName: string;
 }
 
 export class Context extends BasicContext implements IViewContext {

packages/workspace/src/window.ts

@@ -3,8 +3,7 @@ import { createModuleEventBus, IEventBus, makeObservable, obx } from '@alilc/low
 import { Context, IViewContext } from './context/view-context';
 import { IWorkspace } from './workspace';
 import { IResource } from './resource';
-import { IPublicTypeDisposable } from '../../types/es/shell/type/disposable';
-import { IPublicModelWindow } from '@alilc/lowcode-types';
+import { IPublicModelWindow, IPublicTypeDisposable } from '@alilc/lowcode-types';
 
 interface IWindowCOnfig {
   title: string | undefined;
@@ -158,6 +157,10 @@ export class EditorWindow implements IEditorWindow {
 
     if (!ignoreEmit) {
       this.emitter.emit('window.change.view.type', name);
+
+      if (this.id === this.workspace.window.id) {
+        this.workspace.emitChangeActiveEditorView();
+      }
     }
     this.editorView.setActivate(true);
   };

packages/workspace/src/workspace.ts

@@ -13,6 +13,8 @@ enum EVENT {
   CHANGE_ACTIVE_WINDOW = 'change_active_window',
 
   WINDOW_RENDER_READY = 'window_render_ready',
+
+  CHANGE_ACTIVE_EDITOR_VIEW = 'change_active_editor_view',
 }
 
 const CHANGE_EVENT = 'resource.list.change';
@@ -42,6 +44,10 @@ export interface IWorkspace extends Omit<IPublicApiWorkspace<
   initWindow(): void;
 
   setActive(active: boolean): void;
+
+  onChangeActiveEditorView(fn: () => void): IPublicTypeDisposable;
+
+  emitChangeActiveEditorView(): void;
 }
 
 export class Workspace implements IWorkspace {
@@ -258,12 +264,24 @@ export class Workspace implements IWorkspace {
     };
   }
 
+  onChangeActiveEditorView(fn: () => void) {
+    this.emitter.on(EVENT.CHANGE_ACTIVE_EDITOR_VIEW, fn);
+    return () => {
+      this.emitter.removeListener(EVENT.CHANGE_ACTIVE_EDITOR_VIEW, fn);
+    };
+  }
+
+  emitChangeActiveEditorView() {
+    this.emitter.emit(EVENT.CHANGE_ACTIVE_EDITOR_VIEW);
+  }
+
   emitChangeWindow() {
     this.emitter.emit(EVENT.CHANGE_WINDOW);
   }
 
   emitChangeActiveWindow() {
     this.emitter.emit(EVENT.CHANGE_ACTIVE_WINDOW);
+    this.emitChangeActiveEditorView();
   }
 
   onChangeActiveWindow(fn: () => void) {