chore: add env format for vite config

packages/designer/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeDesigner',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'designer',
     },

packages/editor-core/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeEditorCore',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'editorCore',
     },

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -138,8 +138,7 @@ export class SettingsPrimaryPane extends Component<
     return (
       <div className="lc-settings-navigator">
         {createIcon(this.main.componentMeta?.icon, {
-          className: 'lc-settings-navigator-icon',
-          class: 'lc-settings-navigator-icon',
+          className: 'lc-settings-navigator-icon'
         })}
         <Breadcrumb className="lc-settings-node-breadcrumb">{items}</Breadcrumb>
       </div>

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

@@ -161,13 +161,6 @@ export class PanelDock implements IWidget {
   showPanel() {
     this.panel?.setActive(true);
   }
-
-  /**
-   * @deprecated
-   */
-  onActiveChange(func: () => any) {
-    return this.panel?.onActiveChange(func);
-  }
 }
 
 export function isPanelDock(obj: any): obj is PanelDock {

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

@@ -234,37 +234,6 @@ export class Panel implements IWidget {
       return isPanelDock(item) && item.panelName === this.name;
     }) as any;
   }
-
-  /**
-   * @deprecated
-   */
-  getSupportedPositions() {
-    return ['default'];
-  }
-
-  /**
-   * @deprecated
-   */
-  getCurrentPosition() {
-    return 'default';
-  }
-
-  /**
-   * @deprecated
-   */
-  setPosition(/* position: string */) {
-    // noop
-  }
-
-  /**
-   * @deprecated
-   */
-  onActiveChange(fn: (flag: boolean) => void): () => void {
-    this.emitter.on('activechange', fn);
-    return () => {
-      this.emitter.removeListener('activechange', fn);
-    };
-  }
 }
 
 export function isPanel(obj: any): obj is Panel {

packages/editor-skeleton/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, type LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process'
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeEditorSkeleton',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'editorSkeleton',
     },

packages/engine/package.json

@@ -29,7 +29,6 @@
     "@alilc/lowcode-designer": "workspace:*",
     "@alilc/lowcode-editor-core": "workspace:*",
     "@alilc/lowcode-editor-skeleton": "workspace:*",
-    "@alilc/lowcode-engine-ext": "^1.0.0",
     "@alilc/lowcode-plugin-command": "workspace:*",
     "@alilc/lowcode-plugin-designer": "workspace:*",
     "@alilc/lowcode-plugin-outline-pane": "workspace:*",

packages/engine/src/engine-core.ts

@@ -1,7 +1,5 @@
-/* eslint-disable max-len */
-/* eslint-disable no-param-reassign */
 import { createElement } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, type Root } from 'react-dom/client';
 import {
   globalContext,
   Editor,
@@ -210,13 +208,14 @@ engineConfig.set('isOpenSource', isOpenSource);
 
 // container which will host LowCodeEngine DOM
 let engineContainer: HTMLElement;
-// @ts-ignore webpack Define variable
 
 export { version }
 engineConfig.set('ENGINE_VERSION', version);
 
 const pluginPromise = registryInnerPlugin(designer, editor, plugins);
 
+let root: Root | undefined;
+
 export async function init(
   container?: HTMLElement,
   options?: IPublicTypeEngineOptions,
@@ -244,15 +243,19 @@ export async function init(
   if (options && options.enableWorkspaceMode) {
     const disposeFun = await pluginPromise;
     disposeFun && disposeFun();
-    render(
-      createElement(WorkSpaceWorkbench, {
+
+    if (!root) {
+      root = createRoot(
+        engineContainer,
+      );
+      root.render(createElement(WorkSpaceWorkbench, {
         workspace: innerWorkspace,
         // skeleton: workspace.skeleton,
         className: 'engine-main',
         topAreaItemClassName: 'engine-actionitem',
-      }),
-      engineContainer,
-    );
+      }))
+    }
+
     innerWorkspace.enableAutoOpenFirstWindow = engineConfig.get('enableAutoOpenFirstWindow', true);
     innerWorkspace.setActive(true);
     innerWorkspace.initWindow();
@@ -263,14 +266,14 @@ export async function init(
 
   await plugins.init(pluginPreference as any);
 
-  render(
-    createElement(Workbench, {
+  if (!root) {
+    root = createRoot(engineContainer)
+    root.render(createElement(Workbench, {
       skeleton: innerSkeleton,
       className: 'engine-main',
       topAreaItemClassName: 'engine-actionitem',
-    }),
-    engineContainer,
-  );
+    }))
+  }
 }
 
 export async function destroy() {
@@ -284,5 +287,5 @@ export async function destroy() {
 
   // unmount DOM container, this will trigger React componentWillUnmount lifeCycle,
   // so necessary cleanups will be done.
-  engineContainer && unmountComponentAtNode(engineContainer);
+  root && root.unmount();
 }

packages/engine/src/inner-plugins/setter-registry.ts

@@ -6,10 +6,11 @@ export const setterRegistry = (ctx: IPublicModelPluginContext) => {
     init() {
       const { config } = ctx;
       if (config.get('disableDefaultSetters')) return;
-      const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
-      if (builtinSetters) {
-        ctx.setters.registerSetter(builtinSetters);
-      }
+      // todo: 互相依赖
+      // const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
+      // if (builtinSetters) {
+      //   ctx.setters.registerSetter(builtinSetters);
+      // }
     },
   };
 };

packages/engine/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'AliLowCodeEngine',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'engine',
     },
@@ -22,6 +24,7 @@ export default defineConfig({
         globals: {
           react: 'React',
           'react-dom': 'ReactDOM',
+          '@alifd/next': 'Next'
         },
       },
     },

packages/plugin-command/vite.config.ts

@@ -1,5 +1,8 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
+
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -7,7 +10,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodePluginCommand',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-command',
     },

packages/plugin-designer/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.tsx'),
       name: 'LowCodePluginDesigner',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-designer',
     },

packages/plugin-outline-pane/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.tsx'),
       name: 'LowCodePluginOutlinePane',
-      formats: ['es', 'cjs'],
+      formats,
       // the proper extensions will be added
       fileName: 'plugin-outline-pane',
     },

