chore: add env format for vite config

Author: 1ncounter

packages/designer/vite.config.ts

@@ -1,17 +1,19 @@
-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: {
     lib: {
       // 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,17 +1,19 @@
-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: {
     lib: {
       // 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,17 +1,19 @@
-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: {
     lib: {
       // 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,17 +1,19 @@
-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: {
     lib: {
       // 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'
         },
       },
     },