build: change runtime build tools

2025-12-11 18:42:56 +00:00 · 2024-03-25 17:58:47 +08:00 · 2024-03-25 17:58:47 +08:00 · ea96be3356
commit ea96be3356
parent 62c535bf2a
44 changed files with 543 additions and 293 deletions
--- a/TODOS.md
+++ b/TODOS.md
@ -6,6 +6,7 @@
 2. develop
 3. debug
 4. build
+   target module mode: ESM/UMD
 5. test
 6. publish
 7. github workflows
--- a/package.json
+++ b/package.json
@ -36,6 +36,7 @@
    "@changesets/cli": "^2.27.1",
    "@types/node": "^20.11.30",
    "@types/react-router": "5.1.18",
+    "@vitejs/plugin-react": "^4.2.1",
    "babel-jest": "^26.5.2",
    "del": "^6.1.1",
    "execa": "^8.0.1",
@ -47,7 +48,8 @@
    "rimraf": "^5.0.2",
    "rollup": "^4.13.0",
    "vite": "^5.1.6",
-    "vitest": "^1.3.1"
+    "vitest": "^1.3.1",
+    "vite-plugin-dts": "^3.7.3"
  },
  "engines": {
    "node": ">=18"
--- a/packages/designer/package.json
+++ b/packages/designer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@alilc/lowcode-designer",
-  "version": "1.3.2",
+  "version": "2.0.0-beta.0",
  "description": "Designer for Ali LowCode Engine",
  "main": "lib/index.js",
  "module": "es/index.js",
--- a/packages/editor-core/build.json
+++ b/packages/editor-core/build.json
@ -1,7 +0,0 @@
-{
-  "plugins": [
-    "@alilc/build-plugin-lce",
-    "build-plugin-fusion",
-    "./build.plugin.js"
-  ]
-}
--- a/packages/editor-core/build.plugin.js
+++ b/packages/editor-core/build.plugin.js
@ -1,11 +0,0 @@
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-
-module.exports = ({ onGetWebpackConfig }) => {
-  onGetWebpackConfig((config) => {
-    config.resolve
-      .plugin('tsconfigpaths')
-      .use(TsconfigPathsPlugin, [{
-        configFile: './tsconfig.json',
-      }]);
-  });
-};
--- a/packages/editor-core/build.test.json
+++ b/packages/editor-core/build.test.json
@ -1,9 +0,0 @@
-{
-  "plugins": [
-    "@alilc/build-plugin-lce",
-    "@alilc/lowcode-test-mate/plugin/index.ts"
-  ],
-  "babelPlugins": [
-    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }]
-  ]
-}
--- a/packages/editor-core/jest.config.js
+++ b/packages/editor-core/jest.config.js
@ -1,26 +0,0 @@
-const fs = require('fs');
-const { join } = require('path');
-const esModules = [].join('|');
-const pkgNames = fs.readdirSync(join('..')).filter(pkgName => !pkgName.startsWith('.'));
-
-const jestConfig = {
-  transformIgnorePatterns: [
-    `/node_modules/(?!${esModules})/`,
-  ],
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
-  collectCoverage: false,
-  collectCoverageFrom: [
-    'src/**/*.ts',
-    '!src/**/*.d.ts',
-    '!src/icons/**',
-    '!src/locale/**',
-    '!**/node_modules/**',
-    '!**/vendor/**',
-  ],
-};
-
-// 只对本仓库内的 pkg 做 mapping
-jestConfig.moduleNameMapper = {};
-jestConfig.moduleNameMapper[`^@alilc/lowcode\\-(${pkgNames.join('|')})$`] = '<rootDir>/../$1/src';
-
-module.exports = jestConfig;
--- a/packages/editor-core/package.json
+++ b/packages/editor-core/package.json
@ -1,45 +1,46 @@
 {
  "name": "@alilc/lowcode-editor-core",
-  "version": "1.3.2",
+  "version": "2.0.0-beta.0",
  "description": "Core Api for Ali lowCode engine",
  "license": "MIT",
-  "main": "lib/index.js",
-  "module": "es/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
  "files": [
    "lib",
    "es"
  ],
  "scripts": {
-    "build": "build-scripts build",
+    "build": "tsc",
    "test": "build-scripts test --config build.test.json",
    "test:cov": "build-scripts test --config build.test.json --jest-coverage"
  },
  "dependencies": {
-    "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-types": "1.3.2",
-    "@alilc/lowcode-utils": "1.3.2",
-    "classnames": "^2.2.6",
-    "debug": "^4.1.1",
-    "intl-messageformat": "^9.3.1",
-    "lodash.get": "^4.4.2",
-    "mobx": "^6.3.0",
-    "mobx-react": "^7.2.0",
-    "power-di": "^2.2.4",
-    "react": "^16",
-    "react-dom": "^16.7.0",
-    "store": "^2.0.12"
+    "@alifd/next": "^1.27.8",
+    "@alilc/lowcode-types": "workspace:*",
+    "@alilc/lowcode-utils": "workspace:*",
+    "classnames": "^2.5.1",
+    "intl-messageformat": "^10.5.1",
+    "lodash-es": "^4.17.21",
+    "mobx": "^6.12.0",
+    "mobx-react": "^9.1.0",
+    "power-di": "^2.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "store": "^2.0.12",
+    "strict-event-emitter-types": "^2.0.0"
  },
  "devDependencies": {
-    "@alib/build-scripts": "^0.1.18",
    "@alilc/lowcode-datasource-types": "^1.0.1",
-    "@types/classnames": "^2.2.7",
-    "@types/lodash.get": "^4.4.6",
-    "@types/node": "^13.7.1",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
-    "@types/store": "^2.0.2",
-    "build-plugin-fusion": "^0.1.0",
-    "build-plugin-moment-locales": "^0.1.0"
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/store": "^2.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
  },
  "publishConfig": {
    "access": "public",
--- a/packages/editor-core/src/config.ts
+++ b/packages/editor-core/src/config.ts
@ -1,4 +1,4 @@
-import { get as lodashGet } from 'lodash';
+import { get as lodashGet } from 'lodash-es';
 import { isPlainObject } from '@alilc/lowcode-utils';
 import {
  IPublicTypeEngineOptions,
@ -55,7 +55,8 @@ const VALID_ENGINE_OPTIONS = {
  enableStrictPluginMode: {
    type: 'boolean',
    default: STRICT_PLUGIN_MODE_DEFAULT,
-    description: '开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项',
+    description:
+      '开启严格插件模式，默认值：STRICT_PLUGIN_MODE_DEFAULT , 严格模式下，插件将无法通过 engineOptions 传递自定义配置项',
  },
  enableReactiveContainer: {
    type: 'boolean',
@ -75,7 +76,8 @@ const VALID_ENGINE_OPTIONS = {
  customizeIgnoreSelectors: {
    type: 'function',
    default: undefined,
-    description: '定制画布中点击被忽略的 selectors, eg. (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]',
+    description:
+      '定制画布中点击被忽略的 selectors, eg. (defaultIgnoreSelectors: string[], e: MouseEvent) => string[]',
  },
  disableDefaultSettingPanel: {
    type: 'boolean',
@ -171,19 +173,23 @@ const VALID_ENGINE_OPTIONS = {
  },
 };

-const getStrictModeValue = (engineOptions: IPublicTypeEngineOptions, defaultValue: boolean): boolean => {
+const getStrictModeValue = (
+  engineOptions: IPublicTypeEngineOptions,
+  defaultValue: boolean,
+): boolean => {
  if (!engineOptions || !isPlainObject(engineOptions)) {
    return defaultValue;
  }
-  if (engineOptions.enableStrictPluginMode === undefined
-    || engineOptions.enableStrictPluginMode === null) {
+  if (
+    engineOptions.enableStrictPluginMode === undefined ||
+    engineOptions.enableStrictPluginMode === null
+  ) {
    return defaultValue;
  }
  return engineOptions.enableStrictPluginMode;
 };

 export interface IEngineConfig extends IPublicModelEngineConfig {
-
  /**
   * if engineOptions.strictPluginMode === true, only accept propertied predefined in EngineOptions.
   *
@ -202,11 +208,11 @@ export class EngineConfig implements IEngineConfig {
  private config: { [key: string]: any } = {};

  private waits = new Map<
-  string,
-  Array<{
-    once?: boolean;
-    resolve: (data: any) => void;
-  }>
+    string,
+    Array<{
+      once?: boolean;
+      resolve: (data: any) => void;
+    }>
  >();

  /**
@ -278,7 +284,10 @@ export class EngineConfig implements IEngineConfig {
        if (isValidKey(key)) {
          this.set(key, (engineOptions as any)[key]);
        } else {
-          logger.warn(`failed to config ${key} to engineConfig, only predefined options can be set under strict mode, predefined options: `, VALID_ENGINE_OPTIONS);
+          logger.warn(
+            `failed to config ${key} to engineConfig, only predefined options can be set under strict mode, predefined options: `,
+            VALID_ENGINE_OPTIONS,
+          );
        }
      });
    } else {
--- a/packages/editor-core/src/editor.ts
+++ b/packages/editor-core/src/editor.ts
@ -68,7 +68,6 @@ export interface IEditor extends IPublicModelEditor {

 // eslint-disable-next-line no-redeclare
 export class Editor extends EventEmitter implements IEditor {
-
  /**
   * Ioc Container
   */
@ -96,7 +95,10 @@ export class Editor extends EventEmitter implements IEditor {
    }>
  >();

-  constructor(readonly viewName: string = 'global', readonly workspaceMode: boolean = false) {
+  constructor(
+    readonly viewName: string = 'global',
+    readonly workspaceMode: boolean = false,
+  ) {
    // eslint-disable-next-line constructor-super
    super();
    // set global emitter maxListeners
@ -105,8 +107,8 @@ export class Editor extends EventEmitter implements IEditor {
  }

  get<T = undefined, KeyOrType = any>(
-      keyOrType: KeyOrType,
-    ): IPublicTypeEditorGetResult<T, KeyOrType> | undefined {
+    keyOrType: KeyOrType,
+  ): IPublicTypeEditorGetResult<T, KeyOrType> | undefined {
    return this.context.get(keyOrType as any);
  }

@ -147,59 +149,75 @@ export class Editor extends EventEmitter implements IEditor {
      // 如果有远程组件描述协议，则自动加载并补充到资产包中，同时出发 designer.incrementalAssetsReady 通知组件面板更新数据
      if (remoteComponentDescriptions && remoteComponentDescriptions.length) {
        await Promise.all(
-          remoteComponentDescriptions.map(async (component: IPublicTypeRemoteComponentDescription) => {
-            const { exportName, url, npm } = component;
-            if (!url || !exportName) {
-              return;
-            }
-            if (!AssetsCache[exportName] || !npm?.version || AssetsCache[exportName].npm?.version !== npm?.version) {
-              await (new AssetLoader()).load(url);
-            }
-            AssetsCache[exportName] = component;
-            function setAssetsComponent(component: any, extraNpmInfo: any = {}) {
-              const components = component.components;
-              assets.componentList = assets.componentList?.concat(component.componentList || []);
-              if (Array.isArray(components)) {
-                components.forEach(d => {
-                  assets.components = assets.components.concat({
-                    npm: {
-                      ...npm,
-                      ...extraNpmInfo,
-                    },
-                    ...d,
-                  } || []);
-                });
+          remoteComponentDescriptions.map(
+            async (component: IPublicTypeRemoteComponentDescription) => {
+              const { exportName, url, npm } = component;
+              if (!url || !exportName) {
                return;
              }
-              if (component.components) {
-                assets.components = assets.components.concat({
-                  npm: {
-                    ...npm,
-                    ...extraNpmInfo,
-                  },
-                  ...component.components,
-                } || []);
+              if (
+                !AssetsCache[exportName] ||
+                !npm?.version ||
+                AssetsCache[exportName].npm?.version !== npm?.version
+              ) {
+                await new AssetLoader().load(url);
              }
-            }
-            function setArrayAssets(value: any[], preExportName: string = '', preSubName: string = '') {
-              value.forEach((d: any, i: number) => {
-                const exportName = [preExportName, i.toString()].filter(d => !!d).join('.');
-                const subName = [preSubName, i.toString()].filter(d => !!d).join('.');
-                Array.isArray(d) ? setArrayAssets(d, exportName, subName) : setAssetsComponent(d, {
-                  exportName,
-                  subName,
+              AssetsCache[exportName] = component;
+              function setAssetsComponent(component: any, extraNpmInfo: any = {}) {
+                const components = component.components;
+                assets.componentList = assets.componentList?.concat(component.componentList || []);
+                if (Array.isArray(components)) {
+                  components.forEach((d) => {
+                    assets.components = assets.components.concat(
+                      {
+                        npm: {
+                          ...npm,
+                          ...extraNpmInfo,
+                        },
+                        ...d,
+                      } || [],
+                    );
+                  });
+                  return;
+                }
+                if (component.components) {
+                  assets.components = assets.components.concat(
+                    {
+                      npm: {
+                        ...npm,
+                        ...extraNpmInfo,
+                      },
+                      ...component.components,
+                    } || [],
+                  );
+                }
+              }
+              function setArrayAssets(
+                value: any[],
+                preExportName: string = '',
+                preSubName: string = '',
+              ) {
+                value.forEach((d: any, i: number) => {
+                  const exportName = [preExportName, i.toString()].filter((d) => !!d).join('.');
+                  const subName = [preSubName, i.toString()].filter((d) => !!d).join('.');
+                  Array.isArray(d)
+                    ? setArrayAssets(d, exportName, subName)
+                    : setAssetsComponent(d, {
+                        exportName,
+                        subName,
+                      });
                });
-              });
-            }
-            if ((window as any)[exportName]) {
-              if (Array.isArray((window as any)[exportName])) {
-                setArrayAssets((window as any)[exportName] as any);
-              } else {
-                setAssetsComponent((window as any)[exportName] as any);
              }
-            }
-            return (window as any)[exportName];
-          }),
+              if ((window as any)[exportName]) {
+                if (Array.isArray((window as any)[exportName])) {
+                  setArrayAssets((window as any)[exportName] as any);
+                } else {
+                  setAssetsComponent((window as any)[exportName] as any);
+                }
+              }
+              return (window as any)[exportName];
+            },
+          ),
        );
      }
    }
@ -208,7 +226,9 @@ export class Editor extends EventEmitter implements IEditor {
    this.notifyGot('assets');
  }

-  onceGot<T = undefined, KeyOrType extends IPublicTypeEditorValueKey = any>(keyOrType: KeyOrType): Promise<IPublicTypeEditorGetResult<T, KeyOrType>> {
+  onceGot<T = undefined, KeyOrType extends IPublicTypeEditorValueKey = any>(
+    keyOrType: KeyOrType,
+  ): Promise<IPublicTypeEditorGetResult<T, KeyOrType>> {
    const x = this.context.get(keyOrType);
    if (x !== undefined) {
      return Promise.resolve(x);
@ -253,7 +273,7 @@ export class Editor extends EventEmitter implements IEditor {
    const { hooks = [], lifeCycles } = this.config;

    this.emit('editor.beforeInit');
-    const init = (lifeCycles && lifeCycles.init) || ((): void => { });
+    const init = (lifeCycles && lifeCycles.init) || ((): void => {});

    try {
      await init(this);
@ -298,7 +318,7 @@ export class Editor extends EventEmitter implements IEditor {
  registerHooks = (hooks: HookConfig[]) => {
    this.initHooks(hooks).forEach(({ message, type, handler }) => {
      if (['on', 'once'].indexOf(type) !== -1) {
-        this[type]((message as any), handler);
+        this[type](message as any, handler);
      }
    });
  };
--- a/packages/editor-core/src/hotkey.ts
+++ b/packages/editor-core/src/hotkey.ts
@ -1,6 +1,12 @@
-import { isEqual } from 'lodash';
+import { isEqual } from 'lodash-es';
 import { globalContext } from './di';
-import { IPublicTypeHotkeyCallback, IPublicTypeHotkeyCallbackConfig, IPublicTypeHotkeyCallbacks, IPublicApiHotkey, IPublicTypeDisposable } from '@alilc/lowcode-types';
+import {
+  IPublicTypeHotkeyCallback,
+  IPublicTypeHotkeyCallbackConfig,
+  IPublicTypeHotkeyCallbacks,
+  IPublicApiHotkey,
+  IPublicTypeDisposable,
+} from '@alilc/lowcode-types';

 interface KeyMap {
  [key: number]: string;
@ -110,7 +116,7 @@ let REVERSE_MAP: CtrlKeyMap;
 * programatically
 */
 for (let i = 1; i < 20; ++i) {
-  MAP[111 + i] = `f${ i}`;
+  MAP[111 + i] = `f${i}`;
 }

 /**
@ -314,7 +320,12 @@ function getKeyInfo(combination: string, action?: string): KeyInfo {
 * if your callback function returns false this will use the jquery
 * convention - prevent default and stop propogation on the event
 */
-function fireCallback(callback: IPublicTypeHotkeyCallback, e: KeyboardEvent, combo?: string, sequence?: string): void {
+function fireCallback(
+  callback: IPublicTypeHotkeyCallback,
+  e: KeyboardEvent,
+  combo?: string,
+  sequence?: string,
+): void {
  try {
    const workspace = globalContext.get('workspace');
    const editor = workspace.isActive ? workspace.window?.editor : globalContext.get('editor');
@ -322,7 +333,9 @@ function fireCallback(callback: IPublicTypeHotkeyCallback, e: KeyboardEvent, com
    const node = designer?.currentSelection?.getNodes()?.[0];
    const npm = node?.componentMeta?.npm;
    const selected =
-      [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';
+      [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
+      node?.componentMeta?.componentName ||
+      '';
    if (callback(e, combo) === false) {
      e.preventDefault();
      e.stopPropagation();
@ -335,12 +348,11 @@ function fireCallback(callback: IPublicTypeHotkeyCallback, e: KeyboardEvent, com
      selected,
    });
  } catch (err) {
-    console.error(err.message);
+    console.error((err as Error).message);
  }
 }

-export interface IHotKey extends Hotkey {
-}
+export interface IHotKey extends Hotkey {}

 export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
  callBacks: IPublicTypeHotkeyCallbacks = {};
@ -388,10 +400,10 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
  unbind(combos: string[] | string, callback: IPublicTypeHotkeyCallback, action?: string) {
    const combinations = Array.isArray(combos) ? combos : [combos];

-    combinations.forEach(combination => {
+    combinations.forEach((combination) => {
      const info: KeyInfo = getKeyInfo(combination, action);
      const { key, modifiers } = info;
-      const idx = this.callBacks[key].findIndex(info => {
+      const idx = this.callBacks[key].findIndex((info) => {
        return isEqual(info.modifiers, modifiers) && info.callback === callback;
      });
      if (idx !== -1) {
@ -470,9 +482,13 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
      // chrome will not fire a keypress if meta or control is down
      // safari will fire a keypress if meta or meta+shift is down
      // firefox will fire a keypress if meta or control is down
-      if ((isPressEvent(e) && !e.metaKey && !e.ctrlKey) || modifiersMatch(modifiers, callback.modifiers)) {
+      if (
+        (isPressEvent(e) && !e.metaKey && !e.ctrlKey) ||
+        modifiersMatch(modifiers, callback.modifiers)
+      ) {
        const deleteCombo = !sequenceName && callback.combo === combination;
-        const deleteSequence = sequenceName && callback.seq === sequenceName && callback.level === level;
+        const deleteSequence =
+          sequenceName && callback.seq === sequenceName && callback.level === level;
        if (deleteCombo || deleteSequence) {
          this.callBacks[character].splice(i, 1);
        }
@ -569,7 +585,12 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
    this.resetTimer = window.setTimeout(this.resetSequences, 1000);
  }

-  private bindSequence(combo: string, keys: string[], callback: IPublicTypeHotkeyCallback, action?: string): void {
+  private bindSequence(
+    combo: string,
+    keys: string[],
+    callback: IPublicTypeHotkeyCallback,
+    action?: string,
+  ): void {
    // const self: any = this;
    this.sequenceLevels[combo] = 0;
    const increaseSequence = (nextAction: string) => {
@ -590,7 +611,9 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
    };
    for (let i = 0; i < keys.length; ++i) {
      const isFinal = i + 1 === keys.length;
-      const wrappedCallback = isFinal ? callbackAndReset : increaseSequence(action || getKeyInfo(keys[i + 1]).action);
+      const wrappedCallback = isFinal
+        ? callbackAndReset
+        : increaseSequence(action || getKeyInfo(keys[i + 1]).action);
      this.bindSingle(keys[i], wrappedCallback, action, combo, i);
    }
  }
@ -624,7 +647,14 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
    this.callBacks[info.key] = this.callBacks[info.key] || [];

    // remove an existing match if there is one
-    this.getMatches(info.key, info.modifiers, { type: info.action }, sequenceName, combination, level);
+    this.getMatches(
+      info.key,
+      info.modifiers,
+      { type: info.action },
+      sequenceName,
+      combination,
+      level,
+    );

    // add this call back to the array
    // if it is a sequence put it at the beginning
@ -642,7 +672,11 @@ export class Hotkey implements Omit<IPublicApiHotkey, 'bind' | 'callbacks'> {
    });
  }

-  private bindMultiple(combinations: string[], callback: IPublicTypeHotkeyCallback, action?: string) {
+  private bindMultiple(
+    combinations: string[],
+    callback: IPublicTypeHotkeyCallback,
+    action?: string,
+  ) {
    for (const item of combinations) {
      this.bindSingle(item, callback, action);
    }
--- a/packages/editor-core/src/intl/index.ts
+++ b/packages/editor-core/src/intl/index.ts
@ -29,12 +29,12 @@ function injectVars(msg: string, params: any, locale: string): string {
  return formater.format(params as any) as string;
 }

-export function intl(data: IPublicTypeI18nData | string, params?: object): ReactNode {
+export function intl(data: IPublicTypeI18nData | string, params?: object) {
  if (!isI18nData(data)) {
    return data;
  }
  if (data.intl) {
-    return data.intl;
+    return data.intl as any;
  }
  const locale = globalLocale.getLocale();
  const tries = generateTryLocales(locale);
@ -56,7 +56,7 @@ export function shallowIntl(data: any): any {
    return data;
  }
  const maps: any = {};
-  Object.keys(data).forEach(key => {
+  Object.keys(data).forEach((key) => {
    maps[key] = intl(data[key]);
  });
  return maps;
@ -81,14 +81,12 @@ class IntlElement extends Component<{ data: any; params?: object }> {
  }
 }

-export function createIntl(
-  instance: string | object,
-): {
-    intlNode(id: string, params?: object): ReactNode;
-    intl(id: string, params?: object): string;
-    getLocale(): string;
-    setLocale(locale: string): void;
-  } {
+export function createIntl(instance: string | object): {
+  intlNode(id: string, params?: object): ReactNode;
+  intl(id: string, params?: object): string;
+  getLocale(): string;
+  setLocale(locale: string): void;
+} {
  // TODO: make reactive
  const data = (() => {
    const locale = globalLocale.getLocale();
--- a/packages/editor-core/src/utils/assets-transform.ts
+++ b/packages/editor-core/src/utils/assets-transform.ts
@ -1,28 +1,37 @@
-/* eslint-disable no-param-reassign */
-import { IPublicTypeAssetsJson, IPublicTypeComponentDescription, IPublicTypePackage, IPublicTypeRemoteComponentDescription } from '@alilc/lowcode-types';
+import {
+  IPublicTypeAssetsJson,
+  IPublicTypeComponentDescription,
+  IPublicTypePackage,
+  IPublicTypeRemoteComponentDescription,
+} from '@alilc/lowcode-types';

 // TODO: 该转换逻辑未来需要消化掉
 export function assetsTransform(assets: IPublicTypeAssetsJson) {
  const { components, packages } = assets;
-  const packageMaps = (packages || []).reduce((acc: Record<string, IPublicTypePackage>, cur: IPublicTypePackage) => {
-    const key = cur.id || cur.package || '';
-    acc[key] = cur;
-    return acc;
-  }, {} as any);
-  components.forEach((componentDesc: IPublicTypeComponentDescription | IPublicTypeRemoteComponentDescription) => {
-    let { devMode, schema, reference } = componentDesc;
-    if ((devMode as string) === 'lowcode') {
-      devMode = 'lowCode';
-    } else if (devMode === 'proCode') {
-      devMode = 'proCode';
-    }
-    if (devMode) {
-      componentDesc.devMode = devMode;
-    }
-    if (devMode === 'lowCode' && !schema && reference) {
-      const referenceId = reference.id || '';
-      componentDesc.schema = packageMaps[referenceId].schema;
-    }
-  });
+  const packageMaps = (packages || []).reduce(
+    (acc: Record<string, IPublicTypePackage>, cur: IPublicTypePackage) => {
+      const key = cur.id || cur.package || '';
+      acc[key] = cur;
+      return acc;
+    },
+    {} as any,
+  );
+  components.forEach(
+    (componentDesc: IPublicTypeComponentDescription | IPublicTypeRemoteComponentDescription) => {
+      let { devMode, schema, reference } = componentDesc;
+      if ((devMode as string) === 'lowcode') {
+        devMode = 'lowCode';
+      } else if (devMode === 'proCode') {
+        devMode = 'proCode';
+      }
+      if (devMode) {
+        componentDesc.devMode = devMode;
+      }
+      if (devMode === 'lowCode' && !schema && reference) {
+        const referenceId = reference.id || '';
+        componentDesc.schema = packageMaps[referenceId].schema as any;
+      }
+    },
+  );
  return assets;
-}
+}
--- a/packages/editor-core/src/utils/request.ts
+++ b/packages/editor-core/src/utils/request.ts
@ -1,7 +1,3 @@
-import Debug from 'debug';
-
-const debug = Debug('request');
-
 export function serialize(obj?: object): string {
  if (!obj) {
    return '';
@ -23,7 +19,12 @@ export function buildUrl(dataAPI: string, params?: object): string {
  return dataAPI;
 }

-export function get(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> {
+export function get(
+  dataAPI: string,
+  params?: object,
+  headers?: object,
+  otherProps?: object,
+): Promise<any> {
  const fetchHeaders = {
    Accept: 'application/json',
    ...headers,
@ -31,7 +32,12 @@ export function get(dataAPI: string, params?: object, headers?: object, otherPro
  return request(buildUrl(dataAPI, params), 'GET', undefined, fetchHeaders, otherProps);
 }

-export function post(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> {
+export function post(
+  dataAPI: string,
+  params?: object,
+  headers?: object,
+  otherProps?: object,
+): Promise<any> {
  const fetchHeaders = {
    Accept: 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded',
@ -121,7 +127,6 @@ export function request(
        }
      })
      .catch((err: Error): void => {
-        debug(err);
        reject(err);
      });
  });
--- a/packages/editor-core/src/widgets/title/index.tsx
+++ b/packages/editor-core/src/widgets/title/index.tsx
@ -1,7 +1,11 @@
 import { Component, isValidElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import { createIcon, isI18nData, isTitleConfig } from '@alilc/lowcode-utils';
-import { IPublicTypeI18nData, IPublicTypeTitleConfig, IPublicTypeTitleProps } from '@alilc/lowcode-types';
+import {
+  IPublicTypeI18nData,
+  IPublicTypeTitleConfig,
+  IPublicTypeTitleProps,
+} from '@alilc/lowcode-types';
 import { intl } from '../../intl';
 import { Tip } from '../tip';
 import './title.less';
@ -13,7 +17,7 @@ import './title.less';
 * @param keywords 关键字
 * @returns 文字片段列表
 */
- function splitLabelByKeywords(label: string, keywords: string): string[] {
+function splitLabelByKeywords(label: string, keywords: string): string[] {
  const len = keywords.length;
  const fragments = [];
  let str = label;
@ -61,27 +65,26 @@ export class Title extends Component<IPublicTypeTitleProps> {
      return null;
    }

-    const intlLabel = intl(label);
+    const intlLabel = intl(String(label));

    if (typeof intlLabel !== 'string') {
      return <span className="lc-title-txt">{intlLabel}</span>;
    }

-    let labelToRender: ReactNode = intlLabel;
+    let labelToRender: any = intlLabel;

    if (match && keywords) {
      const fragments = splitLabelByKeywords(intlLabel as string, keywords);

-      labelToRender = fragments.map(f => <span style={{ color: f === keywords ? 'red' : 'inherit' }}>{f}</span>);
+      labelToRender = fragments.map((f) => (
+        <span style={{ color: f === keywords ? 'red' : 'inherit' }}>{f}</span>
+      ));
    }

-    return (
-      <span className="lc-title-txt">{labelToRender}</span>
-    );
+    return <span className="lc-title-txt">{labelToRender}</span>;
  };

  render() {
-    // eslint-disable-next-line prefer-const
    const { title, className } = this.props;
    let _title: IPublicTypeTitleConfig;
    if (title == null) {
@ -107,7 +110,7 @@ export class Title extends Component<IPublicTypeTitleProps> {
      if (isValidElement(_title.tip) && _title.tip.type === Tip) {
        tip = _title.tip;
      } else {
-        const tipProps =
+        const tipProps: any =
          typeof _title.tip === 'object' && !(isValidElement(_title.tip) || isI18nData(_title.tip))
            ? _title.tip
            : { children: _title.tip };
--- a/packages/editor-core/tsconfig.json
+++ b/packages/editor-core/tsconfig.json
@ -1,7 +1,10 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
-    "outDir": "lib"
+    "outDir": "dist",
+    "paths": {
+      "@alilc/lowcode-*": ["packages/*"]
+    }
  },
-  "include": ["./src/"]
+  "include": ["src"]
 }
--- a/packages/types/package.json
+++ b/packages/types/package.json
@ -2,15 +2,21 @@
  "name": "@alilc/lowcode-types",
  "version": "2.0.0-beta.0",
  "description": "Types for Ali lowCode engine",
-  "files": [
-    "es",
-    "lib"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "type": "module",
+  "main": "dist/lowcodeTypes.js",
+  "module": "dist/lowcodeTypes.js",
  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/lowcodeTypes.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
  "scripts": {
-    "build": "tsc"
+    "build": "vite build",
+    "test": "vitest"
  },
  "dependencies": {
    "@alilc/lowcode-datasource-types": "^1.0.0",
@ -19,10 +25,11 @@
    "strict-event-emitter-types": "^2.0.0"
  },
  "devDependencies": {
-    "@types/react": "^18"
+    "@types/react": "^18.2.0"
  },
  "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@alifd/next": "^1.27.8"
  },
  "publishConfig": {
    "access": "public",
--- a/packages/types/src/event/index.ts
+++ b/packages/types/src/event/index.ts
@ -6,4 +6,4 @@ export interface EventConfig {
  [eventName: string]: any;
 }

-export * as Node from './node';
+export type { Node };
--- a/packages/types/src/event/node.ts
+++ b/packages/types/src/event/node.ts
@ -1,4 +1,6 @@
-export * as Prop from './prop';
+import * as Prop from './prop';
+
+export type { Prop };

 export interface RerenderOptions {
  time: number;
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@ -1,9 +1,12 @@
+import * as GlobalEvent from './event';
+
+export type { GlobalEvent };
+
 export * from '@alilc/lowcode-datasource-types';
 export * from './editor';
 export * from './activity';
 export * from './code-intermediate';
 export * from './code-result';
 export * from './assets';
-export * as GlobalEvent from './event';
 export * from './shell';
 export * from './shell-model-factory';
--- a/packages/types/src/shell/api/workspace.ts
+++ b/packages/types/src/shell/api/workspace.ts
@ -1,5 +1,12 @@
 import { IPublicModelWindow } from '../model';
-import { IPublicApiPlugins, IPublicApiSkeleton, IPublicModelResource, IPublicResourceList, IPublicTypeDisposable, IPublicTypeResourceType } from '@alilc/lowcode-types';
+import {
+  IPublicApiPlugins,
+  IPublicApiSkeleton,
+  IPublicModelResource,
+  IPublicResourceList,
+  IPublicTypeDisposable,
+  IPublicTypeResourceType,
+} from '..';

 export interface IPublicApiWorkspace<
  Plugins = IPublicApiPlugins,
@ -7,7 +14,6 @@ export interface IPublicApiWorkspace<
  ModelWindow = IPublicModelWindow,
  Resource = IPublicModelResource,
 > {
-
  /** 是否启用 workspace 模式 */
  isActive: boolean;

@ -37,7 +43,13 @@ export interface IPublicApiWorkspace<
   * 打开视图窗口
   * @deprecated
   */
-  openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;
+  openEditorWindow(
+    resourceName: string,
+    id: string,
+    extra: Object,
+    viewName?: string,
+    sleep?: boolean,
+  ): Promise<void>;

  /** 打开视图窗口 */
  openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;
@ -76,4 +88,4 @@ export interface IPublicApiWorkspace<
   * @since v1.1.7
   */
  onWindowRendererReady(fn: () => void): IPublicTypeDisposable;
-}
+}
--- a/packages/types/src/shell/enum/transition-type.ts
+++ b/packages/types/src/shell/enum/transition-type.ts
@ -1,13 +1,13 @@
 // eslint-disable-next-line no-shadow
-export enum IPublicEnumTransitionType {
+export const enum IPublicEnumTransitionType {
  /** 节点更新后重绘处理 */
-  REPAINT
+  REPAINT,
 }

 /**
 * @deprecated use IPublicEnumTransitionType instead
 */
-export enum TransitionType {
+export const enum TransitionType {
  /** 节点更新后重绘处理 */
-  REPAINT
-}
+  REPAINT,
+}
--- a/packages/types/src/shell/model/document-model.ts
+++ b/packages/types/src/shell/model/document-model.ts
@ -1,8 +1,21 @@
-import { IPublicTypeRootSchema, IPublicTypeDragNodeDataObject, IPublicTypeDragNodeObject, IPublicTypePropChangeOptions, IPublicTypeDisposable } from '../type';
+import {
+  IPublicTypeRootSchema,
+  IPublicTypeDragNodeDataObject,
+  IPublicTypeDragNodeObject,
+  IPublicTypePropChangeOptions,
+  IPublicTypeDisposable,
+} from '../type';
 import { IPublicEnumTransformStage } from '../enum';
 import { IPublicApiProject } from '../api';
-import { IPublicModelDropLocation, IPublicModelDetecting, IPublicModelNode, IPublicModelSelection, IPublicModelHistory, IPublicModelModalNodesManager } from './';
-import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicTypeOnChangeOptions } from '@alilc/lowcode-types';
+import {
+  IPublicModelDropLocation,
+  IPublicModelDetecting,
+  IPublicModelNode,
+  IPublicModelSelection,
+  IPublicModelHistory,
+  IPublicModelModalNodesManager,
+} from './';
+import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicTypeOnChangeOptions } from '../type';

 export interface IPublicModelDocumentModel<
  Selection = IPublicModelSelection,
@ -10,13 +23,12 @@ export interface IPublicModelDocumentModel<
  Node = IPublicModelNode,
  DropLocation = IPublicModelDropLocation,
  ModalNodesManager = IPublicModelModalNodesManager,
-  Project = IPublicApiProject
+  Project = IPublicApiProject,
 > {
-
  /**
-     * 节点选中区模型实例
-     * instance of selection
-     */
+   * 节点选中区模型实例
+   * instance of selection
+   */
  selection: Selection;

  /**
@ -99,7 +111,7 @@ export interface IPublicModelDocumentModel<
    parent: Node,
    thing: Node | IPublicTypeNodeData,
    at?: number | null | undefined,
-    copy?: boolean | undefined
+    copy?: boolean | undefined,
  ): Node | null;

  /**
@ -134,7 +146,7 @@ export interface IPublicModelDocumentModel<
   */
  checkNesting(
    dropTarget: Node,
-    dragObject: IPublicTypeDragNodeObject | IPublicTypeDragNodeDataObject
+    dragObject: IPublicTypeDragNodeObject | IPublicTypeDragNodeDataObject,
  ): boolean;

  /**
--- a/packages/types/tsconfig.json
+++ b/packages/types/tsconfig.json
@ -1,7 +1,4 @@
 {
  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist"
-  },
  "include": ["src"]
 }
--- a/packages/types/vite.config.ts
+++ b/packages/types/vite.config.ts
@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import dts from 'vite-plugin-dts';
+
+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: 'LowcodeTypes',
+      formats: ['es'],
+      // the proper extensions will be added
+      fileName: 'lowcodeTypes',
+    },
+  },
+  plugins: [
+    dts({
+      rollupTypes: true,
+      compilerOptions: {
+        stripInternal: true,
+      },
+    }),
+  ],
+});
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -2,15 +2,24 @@
  "name": "@alilc/lowcode-utils",
  "version": "2.0.0-beta.0",
  "description": "Utils for Ali lowCode engine",
-  "files": [
-    "lib",
-    "es"
-  ],
+  "type": "module",
  "main": "lib/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/lowCodeUtils.js"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
  "scripts": {
-    "build": "tsc"
+    "build": "vite build",
+    "test": "vitest"
  },
  "dependencies": {
    "@alifd/next": "^1.27.8",
@ -20,16 +29,19 @@
    "mobx": "^6.12.1",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
-    "react-is": "^18.2.0"
+    "react-is": "^18.2.0",
+    "events": "^3.3.0"
  },
  "devDependencies": {
    "@testing-library/react": "^14.2.2",
    "@types/lodash-es": "^4.17.12",
    "@types/react": "^18.2.67",
    "@types/react-is": "^18.2.4",
-    "@types/prop-types": "^15.7.12"
+    "@types/prop-types": "^15.7.12",
+    "@types/events": "^3.0.3"
  },
  "peerDependencies": {
+    "@alifd/next": "^1.27.8",
    "react": "^18.2.0"
  },
  "publishConfig": {
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -1,3 +1,5 @@
+import * as css from './css-helper';
+
 export * from './asset';
 export * from './clone-deep';
 export * from './create-content';
@ -27,9 +29,9 @@ export * from './clone-enumerable-property';
 export * from './logger';
 export * from './is-shaken';
 export * from './is-plugin-event-name';
-export * as css from './css-helper';
+export { css };
 export { transactionManager } from './transaction-manager';
 export * from './check-types';
 export * from './workspace';
 export * from './context-menu';
-export { checkPropTypes } from './check-prop-types';
+export { checkPropTypes } from './check-prop-types';
--- a/packages/utils/src/transaction-manager.ts
+++ b/packages/utils/src/transaction-manager.ts
@ -5,20 +5,29 @@ import EventEmitter from 'events';
 class TransactionManager {
  emitter = new EventEmitter();

-  executeTransaction = (fn: () => void, type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT): void => {
+  executeTransaction = (
+    fn: () => void,
+    type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT,
+  ): void => {
    this.emitter.emit(`[${type}]startTransaction`);
    runInAction(fn);
    this.emitter.emit(`[${type}]endTransaction`);
  };

-  onStartTransaction = (fn: () => void, type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT): () => void => {
+  onStartTransaction = (
+    fn: () => void,
+    type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT,
+  ): (() => void) => {
    this.emitter.on(`[${type}]startTransaction`, fn);
    return () => {
      this.emitter.off(`[${type}]startTransaction`, fn);
    };
  };

-  onEndTransaction = (fn: () => void, type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT): () => void => {
+  onEndTransaction = (
+    fn: () => void,
+    type: IPublicEnumTransitionType = IPublicEnumTransitionType.REPAINT,
+  ): (() => void) => {
    this.emitter.on(`[${type}]endTransaction`, fn);
    return () => {
      this.emitter.off(`[${type}]endTransaction`, fn);
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@ -1,7 +1,6 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
-    "outDir": "dist",
    "paths": {
      "@alilc/lowcode-*": ["packages/*"]
    }
--- a/packages/utils/vite.config.ts
+++ b/packages/utils/vite.config.ts
@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+import { devDependencies, peerDependencies } from './package.json';
+
+const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve(import.meta.dirname, 'src/index.ts'),
+      name: 'LowCodeUtils',
+      formats: ['es'],
+      fileName: 'lowCodeUtils',
+    },
+    rollupOptions: {
+      external: externals,
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: true,
+      compilerOptions: {
+        stripInternal: true,
+        paths: {},
+      },
+    }),
+  ],
+});
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -2,5 +2,6 @@ packages:
  - 'runtime/*'
  - 'packages/types'
  - 'packages/utils'
+  - 'packages/editor-core'
  - 'playground'
  - 'docs'
--- a/runtime/renderer-core/package.json
+++ b/runtime/renderer-core/package.json
@ -6,10 +6,19 @@
  "bugs": "https://github.com/alibaba/lowcode-engine/issues",
  "homepage": "https://github.com/alibaba/lowcode-engine/#readme",
  "license": "MIT",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "dist/rendererCore.js",
+  "module": "dist/rendererCore.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/rendererCore.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "package.json"
+  ],
  "scripts": {
-    "build": "tsc",
+    "build": "vite build",
    "test": "vitest --run",
    "test:watch": "vitest"
  },
--- a/runtime/renderer-core/rollup.config.mjs
+++ b/runtime/renderer-core/rollup.config.mjs
@ -1,7 +0,0 @@
-export default {
-	input: 'src/main.js',
-	output: {
-		file: 'bundle.js',
-		format: 'cjs'
-	}
-};
--- a/runtime/renderer-core/src/container.ts
+++ b/runtime/renderer-core/src/container.ts
@ -4,7 +4,6 @@ import type {
  ComponentTree,
  InstanceDataSourceApi,
  InstanceStateApi,
-  NodeType,
 } from './types';
 import { type CodeScope, type CodeRuntime, createCodeRuntime, createScope } from './code-runtime';
 import { isJSFunction } from './utils/type-guard';
--- a/runtime/renderer-core/src/types/specs/lowcode-spec.ts
+++ b/runtime/renderer-core/src/types/specs/lowcode-spec.ts
@ -167,7 +167,7 @@ export interface ComponentTreeNode {
  /**
   * 循环数据
   */
-  loop?: any[] | JSExpression;
+  loop?: unknown[] | JSExpression;
  /**
   * 循环迭代对象、索引名称，默认为 ["item", "index"]
   */
--- a/runtime/renderer-core/src/widget.ts
+++ b/runtime/renderer-core/src/widget.ts
@ -1,4 +1,4 @@
-import type { NodeType, ComponentTreeNode, ComponentTreeNodeProps } from './types';
+import type { NodeType, ComponentTreeNode, ComponentTreeNodeProps, JSExpression } from './types';
 import { isJSExpression, isI18nNode } from './utils/type-guard';
 import { guid } from './utils/guid';

@ -67,7 +67,7 @@ export class ComponentWidget<E = unknown> extends Widget<ComponentTreeNode, E> {
  get condition() {
    return this.raw.condition !== false;
  }
-  get loop() {
+  get loop(): unknown[] | JSExpression | undefined {
    return this.raw.loop;
  }
  get loopArgs() {
--- a/runtime/renderer-core/tsconfig.json
+++ b/runtime/renderer-core/tsconfig.json
@ -1,7 +1,4 @@
 {
  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist"
-  },
  "include": ["src"]
 }
--- a/runtime/renderer-core/vite.config.ts
+++ b/runtime/renderer-core/vite.config.ts
@ -0,0 +1,24 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import dts from 'vite-plugin-dts';
+
+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'],
+      // the proper extensions will be added
+      fileName: 'rendererCore',
+    },
+  },
+  plugins: [
+    dts({
+      rollupTypes: true,
+      compilerOptions: {
+        stripInternal: true,
+      },
+    }),
+  ],
+});
--- a/runtime/renderer-react/package.json
+++ b/runtime/renderer-react/package.json
@ -6,10 +6,17 @@
  "bugs": "https://github.com/alibaba/lowcode-engine/issues",
  "homepage": "https://github.com/alibaba/lowcode-engine/#readme",
  "license": "MIT",
-  "module": "dist/index.js",
+  "main": "dist/rendererReact.cjs",
+  "module": "dist/rendererReact.js",
  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/rendererReact.js",
+      "require": "./dist/rendererReact.cjs"
+    }
+  },
  "scripts": {
-    "build": "tsc",
+    "build": "vite build",
    "test": "vitest"
  },
  "dependencies": {
@ -17,6 +24,7 @@
    "@alilc/runtime-router": "workspace:*",
    "@vue/reactivity": "^3.4.21",
    "lodash-es": "^4.17.21",
+    "immer": "^10.0.4",
    "hoist-non-react-statics": "^3.3.2",
    "use-sync-external-store": "^1.2.0",
    "react": "^18.2.0",
--- a/runtime/renderer-react/tsconfig.json
+++ b/runtime/renderer-react/tsconfig.json
@ -1,7 +1,6 @@
 {
  "extends": "../../tsconfig.json",
  "compilerOptions": {
-    "outDir": "dist",
    "paths": {
      "@alilc/renderer-core": ["runtime/renderer-core"],
      "@alilc/runtime-router": ["runtime/router"]
--- a/runtime/renderer-react/vite.config.ts
+++ b/runtime/renderer-react/vite.config.ts
@ -0,0 +1,40 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import dts from 'vite-plugin-dts';
+import react from '@vitejs/plugin-react';
+import { devDependencies, peerDependencies } from './package.json';
+
+const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+
+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', 'cjs', 'iife'],
+      // the proper extensions will be added
+      fileName: 'rendererReact',
+    },
+    rollupOptions: {
+      external: externals,
+      output: {
+        // for UMD
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: true,
+      compilerOptions: {
+        stripInternal: true,
+        paths: {},
+      },
+    }),
+  ],
+});
--- a/runtime/router/package.json
+++ b/runtime/router/package.json
@ -6,10 +6,13 @@
  "bugs": "https://github.com/alibaba/lowcode-engine/issues",
  "homepage": "https://github.com/alibaba/lowcode-engine/#readme",
  "license": "MIT",
-  "module": "dist/index.js",
+  "module": "dist/runtimeRouter.js",
  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/runtimeRouter.js"
+  },
  "scripts": {
-    "build": "tsc",
+    "build": "vite build",
    "test": "vitest"
  },
  "dependencies": {
@ -22,6 +25,9 @@
    "@types/lodash-es": "^4.17.12",
    "@types/qs": "^6.9.13"
  },
+  "peerDependencies": {
+    "@alilc/renderer-core": "workspace:*"
+  },
  "publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org/"
--- a/runtime/router/vite.config.ts
+++ b/runtime/router/vite.config.ts
@ -0,0 +1,31 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+import dts from 'vite-plugin-dts';
+import { devDependencies, peerDependencies } from './package.json';
+
+const externals = [...Object.keys(peerDependencies), ...Object.keys(devDependencies)];
+
+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: 'LowCodeRuntimeRouter',
+      formats: ['es'],
+      // the proper extensions will be added
+      fileName: 'runtimeRouter',
+    },
+    rollupOptions: {
+      external: externals,
+    },
+  },
+  plugins: [
+    dts({
+      rollupTypes: true,
+      compilerOptions: {
+        stripInternal: true,
+        paths: {},
+      },
+    }),
+  ],
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@ -7,7 +7,7 @@
    // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
    "module": "esnext",
    // Search under node_modules for non-relative imports.
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    "strictPropertyInitialization": false,
@ -18,7 +18,7 @@
    // Specify JSX code generation: 'preserve', 'react-native', or 'react'.
    "jsx": "preserve",
    // Import emit helpers (e.g. __extends, __rest, etc..) from tslib
-    "importHelpers": true,
+    "importHelpers": false,
    // Enables experimental support for ES7 decorators.
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
@ -27,11 +27,12 @@
    // Disallow inconsistently-cased references to the same file.
    "forceConsistentCasingInFileNames": true,
    // Allow json import
-    "resolveJsonModule": true,
+    "resolvePackageJsonExports": true,
    // skip type checking of declaration files
    "skipLibCheck": true,
-    "baseUrl": "./packages",
-    "useDefineForClassFields": true
+    "useDefineForClassFields": true,
+    "baseUrl": ".",
+    "rootDir": "."
  },
-  "exclude": ["**/tests/*", "**/*.test.ts", "**/lib", "**/es", "node_modules"]
+  "exclude": ["**/dist", "node_modules"]
 }