chore: setup playground

eslint.config.js

@@ -6,7 +6,7 @@ import reactHooks from 'eslint-plugin-react-hooks';
 import globals from 'globals';
 
 export default tseslint.config({
-  files: ['packages/*/{src,__tests__}/**/*.{ts?(x),js?(x)}'],
+  files: ['packages/*/{src,__tests__}/**/*.{ts?(x),js?(x)}', 'scripts/*.js'],
   ignores: ['**/*.test.ts'],
   extends: [js.configs.recommended, ...tseslint.configs.recommended],
   plugins: {
@@ -32,13 +32,15 @@ export default tseslint.config({
     '@stylistic/max-len': ['error', { code: 100, tabWidth: 2, ignoreStrings: true, ignoreComments: true }],
     '@stylistic/no-tabs': 'error',
     '@stylistic/quotes': ['error', 'single'],
+    '@stylistic/quote-props': ['error', 'as-needed'],
     '@stylistic/jsx-pascal-case': [2],
     '@stylistic/jsx-indent': [2, 2, { checkAttributes: true, indentLogicalExpressions: true }],
     '@stylistic/semi': ['error', 'always'],
     '@stylistic/eol-last': ['error', 'always'],
     '@stylistic/jsx-quotes': ['error', 'prefer-double'],
 
-    "@typescript-eslint/ban-ts-comment": ["error", { 'ts-expect-error': 'allow-with-description' }],
+    '@typescript-eslint/ban-ts-comment': ["error", { 'ts-expect-error': 'allow-with-description' }],
+    '@typescript-eslint/no-explicit-any': 'warn',
 
     'react/jsx-no-undef': 'error',
     'react/jsx-uses-vars': 'error',

packages/designer/package.json

@@ -12,9 +12,9 @@
       "require": "./dist/low-code-designer.cjs",
       "types": "./dist/index.d.ts"
     },
-    "./dist/": {
-      "import": "./dist/",
-      "require": "./dist/"
+    "./dist/style.css": {
+      "import": "./dist/style.css",
+      "require": "./dist/style.css"
     }
   },
   "files": [
@@ -54,6 +54,9 @@
   },
   "peerDependencies": {
     "@alifd/next": "^1.27.8",
+    "@alilc/lowcode-editor-core": "workspace:*",
+    "@alilc/lowcode-types": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/designer/src/document/document-view.tsx

@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import classNames from 'classnames';
 import { observer } from '@alilc/lowcode-editor-core';
-import { DocumentModel, IDocumentModel } from './document-model';
+import { IDocumentModel } from './document-model';
 import { BuiltinSimulatorHostView } from '../builtin-simulator';
 
 @observer

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

@@ -118,7 +118,6 @@ export class LowCodePluginManager implements ILowCodePluginManager {
     );
     const config = newPluginModel(ctx, newOptions);
     // compat the legacy way to declare pluginName
-    // @ts-ignore
     pluginName = pluginName || config.name;
     invariant(pluginName, 'pluginConfigCreator.pluginName required', config);
 

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

@@ -84,7 +84,9 @@ export interface ILowCodePluginManagerCore {
     pluginOptions?: any,
     options?: IPublicTypePluginRegisterOptions,
   ): Promise<void>;
-  init(pluginPreference?: Map<string, Record<string, IPublicTypePreferenceValueType>>): Promise<void>;
+  init(
+    pluginPreference?: Map<string, Record<string, IPublicTypePreferenceValueType>>
+  ): Promise<void>;
   get(pluginName: string): ILowCodePluginRuntime | undefined;
   getAll(): ILowCodePluginRuntime[];
   has(pluginName: string): boolean;

packages/designer/src/project/project.ts

@@ -319,7 +319,9 @@ export class Project implements IProject {
       return doc.open();
     }
     if (typeof doc === 'string' || typeof doc === 'number') {
-      const got = this.documents.find((item) => item.fileName === String(doc) || String(item.id) === String(doc));
+      const got = this.documents.find(
+        (item) => item.fileName === String(doc) || String(item.id) === String(doc)
+      );
       if (got) {
         return got.open();
       }

packages/designer/src/simulator.ts

@@ -164,13 +164,19 @@ export interface ISimulatorHost<P = object> extends IPublicModelSensor<INode> {
    */
   getComponentContext(node: INode): object | null;
 
-  getClosestNodeInstance(from: IPublicTypeComponentInstance, specId?: string): IPublicTypeNodeInstance | null;
+  getClosestNodeInstance(
+    from: IPublicTypeComponentInstance, specId?: string
+  ): IPublicTypeNodeInstance | null;
 
   computeRect(node: INode): DOMRect | null;
 
-  computeComponentInstanceRect(instance: IPublicTypeComponentInstance, selector?: string): DOMRect | null;
+  computeComponentInstanceRect(
+    instance: IPublicTypeComponentInstance, selector?: string
+  ): DOMRect | null;
 
-  findDOMNodes(instance: IPublicTypeComponentInstance, selector?: string): Array<Element | Text> | null;
+  findDOMNodes(
+    instance: IPublicTypeComponentInstance, selector?: string
+  ): Array<Element | Text> | null;
 
   getDropContainer(e: ILocateEvent): DropContainer | null;
 

packages/editor-core/package.json

@@ -57,6 +57,8 @@
   },
   "peerDependencies": {
     "@alifd/next": "^1.27.8",
+    "@alilc/lowcode-types": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/editor-skeleton/package.json

@@ -53,6 +53,10 @@
   },
   "peerDependencies": {
     "@alifd/next": "^1.27.8",
+    "@alilc/lowcode-designer": "workspace:*",
+    "@alilc/lowcode-editor-core": "workspace:*",
+    "@alilc/lowcode-types": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/editor-skeleton/src/layouts/top-area.tsx

@@ -4,7 +4,9 @@ import { observer } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 
 @observer
-export default class TopArea extends Component<{ area: Area; itemClassName?: string; className?: string }> {
+export default class TopArea extends Component<
+  { area: Area; itemClassName?: string; className?: string }
+> {
   render() {
     const { area, itemClassName, className } = this.props;
     if (area.isEmpty()) {
@@ -13,8 +15,7 @@ export default class TopArea extends Component<{ area: Area; itemClassName?: str
     return (
       <div className={classNames(className, 'lc-top-area engine-actionpane', {
         'lc-area-visible': area.visible,
-      })}
-      >
+      })}>
         <Contents area={area} itemClassName={itemClassName} />
       </div>
     );

packages/editor-skeleton/src/layouts/workbench.tsx

@@ -10,10 +10,11 @@ import Toolbar from './toolbar';
 import MainArea from './main-area';
 import BottomArea from './bottom-area';
 import RightArea from './right-area';
-import './workbench.less';
 import { SkeletonContext } from '../context';
 import { EditorConfig, PluginClassSet } from '@alilc/lowcode-types';
 
+import './workbench.less';
+
 @observer
 export class Workbench extends Component<{
   skeleton: ISkeleton;

packages/engine/src/engine-core.ts

@@ -66,7 +66,9 @@ import { CommandPlugin } from '@alilc/lowcode-plugin-command';
 import { OutlinePlugin } from '@alilc/lowcode-plugin-outline-pane';
 import { version } from '../package.json';
 
+import '@alilc/lowcode-plugin-outline-pane/dist/style.css';
 import '@alilc/lowcode-editor-skeleton/dist/style.css';
+import '@alilc/lowcode-designer/dist/style.css';
 
 export * from './modules/skeleton-types';
 export * from './modules/designer-types';
@@ -115,10 +117,10 @@ globalContext.register(innerWorkspace, 'workspace');
 const engineContext: Partial<ILowCodePluginContextPrivate> = {};
 
 const innerSkeleton = new InnerSkeleton(editor);
-editor.set('skeleton' as any, innerSkeleton);
+editor.set('skeleton', innerSkeleton);
 
 const designer = new Designer({ editor, shellModelFactory });
-editor.set('designer' as any, designer);
+editor.set('designer', designer);
 
 const { project: innerProject } = designer;
 
@@ -137,7 +139,7 @@ const material = new Material(editor);
 const commonUI = new CommonUI(editor);
 
 editor.set('project', project);
-editor.set('setters' as any, setters);
+editor.set('setters', setters);
 editor.set('material', material);
 editor.set('innerHotkey', innerHotkey);
 
@@ -290,6 +292,7 @@ export async function init(
     return;
   }
 
+  await pluginPromise;
   await plugins.init(pluginPreference as any);
 
   if (!root) {

packages/engine/src/inner-plugins/default-panel-registry.tsx

@@ -2,6 +2,8 @@ import { IPublicModelPluginContext } from '@alilc/lowcode-types';
 import { SettingsPrimaryPane } from '@alilc/lowcode-editor-skeleton';
 import DesignerPlugin from '@alilc/lowcode-plugin-designer';
 
+import '@alilc/lowcode-plugin-designer/dist/style.css';
+
 // 注册默认的面板
 export const defaultPanelRegistry = (editor: any) => {
   const fun = (ctx: IPublicModelPluginContext) => {

packages/engine/src/shell/api/common.tsx

@@ -417,9 +417,9 @@ class EditorCabin implements IPublicApiCommonEditorCabin {
 }
 
 export class Common implements IPublicApiCommon {
-  private readonly __designerCabin: any;
-  private readonly __skeletonCabin: any;
-  private readonly __editorCabin: any;
+  private readonly __designerCabin: DesignerCabin;
+  private readonly __skeletonCabin: SkeletonCabin;
+  private readonly __editorCabin: EditorCabin;
   private readonly __utils: Utils;
 
   constructor(editor: Editor, skeleton: InnerSkeleton) {
@@ -438,7 +438,7 @@ export class Common implements IPublicApiCommon {
    * this load of crap will be removed in some future versions, don`t use it.
    * @deprecated
    */
-  get editorCabin(): any {
+  get editorCabin(): EditorCabin {
     return this.__editorCabin;
   }
 
@@ -447,11 +447,11 @@ export class Common implements IPublicApiCommon {
    * this load of crap will be removed in some future versions, don`t use it.
    * @deprecated use canvas api instead
    */
-  get designerCabin(): any {
+  get designerCabin(): DesignerCabin {
     return this.__designerCabin;
   }
 
-  get skeletonCabin(): any {
+  get skeletonCabin(): SkeletonCabin {
     return this.__skeletonCabin;
   }
 
@@ -460,7 +460,7 @@ export class Common implements IPublicApiCommon {
    * this load of crap will be removed in some future versions, don`t use it.
    * @deprecated use { TransformStage } from '@alilc/lowcode-types' instead
    */
-  get objects(): any {
+  get objects() {
     return {
       TransformStage: InnerTransitionStage,
     };

packages/engine/src/workspace/layouts/workbench.tsx

@@ -67,14 +67,15 @@ export class Workbench extends Component<{
                   }
 
                   {
-                    !workspace.windows.length && WorkspaceEmptyComponent ? <WorkspaceEmptyComponent /> : null
+                    workspace.windows.length === 0 && WorkspaceEmptyComponent
+                      ? <WorkspaceEmptyComponent />
+                      : null
                   }
                 </div>
               </div>
               <MainArea area={skeleton.mainArea} />
               <BottomArea area={skeleton.bottomArea} />
             </div>
-            {/* <RightArea area={skeleton.rightArea} /> */}
           </div>
           <TipContainer />
         </SkeletonContext.Provider>

packages/plugin-command/package.json

@@ -6,6 +6,7 @@
   "homepage": "https://github.com/alibaba/lowcode-engine#readme",
   "license": "ISC",
   "type": "module",
+  "private": true,
   "main": "dist/low-code-plugin-command.cjs",
   "module": "dist/low-code-plugin-command.js",
   "types": "dist/index.d.ts",
@@ -39,6 +40,7 @@
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
+    "@alilc/lowcode-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/plugin-designer/package.json

@@ -2,6 +2,7 @@
   "name": "@alilc/lowcode-plugin-designer",
   "version": "2.0.0-beta.0",
   "description": "alibaba lowcode editor designer plugin",
+  "private": true,
   "type": "module",
   "main": "dist/low-code-plugin-designer.cjs",
   "module": "dist/low-code-plugin-designer.js",
@@ -11,6 +12,10 @@
       "import": "./dist/low-code-plugin-designer.js",
       "require": "./dist/low-code-plugin-designer.cjs",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
     }
   },
   "files": [
@@ -41,7 +46,10 @@
   },
   "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "@alilc/lowcode-designer": "workspace:*",
+    "@alilc/lowcode-editor-core": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*"
   },
   "publishConfig": {
     "access": "public",

packages/plugin-outline-pane/package.json

@@ -2,6 +2,7 @@
   "name": "@alilc/lowcode-plugin-outline-pane",
   "version": "1.3.2",
   "description": "Outline pane for Ali lowCode engine",
+  "private": true,
   "type": "module",
   "main": "dist/low-code-plugin-outline-pane.cjs",
   "module": "dist/low-code-plugin-outline-pane.js",
@@ -11,6 +12,10 @@
       "import": "./dist/low-code-plugin-outline-pane.js",
       "require": "./dist/low-code-plugin-outline-pane.cjs",
       "types": "./dist/index.d.ts"
+    },
+    "./dist/": {
+      "import": "./dist/",
+      "require": "./dist/"
     }
   },
   "files": [
@@ -39,6 +44,8 @@
   },
   "peerDependencies": {
     "@alifd/next": "^1.27.8",
+    "@alilc/lowcode-types": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

playground/engine/src/index.ts

@@ -1,10 +1,15 @@
-import { init, plugins } from '@alilc/lowcode-engine';
+import * as engine from '@alilc/lowcode-engine';
 import EditorInitPlugin from './plugins/plugin-editor-init';
+import LogoSamplePlugin from './plugins/plugin-logo-sample';
 
 import '@alilc/lowcode-engine/dist/style.css';
 import './index.css';
 
+(window as any).AliLowCodeEngine = engine;
+
 async function run() {
+  const { plugins, init, project, skeleton, config } = engine;
+
   await plugins.register(EditorInitPlugin, {
     scenarioName: 'general',
     displayName: '综合场景',
@@ -25,6 +30,7 @@ async function run() {
       ],
     },
   });
+  await plugins.register(LogoSamplePlugin);
 
   await init(document.getElementById('app')!, {
     locale: 'zh-CN',
@@ -38,7 +44,10 @@ async function run() {
       'https://alifd.alicdn.com/npm/@alilc/[email protected]/dist/js/react-simulator-renderer.js'
     ],
     enableContextMenu: true,
+    enableWorkspaceMode: false
   });
+
+  console.log(project, skeleton, plugins, config)
 }
 
 run()