packages/react-renderer/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs', 'iife']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeReactRenderer',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'reactRenderer',
     },

packages/react-simulator-renderer/vite.config.ts

@@ -1,9 +1,11 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(devDependencies), ...Object.keys(peerDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs', 'iife']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -11,7 +13,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeSimulatorReactRenderer',
-      formats: ['es', 'cjs', 'iife'],
+      formats,
       // the proper extensions will be added
       fileName: 'SimulatorReactRenderer',
     },

packages/renderer-core/vite.config.ts

@@ -1,13 +1,16 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
+
 export default defineConfig({
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeRendererCore',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'rendererCore',
     },

packages/renderer-router/vite.config.ts

@@ -1,8 +1,10 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
+import { env } from 'node:process';
 import { resolve } from 'node:path';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es', 'cjs']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -10,7 +12,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeRuntimeRouter',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'runtimeRouter',
     },

packages/types/vite.config.ts

@@ -1,5 +1,8 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
+import { env } from 'node:process';
+
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
@@ -7,7 +10,7 @@ export default defineConfig({
       // Could also be a dictionary or array of multiple entry points
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowcodeTypes',
-      formats: ['es'],
+      formats,
       // the proper extensions will be added
       fileName: 'lowcodeTypes',
     },

packages/utils/src/create-icon.tsx

@@ -20,7 +20,7 @@ export function createIcon(
     if (URL_RE.test(icon)) {
       return createElement('img', {
         src: icon,
-        class: props?.className,
+        className: props?.className,
         ...props,
       });
     }
@@ -31,7 +31,7 @@ export function createIcon(
   }
   if (isReactComponent(icon)) {
     return createElement(icon, {
-      class: props?.className,
+      className: props?.className,
       ...props,
     });
   }

packages/utils/vite.config.ts

@@ -1,17 +1,18 @@
-import { defineConfig } from 'vite';
+import { defineConfig, LibraryFormats } from 'vite';
 import { resolve } from 'node:path';
-import dts from 'vite-plugin-dts';
+import { env } from 'node:process';
 import react from '@vitejs/plugin-react';
 import { devDependencies, peerDependencies } from './package.json';
 
 const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+const formats = (env['FORMATS']?.split(',') ?? ['es']) as LibraryFormats[];
 
 export default defineConfig({
   build: {
     lib: {
       entry: resolve(import.meta.dirname, 'src/index.ts'),
       name: 'LowCodeUtils',
-      formats: ['es'],
+      formats,
       fileName: 'lowCodeUtils',
     },
     rollupOptions: {
@@ -20,13 +21,5 @@ export default defineConfig({
   },
   plugins: [
     react(),
-    dts({
-      rollupTypes: true,
-      tsconfigPath: resolve(import.meta.dirname, 'tsconfig.declaration.json'),
-      compilerOptions: {
-        stripInternal: true,
-        paths: {},
-      },
-    }),
   ],
 });

playground/engine/src/index.css

@@ -0,0 +1,30 @@
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
+  font-size: 12px;
+}
+body * {
+  box-sizing: border-box;
+}
+
+body, #lce-container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  text-rendering: optimizeLegibility;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-text-size-adjust: none;
+  -webkit-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+#engine {
+  width: 100%;
+  height: 100%;
+}

playground/engine/src/index.ts

@@ -0,0 +1,12 @@
+import { init } from '@alilc/lowcode-engine';
+
+import './index.css';
+
+init(document.getElementById('app')!, {
+  locale: 'zh-CN',
+  enableCondition: true,
+  enableCanvasLock: true,
+  // 默认绑定变量
+  supportVariableGlobally: true,
+  requestHandlersMap: {},
+});

playground/package.json

@@ -2,7 +2,11 @@
   "name": "playground",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite"
+  },
+  "dependencies": {
+    "@alilc/lowcode-engine": "workspace:*"
   }
 }

playground/renderer/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./src/index.ts"></script>
+</body>
+</html>

playground/tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "paths": {
-      "@alilc/renderer-react": ["runtime/renderer-react"]
-    }
+    "outDir": "dist",
   }
 }

playground/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'node:path'
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        engine: resolve(import.meta.dirname, 'engine/index.html'),
+        renderer: resolve(import.meta.dirname, 'renderer/index.html')
+      }
+    }
+  }
+})