From f2fe1f21b2605a353c8118c4210b12cdade32df6 Mon Sep 17 00:00:00 2001
From: 2betop <2698393+2betop@users.noreply.github.com>
Date: Fri, 13 Sep 2024 10:57:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E5=BC=82=E6=AD=A5?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=99=A8=E5=B9=B6=E5=B0=86=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E5=86=85=E7=BD=AE=E6=B8=B2=E6=9F=93=E8=B0=83=E6=95=B4=E4=B8=BA?=
 =?UTF-8?q?=E5=BC=82=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/embed.tsx                            |  14 +-
 package.json                                  |   1 +
 packages/amis-core/__tests__/jest.setup.js    |  13 +-
 packages/amis-core/rollup.config.js           |   3 +-
 packages/amis-core/src/RootRenderer.tsx       |  25 +-
 packages/amis-core/src/SchemaRenderer.tsx     |  32 +-
 .../src/components/LazyComponent.tsx          |  19 +-
 packages/amis-core/src/factory.tsx            | 208 ++++-
 packages/amis-core/src/index.tsx              |  14 +-
 packages/amis-core/src/store/root.ts          |  52 +-
 packages/amis-editor-core/rollup.config.js    |   2 +-
 .../src/component/CommonConfigWrapper.tsx     |   3 +-
 .../src/component/FormConfigWrapper.tsx       |   3 +-
 .../src/component/NodeWrapper.tsx             |   7 +-
 .../src/component/Preview.tsx                 |  16 +-
 .../src/component/factory.tsx                 |   2 +-
 packages/amis-editor-core/src/manager.ts      |   8 +-
 packages/amis-editor-core/src/store/editor.ts |   4 +
 packages/amis-editor/rollup.config.js         |   6 +-
 .../amis-theme-editor-helper/rollup.config.js |   2 +-
 packages/amis-ui/rollup.config.js             |   3 +-
 .../amis-ui/scss/components/_spinner.scss     |  12 +
 .../src/components/AnchorNavSection.tsx       |   3 +
 packages/amis-ui/src/components/AutoSizer.tsx |   2 +
 packages/amis-ui/src/components/Badge.tsx     |   2 +
 .../src/components/ConditionBuilder.tsx       |   3 +
 .../amis-ui/src/components/FormulaPicker.tsx  |   2 +
 .../amis-ui/src/components/GridNavItem.tsx    |   3 +
 .../src/components/HeadCellDropDown.tsx       |   2 +
 packages/amis-ui/src/components/Icon.tsx      |   3 +
 .../src/components/InputJSONSchema.tsx        |   3 +
 .../src/components/JSONSchemaEditor.tsx       |   3 +
 packages/amis-ui/src/components/Tab.tsx       |   3 +
 .../amis-ui/src/components/VirtualList.tsx    |   3 +
 packages/amis-ui/src/components/WithStore.tsx |   2 +
 packages/amis-ui/src/components/icons.tsx     |   2 +
 packages/amis-ui/src/components/index.tsx     |  31 +-
 packages/amis-ui/src/components/withBadge.tsx |   3 +
 packages/amis-ui/src/index.tsx                |   3 +-
 packages/amis-ui/src/withStore.ts             |   2 +
 packages/amis-ui/tsconfig.json                |   1 +
 packages/amis/__tests__/helper.tsx            |   1 +
 packages/amis/package.json                    |  12 +-
 packages/amis/rollup.config.js                |  41 +-
 packages/amis/src/index.tsx                   | 153 +---
 packages/amis/src/minimal.ts                  | 822 ++++++++++++++++++
 packages/amis/src/preset.tsx                  |   9 +-
 packages/amis/src/renderers/Action.tsx        |  18 +-
 packages/amis/src/renderers/App.tsx           |   4 +-
 packages/amis/src/renderers/Cards.tsx         |   2 +-
 .../amis/src/renderers/Form/InputFormula.tsx  |   2 +-
 .../amis/src/renderers/Form/InputText.tsx     |  72 +-
 .../amis/src/renderers/Form/InputTree.tsx     |   3 +-
 .../src/renderers/Form/JSONSchemaEditor.tsx   |   6 +-
 packages/amis/src/renderers/List.tsx          |   3 +-
 packages/amis/src/renderers/Mapping.tsx       |   3 +-
 packages/amis/src/renderers/Nav.tsx           |  24 +-
 packages/amis/src/renderers/Pagination.tsx    |   3 +-
 packages/amis/src/renderers/Plain.tsx         |   3 +-
 packages/amis/src/renderers/QRCode.tsx        |   3 +-
 packages/amis/src/renderers/Steps.tsx         |   3 +-
 .../amis/src/renderers/Table/TableCell.tsx    |   2 +-
 packages/amis/src/renderers/Tpl.tsx           |   3 +-
 63 files changed, 1361 insertions(+), 356 deletions(-)
 create mode 100644 packages/amis-ui/src/components/AnchorNavSection.tsx
 create mode 100644 packages/amis-ui/src/components/AutoSizer.tsx
 create mode 100644 packages/amis-ui/src/components/ConditionBuilder.tsx
 create mode 100644 packages/amis-ui/src/components/FormulaPicker.tsx
 create mode 100644 packages/amis-ui/src/components/GridNavItem.tsx
 create mode 100644 packages/amis-ui/src/components/HeadCellDropDown.tsx
 create mode 100644 packages/amis-ui/src/components/Icon.tsx
 create mode 100644 packages/amis-ui/src/components/InputJSONSchema.tsx
 create mode 100644 packages/amis-ui/src/components/JSONSchemaEditor.tsx
 create mode 100644 packages/amis-ui/src/components/Tab.tsx
 create mode 100644 packages/amis-ui/src/components/VirtualList.tsx
 create mode 100644 packages/amis-ui/src/components/withBadge.tsx
 create mode 100644 packages/amis-ui/src/withStore.ts
 create mode 100644 packages/amis/src/minimal.ts

diff --git a/examples/embed.tsx b/examples/embed.tsx
index 1afad7e27..d821919c9 100644
--- a/examples/embed.tsx
+++ b/examples/embed.tsx
@@ -7,15 +7,11 @@ import copy from 'copy-to-clipboard';
 import {normalizeLink, supportsMjs} from 'amis-core';
 
 import qs from 'qs';
-import {
-  toast,
-  alert,
-  confirm,
-  ToastComponent,
-  AlertComponent,
-  render as renderAmis,
-  makeTranslator
-} from 'amis';
+import {alert, confirm} from 'amis-ui/lib/components/Alert';
+import {toast, default as ToastComponent} from 'amis-ui/lib/components/Toast';
+import AlertComponent from 'amis-ui/lib/components/Alert';
+import {render as renderAmis, makeTranslator} from 'amis-core';
+import 'amis/lib/minimal';
 
 import 'amis-ui/lib/locale/en-US';
 import 'history';
diff --git a/package.json b/package.json
index 6177e7e26..c9f857c22 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
       "\\.(svg)$": "<rootDir>/__mocks__/svgMock.js",
       "\\.svg\\.js$": "<rootDir>/__mocks__/svgJsMock.js",
       "^amis\\-ui$": "<rootDir>/packages/amis-ui/src/index.tsx",
+      "^amis\\-ui/lib/(.*)$": "<rootDir>/packages/amis-ui/src/$1",
       "^amis\\-core$": "<rootDir>/packages/amis-core/src/index.tsx",
       "^amis\\-formula$": "<rootDir>/packages/amis-formula/src/index.ts",
       "^office\\-viewer$": "<rootDir>/packages/office-viewer/src/index.ts",
diff --git a/packages/amis-core/__tests__/jest.setup.js b/packages/amis-core/__tests__/jest.setup.js
index 9df52535f..0be399b27 100644
--- a/packages/amis-core/__tests__/jest.setup.js
+++ b/packages/amis-core/__tests__/jest.setup.js
@@ -6,6 +6,7 @@ const originalDebug = console.warn.bind(console.debug);
 const originalError = console.error.bind(console.error);
 require('@testing-library/jest-dom');
 require('moment-timezone');
+const loadAllAsyncRenderers = require('amis-core').loadAllAsyncRenderers;
 const moment = require('moment');
 moment.tz.setDefault('Asia/Shanghai');
 const cleanup = require('@testing-library/react').cleanup;
@@ -13,16 +14,18 @@ const cleanup = require('@testing-library/react').cleanup;
 // https://github.com/nrwl/nx/issues/1178
 // 解决jest 运行的时候报：
 // ReferenceError: DragEvent is not defined
-Object.defineProperty(window, 'DragEvent', {
-  value: class DragEvent {}
-});
+if (!window.DragEvent) {
+  Object.defineProperty(window, 'DragEvent', {
+    value: class DragEvent {}
+  });
+}
 
 // Mock ResizeObserver in jest env
 global.ResizeObserver = require('resize-observer-polyfill');
 
 global.__buildVersion = '';
 
-global.beforeAll(() => {
+global.beforeAll(async () => {
   console.warn =
     console.groupCollapsed =
     console.group =
@@ -40,6 +43,8 @@ global.beforeAll(() => {
         // }
         // originalWarn(msg);
       };
+
+  await loadAllAsyncRenderers();
 });
 global.afterAll(() => {
   console.warn = originalWarn;
diff --git a/packages/amis-core/rollup.config.js b/packages/amis-core/rollup.config.js
index 7df80b90e..9271493e1 100644
--- a/packages/amis-core/rollup.config.js
+++ b/packages/amis-core/rollup.config.js
@@ -113,7 +113,8 @@ function transpileDynamicImportForCJS(options) {
 
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
-        right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
+        right:
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
diff --git a/packages/amis-core/src/RootRenderer.tsx b/packages/amis-core/src/RootRenderer.tsx
index 7b5967af0..402bf5140 100644
--- a/packages/amis-core/src/RootRenderer.tsx
+++ b/packages/amis-core/src/RootRenderer.tsx
@@ -4,7 +4,7 @@ import type {RootProps} from './Root';
 import {IScopedContext, ScopedContext, filterTarget} from './Scoped';
 import {IRootStore, RootStore} from './store/root';
 import {ActionObject} from './types';
-import {bulkBindFunctions, guid, isVisible} from './utils/helper';
+import {bulkBindFunctions, guid, isVisible, JSONTraverse} from './utils/helper';
 import {filter} from './utils/tpl';
 import qs from 'qs';
 import pick from 'lodash/pick';
@@ -12,6 +12,8 @@ import mapValues from 'lodash/mapValues';
 import {saveAs} from 'file-saver';
 import {normalizeApi} from './utils/api';
 import {findDOMNode} from 'react-dom';
+import LazyComponent from './components/LazyComponent';
+import {hasAsyncRenderers, loadAsyncRenderersByType} from './factory';
 
 export interface RootRendererProps extends RootProps {
   location?: any;
@@ -46,6 +48,25 @@ export class RootRenderer extends React.Component<RootRendererProps> {
       'handleDrawerClose',
       'handlePageVisibilityChange'
     ]);
+
+    this.store.init(() => {
+      if (!hasAsyncRenderers()) {
+        return;
+      }
+      const schema = props.schema;
+      const types: Array<string> = ['tpl', 'dialog', 'drawer'];
+      JSONTraverse(schema, (value: any, key: string) => {
+        if (key === 'type') {
+          types.push(value);
+
+          // form 依赖 panel
+          if (value === 'form') {
+            types.push('panel');
+          }
+        }
+      });
+      return loadAsyncRenderersByType(types);
+    });
   }
 
   componentDidMount() {
@@ -499,6 +520,8 @@ export class RootRenderer extends React.Component<RootRendererProps> {
 
     if (store.runtimeError) {
       return this.renderRuntimeError();
+    } else if (!store.ready) {
+      return <LazyComponent className="RootLoader" />;
     }
 
     return (
diff --git a/packages/amis-core/src/SchemaRenderer.tsx b/packages/amis-core/src/SchemaRenderer.tsx
index 57c1e4043..150507216 100644
--- a/packages/amis-core/src/SchemaRenderer.tsx
+++ b/packages/amis-core/src/SchemaRenderer.tsx
@@ -5,7 +5,9 @@ import {isValidElementType} from 'react-is';
 import LazyComponent from './components/LazyComponent';
 import {
   filterSchema,
-  loadRenderer,
+  loadRendererError,
+  loadAsyncRenderer,
+  registerRenderer,
   RendererConfig,
   RendererEnv,
   RendererProps,
@@ -268,7 +270,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     const omitList = RENDERER_TRANSMISSION_OMIT_PROPS.concat();
     if (this.renderer) {
       const Component = this.renderer.component;
-      Component.propsList &&
+      Component?.propsList &&
         omitList.push.apply(omitList, Component.propsList as Array<string>);
     }
 
@@ -402,8 +404,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
     } else if (!this.renderer) {
       return rest.invisible ? null : (
         <LazyComponent
-          {...rest}
-          {...exprProps}
+          defaultVisible={true}
           getComponent={async () => {
             const result = await rest.env.loadRenderer(
               schema,
@@ -417,14 +418,20 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
             }
 
             this.reRender();
-            return () => loadRenderer(schema, $path);
+            return () => loadRendererError(schema, $path);
+          }}
+        />
+      );
+    } else if (this.renderer.getComponent && !this.renderer.component) {
+      // 处理异步渲染器
+      return rest.invisible ? null : (
+        <LazyComponent
+          defaultVisible={true}
+          getComponent={async () => {
+            await loadAsyncRenderer(this.renderer as RendererConfig);
+            this.reRender();
+            return () => null;
           }}
-          $path={$path}
-          $schema={schema}
-          retry={this.reRender}
-          rootStore={rootStore}
-          statusStore={statusStore}
-          dispatchEvent={this.dispatchEvent}
         />
       );
     }
@@ -437,7 +444,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       activeKey: defaultActiveKey,
       ...restSchema
     } = schema;
-    const Component = renderer.component;
+    const Component = renderer.component!;
 
     // 原来表单项的 visible: false 和 hidden: true 表单项的值和验证是有效的
     // 而 visibleOn 和 hiddenOn 是无效的，
@@ -463,6 +470,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
       Component.prototype?.isReactComponent ||
       (Component as any).$$typeof === Symbol.for('react.forward_ref');
     let props: any = {
+      ...renderer.defaultProps?.(schema.type, schema),
       ...theme.getRendererConfig(renderer.name),
       ...restSchema,
       ...chainEvents(rest, restSchema),
diff --git a/packages/amis-core/src/components/LazyComponent.tsx b/packages/amis-core/src/components/LazyComponent.tsx
index b2766c7d6..6e3e136c4 100644
--- a/packages/amis-core/src/components/LazyComponent.tsx
+++ b/packages/amis-core/src/components/LazyComponent.tsx
@@ -6,13 +6,16 @@
 
 import React from 'react';
 import {InView} from 'react-intersection-observer';
+import {themeable, ThemeProps} from '../theme';
 
-export interface LazyComponentProps {
+export interface LazyComponentProps extends ThemeProps {
   component?: React.ElementType;
   getComponent?: () => Promise<React.ElementType>;
   placeholder?: React.ReactNode;
   unMountOnHidden?: boolean;
   childProps?: object;
+  defaultVisible?: boolean;
+  className?: string;
   [propName: string]: any;
 }
 
@@ -21,7 +24,7 @@ export interface LazyComponentState {
   component?: React.ElementType;
 }
 
-export default class LazyComponent extends React.Component<
+export class LazyComponent extends React.Component<
   LazyComponentProps,
   LazyComponentState
 > {
@@ -39,14 +42,14 @@ export default class LazyComponent extends React.Component<
     this.mounted = true;
 
     this.state = {
-      visible: false,
+      visible: props.defaultVisible ?? false,
       component: props.component as React.ElementType
     };
   }
 
   componentDidMount() {
     // jest 里面有点异常，先手动让它总是可见
-    if (typeof jest !== 'undefined') {
+    if (typeof jest !== 'undefined' || this.state.visible) {
       this.handleVisibleChange(true);
     }
   }
@@ -92,8 +95,10 @@ export default class LazyComponent extends React.Component<
       childProps,
       partialVisibility,
       children,
+      className,
       ...rest
     } = this.props;
+    const cx = this.props.classnames;
 
     const {visible, component: Component} = this.state;
 
@@ -144,6 +149,10 @@ export default class LazyComponent extends React.Component<
       return children;
     }
 
-    return <div>{placeholder}</div>;
+    return <div className={cx('LazyComponent', className)}>{placeholder}</div>;
   }
 }
+
+const themedLazyComponent = themeable(LazyComponent);
+(themedLazyComponent as any).defaultProps = LazyComponent.defaultProps;
+export default themedLazyComponent;
diff --git a/packages/amis-core/src/factory.tsx b/packages/amis-core/src/factory.tsx
index f5307ef0f..a8780c1a9 100644
--- a/packages/amis-core/src/factory.tsx
+++ b/packages/amis-core/src/factory.tsx
@@ -45,8 +45,10 @@ export interface TestFunc {
 export interface RendererBasicConfig {
   test?: RegExp | TestFunc;
   type?: string;
+  alias?: Array<string>; // 别名, 可以绑定多个类型，命中其中一个即可。
   name?: string;
   storeType?: string;
+  defaultProps?: (type: string, schema: any) => any;
   shouldSyncSuperStore?: (
     store: any,
     props: any,
@@ -99,8 +101,16 @@ export type RendererComponent = React.ComponentType<RendererProps> & {
 };
 
 export interface RendererConfig extends RendererBasicConfig {
-  component: RendererComponent;
-  Renderer?: RendererComponent; // 原始组件
+  // 渲染器组件，与 Renderer 的区别是，这个可能是包裹了 store 的。
+  component?: RendererComponent;
+  // 异步渲染器
+  getComponent?: () => Promise<{default: RendererComponent} | any>;
+
+  // 如果要替换系统渲染器，则需要设置这个为 true
+  override?: boolean;
+
+  // 原始组件
+  Renderer?: RendererComponent;
 }
 
 export interface RenderSchemaFilter {
@@ -128,6 +138,10 @@ export interface RenderOptions
 }
 
 const renderers: Array<RendererConfig> = [];
+// type 与 RendererConfig 的映射关系
+const renderersTypeMap: {
+  [propName: string]: RendererConfig;
+} = {};
 export const renderersMap: {
   [propName: string]: boolean;
 } = {};
@@ -159,65 +173,111 @@ export function Renderer(config: RendererBasicConfig) {
   };
 }
 
+// 将 renderer 转成组件
+function rendererToComponent(
+  component: RendererComponent,
+  config: RendererConfig
+): RendererComponent {
+  if (config.storeType && config.component) {
+    component = HocStoreFactory({
+      storeType: config.storeType,
+      extendsData: config.storeExtendsData,
+      shouldSyncSuperStore: config.shouldSyncSuperStore
+    })(observer(component));
+  }
+
+  if (config.isolateScope) {
+    component = Scoped(component, config.type);
+  }
+  return component;
+}
+
 export function registerRenderer(config: RendererConfig): RendererConfig {
   if (!config.test && !config.type) {
-    throw new TypeError('please set config.test or config.type');
-  } else if (!config.component) {
-    throw new TypeError('config.component is required');
+    throw new TypeError('please set config.type or config.test');
+  } else if (!config.type) {
+    console.warn(
+      `config.type is recommended for register renderer(${config.test})`
+    );
   }
 
   if (typeof config.type === 'string' && config.type) {
     config.type = config.type.toLowerCase();
     config.test =
-      config.test || new RegExp(`(^|\/)${string2regExp(config.type)}$`, 'i');
+      config.test ||
+      new RegExp(
+        `(^|\/)(?:${(config.alias || [])
+          .concat(config.type)
+          .map(type => string2regExp(type))
+          .join('|')})$`,
+        'i'
+      );
   }
 
-  config.weight = config.weight || 0;
-  config.Renderer = config.component;
-  config.name = config.name || config.type || `anonymous-${anonymousIndex++}`;
-
-  if (renderersMap[config.name]) {
+  const exists = renderersTypeMap[config.type || ''];
+  let renderer = {...config};
+  if (
+    exists &&
+    exists.component &&
+    exists.component !== Placeholder &&
+    config.component &&
+    !config.override
+  ) {
     throw new Error(
-      `The renderer with name "${config.name}" has already exists, please try another name!`
+      `The renderer with type "${config.type}" has already exists, please try another type!`
     );
-  } else if (renderersMap.hasOwnProperty(config.name)) {
-    // 后面补充的
-    const idx = findIndex(renderers, item => item.name === config.name);
-    ~idx && renderers.splice(idx, 0, config);
+  } else if (exists) {
+    // 如果已经存在，合并配置，并用合并后的配置
+    Object.assign(exists, config);
+    renderer = exists;
   }
 
-  if (config.storeType && config.component) {
-    config.component = HocStoreFactory({
-      storeType: config.storeType,
-      extendsData: config.storeExtendsData,
-      shouldSyncSuperStore: config.shouldSyncSuperStore
-    })(observer(config.component));
+  renderer.weight = renderer.weight || 0;
+  renderer.name =
+    renderer.name || renderer.type || `anonymous-${anonymousIndex++}`;
+
+  if (config.component) {
+    renderer.Renderer = config.component;
+    renderer.component = rendererToComponent(config.component, renderer);
   }
 
-  if (config.isolateScope) {
-    config.component = Scoped(config.component, config.type);
+  if (!exists) {
+    const idx = findIndex(
+      renderers,
+      item => (config.weight as number) < item.weight
+    );
+    ~idx ? renderers.splice(idx, 0, renderer) : renderers.push(renderer);
   }
-
-  const idx = findIndex(
-    renderers,
-    item => (config.weight as number) < item.weight
+  renderersMap[renderer.name] = !!(
+    renderer.component && renderer.component !== Placeholder
   );
-  ~idx ? renderers.splice(idx, 0, config) : renderers.push(config);
-  renderersMap[config.name] = config.component !== Placeholder;
-  return config;
+  renderer.type && (renderersTypeMap[renderer.type] = renderer);
+  (renderer.alias || []).forEach(alias => (renderersTypeMap[alias] = renderer));
+  return renderer;
 }
 
 export function unRegisterRenderer(config: RendererConfig | string) {
   const name = (typeof config === 'string' ? config : config.name)!;
   const idx = renderers.findIndex(item => item.name === name);
-  ~idx && renderers.splice(idx, 1);
-  delete renderersMap[name];
+  if (~idx) {
+    const renderer = renderers[idx];
+    renderers.splice(idx, 1);
 
-  // 清空渲染器定位缓存
-  cache = {};
+    delete renderersMap[name];
+    delete renderersTypeMap[renderer.type || ''];
+    renderer.alias?.forEach(alias => delete renderersTypeMap[alias]);
+
+    // 清空渲染器定位缓存
+    Object.keys(cache).forEach(key => {
+      const value = cache[key];
+      if (value === renderer) {
+        delete cache[key];
+      }
+    });
+  }
 }
 
-export function loadRenderer(schema: Schema, path: string) {
+export function loadRendererError(schema: Schema, path: string) {
   return (
     <div className="RuntimeError">
       <p>Error: 找不到对应的渲染器</p>
@@ -229,6 +289,65 @@ export function loadRenderer(schema: Schema, path: string) {
   );
 }
 
+export async function loadAsyncRenderer(renderer: RendererConfig) {
+  if (!isAsyncRenderer(renderer)) {
+    // already loaded
+    return;
+  }
+
+  const result = await renderer.getComponent!();
+
+  // 如果异步加载的组件没有注册渲染器
+  // 同时默认导出了一个组件，则自动注册
+  if (!renderer.component && result.default) {
+    registerRenderer({
+      ...renderer,
+      component: result.default
+    });
+  }
+}
+
+export function isAsyncRenderer(item: RendererConfig) {
+  return (
+    (!item.component || item.component === Placeholder) && item.getComponent
+  );
+}
+
+export function hasAsyncRenderers() {
+  return renderers.some(isAsyncRenderer);
+}
+
+export async function loadAsyncRenderersByType(
+  type: string | Array<string>,
+  ignore = false
+) {
+  const types = Array.isArray(type) ? type : [type];
+  const asyncRenderers = types
+    .map(type => {
+      const renderer = renderersTypeMap[type];
+      if (!renderer && !ignore) {
+        throw new Error(`Can not find the renderer by type: ${type}`);
+      }
+      return renderer;
+    })
+    .filter(isAsyncRenderer);
+
+  if (asyncRenderers.length) {
+    await Promise.all(asyncRenderers.map(item => loadAsyncRenderer(item)));
+  }
+}
+
+export async function loadAllAsyncRenderers() {
+  const asyncRenderers = renderers.filter(isAsyncRenderer);
+  if (asyncRenderers.length) {
+    await Promise.all(
+      renderers.map(async renderer => {
+        await loadAsyncRenderer(renderer);
+      })
+    );
+  }
+}
+
 export const defaultOptions: RenderOptions = {
   session: 'global',
   richTextToken: '',
@@ -237,7 +356,7 @@ export const defaultOptions: RenderOptions = {
     (window as any).enableAMISDebug ??
     location.search.indexOf('amisDebug=1') !== -1 ??
     false,
-  loadRenderer,
+  loadRenderer: loadRendererError,
   fetcher() {
     return Promise.reject('fetcher is required');
   },
@@ -435,8 +554,9 @@ export function resolveRenderer(
 ): null | RendererConfig {
   const type = typeof schema?.type == 'string' ? schema.type.toLowerCase() : '';
 
-  if (type && cache[type]) {
-    return cache[type];
+  // 直接匹配类型，后续注册渲染都应该用这个方式而不是之前的判断路径。
+  if (type && renderersTypeMap[type]) {
+    return renderersTypeMap[type];
   } else if (cache[path]) {
     return cache[path];
   } else if (path && path.length > 3072) {
@@ -448,15 +568,7 @@ export function resolveRenderer(
   renderers.some(item => {
     let matched = false;
 
-    // 直接匹配类型，后续注册渲染都应该用这个方式而不是之前的判断路径。
-    if (item.type && type) {
-      matched = item.type === type;
-
-      // 如果是type来命中的，那么cache的key直接用 type 即可。
-      if (matched) {
-        cache[type] = item;
-      }
-    } else if (typeof item.test === 'function') {
+    if (typeof item.test === 'function') {
       // 不应该搞得这么复杂的，让每个渲染器唯一 id，自己不晕别人用起来也不晕。
       matched = item.test(path, schema, resolveRenderer);
     } else if (item.test instanceof RegExp) {
diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx
index ed12e589a..de0bd599f 100644
--- a/packages/amis-core/src/index.tsx
+++ b/packages/amis-core/src/index.tsx
@@ -10,6 +10,9 @@ import {
   Renderer,
   getRendererByName,
   getRenderers,
+  loadAllAsyncRenderers,
+  loadAsyncRenderersByType,
+  loadAsyncRenderer,
   registerRenderer,
   unRegisterRenderer,
   resolveRenderer,
@@ -21,7 +24,12 @@ import {
   addSchemaFilter,
   extendDefaultEnv
 } from './factory';
-import type {RenderOptions, RendererConfig, RendererProps} from './factory';
+import type {
+  RenderOptions,
+  RendererConfig,
+  RendererProps,
+  hasAsyncRenderers
+} from './factory';
 import './polyfills';
 import './renderers/builtin';
 import './renderers/register';
@@ -137,6 +145,10 @@ export {
   registerRenderer,
   unRegisterRenderer,
   getRenderers,
+  loadAllAsyncRenderers,
+  loadAsyncRenderersByType,
+  loadAsyncRenderer,
+  hasAsyncRenderers,
   registerFormItem,
   getFormItemByName,
   registerOptionsControl,
diff --git a/packages/amis-core/src/store/root.ts b/packages/amis-core/src/store/root.ts
index 9fab49445..3d1feeb88 100644
--- a/packages/amis-core/src/store/root.ts
+++ b/packages/amis-core/src/store/root.ts
@@ -1,4 +1,4 @@
-import {Instance, types} from 'mobx-state-tree';
+import {flow, Instance, types} from 'mobx-state-tree';
 import {parseQuery} from '../utils/helper';
 import {ServiceStore} from './service';
 import {
@@ -11,7 +11,8 @@ export const RootStore = ServiceStore.named('RootStore')
   .props({
     runtimeError: types.frozen(),
     runtimeErrorStack: types.frozen(),
-    query: types.frozen()
+    query: types.frozen(),
+    ready: false
   })
   .volatile(self => {
     return {
@@ -37,22 +38,37 @@ export const RootStore = ServiceStore.named('RootStore')
       return result;
     }
   }))
-  .actions(self => ({
-    updateContext(context: any) {
-      // 因为 context 不是受控属性，直接共用引用好了
-      // 否则还会触发孩子节点的重新渲染
-      Object.assign(self.context, context);
-    },
-    setRuntimeError(error: any, errorStack: any) {
-      self.runtimeError = error;
-      self.runtimeErrorStack = errorStack;
-    },
-    updateLocation(location?: any, parseFn?: Function) {
-      const query = parseFn ? parseFn(location) : parseQuery(location);
-      if (isObjectShallowModified(query, self.query, false)) {
-        self.query = query;
+  .actions(self => {
+    const init: (schema: any) => Promise<any> = flow(function* init(
+      fn: () => Promise<any>
+    ) {
+      try {
+        const ret: any = fn();
+        if (ret?.then) {
+          yield ret;
+        }
+      } finally {
+        self.ready = true;
       }
-    }
-  }));
+    });
+    return {
+      updateContext(context: any) {
+        // 因为 context 不是受控属性，直接共用引用好了
+        // 否则还会触发孩子节点的重新渲染
+        Object.assign(self.context, context);
+      },
+      setRuntimeError(error: any, errorStack: any) {
+        self.runtimeError = error;
+        self.runtimeErrorStack = errorStack;
+      },
+      updateLocation(location?: any, parseFn?: Function) {
+        const query = parseFn ? parseFn(location) : parseQuery(location);
+        if (isObjectShallowModified(query, self.query, false)) {
+          self.query = query;
+        }
+      },
+      init: init
+    };
+  });
 
 export type IRootStore = Instance<typeof RootStore>;
diff --git a/packages/amis-editor-core/rollup.config.js b/packages/amis-editor-core/rollup.config.js
index 9aea13bd9..47e7bd628 100644
--- a/packages/amis-editor-core/rollup.config.js
+++ b/packages/amis-editor-core/rollup.config.js
@@ -99,7 +99,7 @@ function transpileDynamicImportForCJS(options) {
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
         right:
-          '], function(mod) {fullfill(require("tslib").__importStar(mod))})})})'
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
diff --git a/packages/amis-editor-core/src/component/CommonConfigWrapper.tsx b/packages/amis-editor-core/src/component/CommonConfigWrapper.tsx
index ee17a0766..d38ef69e9 100644
--- a/packages/amis-editor-core/src/component/CommonConfigWrapper.tsx
+++ b/packages/amis-editor-core/src/component/CommonConfigWrapper.tsx
@@ -63,9 +63,10 @@ export class CommonConfigWrapper extends NodeWrapper {
         $$editor
       );
     }
+    const Component = renderer.component!;
 
     return (
-      <renderer.component
+      <Component
         {...rest}
         store={store}
         $schema={$schema}
diff --git a/packages/amis-editor-core/src/component/FormConfigWrapper.tsx b/packages/amis-editor-core/src/component/FormConfigWrapper.tsx
index cc55be283..08d71235b 100644
--- a/packages/amis-editor-core/src/component/FormConfigWrapper.tsx
+++ b/packages/amis-editor-core/src/component/FormConfigWrapper.tsx
@@ -63,9 +63,10 @@ export class FormConfigWrapper extends NodeWrapper {
         $$editor
       );
     }
+    const Component = renderer.component!;
 
     return (
-      <renderer.component
+      <Component
         {...rest}
         store={store}
         $schema={$schema}
diff --git a/packages/amis-editor-core/src/component/NodeWrapper.tsx b/packages/amis-editor-core/src/component/NodeWrapper.tsx
index b3a5a200c..bfb67f6cd 100644
--- a/packages/amis-editor-core/src/component/NodeWrapper.tsx
+++ b/packages/amis-editor-core/src/component/NodeWrapper.tsx
@@ -103,13 +103,14 @@ export class NodeWrapper extends React.Component<NodeWrapperProps> {
         $$editor
       );
     }
+    const Component = renderer.component!;
 
     const supportRef =
-      renderer.component.prototype?.isReactComponent ||
-      (renderer.component as any).$$typeof === Symbol.for('react.forward_ref');
+      Component.prototype?.isReactComponent ||
+      (Component as any).$$typeof === Symbol.for('react.forward_ref');
 
     return (
-      <renderer.component
+      <Component
         {...rest}
         store={store}
         {...$$node?.state}
diff --git a/packages/amis-editor-core/src/component/Preview.tsx b/packages/amis-editor-core/src/component/Preview.tsx
index 4bfb4ea79..3c49af71a 100644
--- a/packages/amis-editor-core/src/component/Preview.tsx
+++ b/packages/amis-editor-core/src/component/Preview.tsx
@@ -1,4 +1,12 @@
-import {render, toast, resolveRenderer, Modal, Icon, resizeSensor} from 'amis';
+import {
+  render,
+  toast,
+  resolveRenderer,
+  Modal,
+  Icon,
+  resizeSensor,
+  Spinner
+} from 'amis';
 import React, {Component} from 'react';
 import cx from 'classnames';
 import {autobind, guid, noop, reactionWithOldValue} from '../util';
@@ -553,7 +561,11 @@ export default class Preview extends Component<PreviewProps> {
           ref={this.contentsRef}
         >
           <div className="ae-Preview-inner">
-            {isMobile ? (
+            {!store.ready ? (
+              <div className="ae-Preview-loading">
+                <Spinner overlay size="lg" />
+              </div>
+            ) : isMobile ? (
               <IFramePreview
                 {...rest}
                 key="mobile"
diff --git a/packages/amis-editor-core/src/component/factory.tsx b/packages/amis-editor-core/src/component/factory.tsx
index 5ee81561d..52059d7f9 100644
--- a/packages/amis-editor-core/src/component/factory.tsx
+++ b/packages/amis-editor-core/src/component/factory.tsx
@@ -33,7 +33,7 @@ export function makeWrapper(
     $$id: string;
   };
   const store = manager.store;
-  const renderer = rendererConfig.component;
+  const renderer = rendererConfig.component!;
 
   @observer
   class Wrapper extends React.Component<Props> {
diff --git a/packages/amis-editor-core/src/manager.ts b/packages/amis-editor-core/src/manager.ts
index 57492bbab..5a918aa35 100644
--- a/packages/amis-editor-core/src/manager.ts
+++ b/packages/amis-editor-core/src/manager.ts
@@ -70,6 +70,7 @@ import {VariableManager} from './variable';
 import type {IScopedContext} from 'amis';
 import type {SchemaObject, SchemaCollection} from 'amis';
 import type {RendererConfig} from 'amis-core';
+import {loadAsyncRenderer} from 'amis-core';
 
 export interface EditorManagerConfig
   extends Omit<EditorProps, 'value' | 'onChange'> {}
@@ -1902,12 +1903,15 @@ export class EditorManager {
   /**
    * 把设置了特殊 region 的，hack 一下。
    */
-  hackRenderers(renderers = getRenderers()) {
+  async hackRenderers(renderers = getRenderers()) {
     const toHackList: Array<{
       renderer: RendererConfig;
       regions?: Array<RegionConfig>;
       overrides?: any;
     }> = [];
+
+    await Promise.all(renderers.map(renderer => loadAsyncRenderer(renderer)));
+
     renderers.forEach(renderer => {
       const plugins = this.plugins.filter(
         plugin =>
@@ -1950,6 +1954,8 @@ export class EditorManager {
     toHackList.forEach(({regions, renderer, overrides}) =>
       this.hackIn(renderer, regions, overrides)
     );
+
+    this.store.markReady();
   }
 
   /**
diff --git a/packages/amis-editor-core/src/store/editor.ts b/packages/amis-editor-core/src/store/editor.ts
index 2573b8ddb..a044ae575 100644
--- a/packages/amis-editor-core/src/store/editor.ts
+++ b/packages/amis-editor-core/src/store/editor.ts
@@ -147,6 +147,7 @@ export type EditorModalBody = (DialogSchema | DrawerSchema) & {
 
 export const MainStore = types
   .model('EditorRoot', {
+    ready: false, // 异步组件加载前不可用
     isMobile: false,
     isSubEditor: false,
     // 用于自定义爱速搭中的 amis 文档路径
@@ -1100,6 +1101,9 @@ export const MainStore = types
     });
 
     return {
+      markReady() {
+        self.ready = true;
+      },
       setLayer(value: any) {
         layer = value;
       },
diff --git a/packages/amis-editor/rollup.config.js b/packages/amis-editor/rollup.config.js
index dd4d26798..4c898fde9 100644
--- a/packages/amis-editor/rollup.config.js
+++ b/packages/amis-editor/rollup.config.js
@@ -24,7 +24,9 @@ const i18nConfig = require('./i18nConfig');
 const settings = {
   globals: {},
   commonConfig: {
-    footer: `window.amisEditorVersionInfo={version:'${version}',buildTime:'${moment().format("YYYY-MM-DD")}'};`,
+    footer: `window.amisEditorVersionInfo={version:'${version}',buildTime:'${moment().format(
+      'YYYY-MM-DD'
+    )}'};`
   }
 };
 
@@ -87,7 +89,7 @@ function transpileDynamicImportForCJS(options) {
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
         right:
-          '], function(mod) {fullfill(require("tslib").__importStar(mod))})})})'
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
diff --git a/packages/amis-theme-editor-helper/rollup.config.js b/packages/amis-theme-editor-helper/rollup.config.js
index ec931e3f5..1aa0e7e68 100644
--- a/packages/amis-theme-editor-helper/rollup.config.js
+++ b/packages/amis-theme-editor-helper/rollup.config.js
@@ -82,7 +82,7 @@ function transpileDynamicImportForCJS(options) {
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
         right:
-          '], function(mod) {fullfill(require("tslib").__importStar(mod))})})})'
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
diff --git a/packages/amis-ui/rollup.config.js b/packages/amis-ui/rollup.config.js
index ae15fb0ac..b5bfe4c09 100644
--- a/packages/amis-ui/rollup.config.js
+++ b/packages/amis-ui/rollup.config.js
@@ -133,7 +133,8 @@ function transpileDynamicImportForCJS(options) {
 
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
-        right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
+        right:
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
diff --git a/packages/amis-ui/scss/components/_spinner.scss b/packages/amis-ui/scss/components/_spinner.scss
index 36537a14b..3ba70018b 100644
--- a/packages/amis-ui/scss/components/_spinner.scss
+++ b/packages/amis-ui/scss/components/_spinner.scss
@@ -200,3 +200,15 @@
   z-index: -999;
   opacity: 0;
 }
+
+.#{$ns}RootLoader {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  .#{$ns}Spinner-icon {
+    width: var(--Spinner-width);
+    height: var(--Spinner-height);
+  }
+}
diff --git a/packages/amis-ui/src/components/AnchorNavSection.tsx b/packages/amis-ui/src/components/AnchorNavSection.tsx
new file mode 100644
index 000000000..1aad643bd
--- /dev/null
+++ b/packages/amis-ui/src/components/AnchorNavSection.tsx
@@ -0,0 +1,3 @@
+import {AnchorNavSection} from './AnchorNav';
+
+export default AnchorNavSection;
diff --git a/packages/amis-ui/src/components/AutoSizer.tsx b/packages/amis-ui/src/components/AutoSizer.tsx
new file mode 100644
index 000000000..7851fd090
--- /dev/null
+++ b/packages/amis-ui/src/components/AutoSizer.tsx
@@ -0,0 +1,2 @@
+import {AutoSizer} from './virtual-list';
+export default AutoSizer;
diff --git a/packages/amis-ui/src/components/Badge.tsx b/packages/amis-ui/src/components/Badge.tsx
index 56244b8d0..b327d1f08 100644
--- a/packages/amis-ui/src/components/Badge.tsx
+++ b/packages/amis-ui/src/components/Badge.tsx
@@ -279,6 +279,8 @@ export class Badge extends React.Component<BadgeProps, object> {
   }
 }
 
+export default Badge;
+
 export function withBadge<P extends object>(Component: React.ComponentType<P>) {
   return hoistNonReactStatic(
     class WithBadge extends React.Component<P & BadgeProps> {
diff --git a/packages/amis-ui/src/components/ConditionBuilder.tsx b/packages/amis-ui/src/components/ConditionBuilder.tsx
new file mode 100644
index 000000000..dd60a258f
--- /dev/null
+++ b/packages/amis-ui/src/components/ConditionBuilder.tsx
@@ -0,0 +1,3 @@
+import ConditionBuilder from './condition-builder/index';
+
+export default ConditionBuilder;
diff --git a/packages/amis-ui/src/components/FormulaPicker.tsx b/packages/amis-ui/src/components/FormulaPicker.tsx
new file mode 100644
index 000000000..e404cf352
--- /dev/null
+++ b/packages/amis-ui/src/components/FormulaPicker.tsx
@@ -0,0 +1,2 @@
+import FormulaPicker from './formula/Picker';
+export default FormulaPicker;
diff --git a/packages/amis-ui/src/components/GridNavItem.tsx b/packages/amis-ui/src/components/GridNavItem.tsx
new file mode 100644
index 000000000..ef0cae6f7
--- /dev/null
+++ b/packages/amis-ui/src/components/GridNavItem.tsx
@@ -0,0 +1,3 @@
+import {GridNavItem} from './GridNav';
+
+export default GridNavItem;
diff --git a/packages/amis-ui/src/components/HeadCellDropDown.tsx b/packages/amis-ui/src/components/HeadCellDropDown.tsx
new file mode 100644
index 000000000..785c38cba
--- /dev/null
+++ b/packages/amis-ui/src/components/HeadCellDropDown.tsx
@@ -0,0 +1,2 @@
+import HeadCellDropDown from './table/HeadCellDropDown';
+export default HeadCellDropDown;
diff --git a/packages/amis-ui/src/components/Icon.tsx b/packages/amis-ui/src/components/Icon.tsx
new file mode 100644
index 000000000..a2287b5f8
--- /dev/null
+++ b/packages/amis-ui/src/components/Icon.tsx
@@ -0,0 +1,3 @@
+import Icon from './icons';
+
+export default Icon;
diff --git a/packages/amis-ui/src/components/InputJSONSchema.tsx b/packages/amis-ui/src/components/InputJSONSchema.tsx
new file mode 100644
index 000000000..7beec6905
--- /dev/null
+++ b/packages/amis-ui/src/components/InputJSONSchema.tsx
@@ -0,0 +1,3 @@
+import InputJSONSchema from './json-schema';
+
+export default InputJSONSchema;
diff --git a/packages/amis-ui/src/components/JSONSchemaEditor.tsx b/packages/amis-ui/src/components/JSONSchemaEditor.tsx
new file mode 100644
index 000000000..1460b0a50
--- /dev/null
+++ b/packages/amis-ui/src/components/JSONSchemaEditor.tsx
@@ -0,0 +1,3 @@
+import JSONSchemaEditor from './schema-editor';
+
+export default JSONSchemaEditor;
diff --git a/packages/amis-ui/src/components/Tab.tsx b/packages/amis-ui/src/components/Tab.tsx
new file mode 100644
index 000000000..ab4418a9b
--- /dev/null
+++ b/packages/amis-ui/src/components/Tab.tsx
@@ -0,0 +1,3 @@
+import {Tab} from './Tabs';
+
+export default Tab;
diff --git a/packages/amis-ui/src/components/VirtualList.tsx b/packages/amis-ui/src/components/VirtualList.tsx
new file mode 100644
index 000000000..6fbb2d56f
--- /dev/null
+++ b/packages/amis-ui/src/components/VirtualList.tsx
@@ -0,0 +1,3 @@
+import VirtualList from './virtual-list';
+
+export default VirtualList;
diff --git a/packages/amis-ui/src/components/WithStore.tsx b/packages/amis-ui/src/components/WithStore.tsx
index 41b2709a1..fcec9311e 100644
--- a/packages/amis-ui/src/components/WithStore.tsx
+++ b/packages/amis-ui/src/components/WithStore.tsx
@@ -71,3 +71,5 @@ export function withStore<K extends IAnyStateTreeNode>(
     };
   };
 }
+
+export default withStore;
diff --git a/packages/amis-ui/src/components/icons.tsx b/packages/amis-ui/src/components/icons.tsx
index 2a6b1e3b8..152526c7d 100644
--- a/packages/amis-ui/src/components/icons.tsx
+++ b/packages/amis-ui/src/components/icons.tsx
@@ -467,6 +467,8 @@ export function Icon({
   return <span className="text-danger">没有 icon {icon}</span>;
 }
 
+export default Icon;
+
 export {
   InputClearIcon,
   CloseIcon,
diff --git a/packages/amis-ui/src/components/index.tsx b/packages/amis-ui/src/components/index.tsx
index 81a6a50ee..5de4f3ed6 100644
--- a/packages/amis-ui/src/components/index.tsx
+++ b/packages/amis-ui/src/components/index.tsx
@@ -27,7 +27,8 @@ import CollapseGroup from './CollapseGroup';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
 import Drawer from './Drawer';
-import {default as Tabs, Tab} from './Tabs';
+import Tabs from './Tabs';
+import Tab from './Tab';
 import Editor from './Editor';
 import Html from './Html';
 export * from './icons';
@@ -60,7 +61,8 @@ import ListGroup from './ListGroup';
 import NumberInput from './NumberInput';
 import ArrayInput from './ArrayInput';
 import SearchBox from './SearchBox';
-import AnchorNav, {AnchorNavSection} from './AnchorNav';
+import AnchorNav from './AnchorNav';
+import AnchorNavSection from './AnchorNavSection';
 import Selection from './Selection';
 import GroupedSelection from './GroupedSelection';
 import ChainedSelection from './ChainedSelection';
@@ -72,18 +74,20 @@ import Table from './table';
 import SchemaVariableListPicker from './schema-editor/SchemaVariableListPicker';
 import SchemaVariableList from './schema-editor/SchemaVariableList';
 import VariableList from './formula/VariableList';
-import FormulaPicker from './formula/Picker';
+import FormulaPicker from './FormulaPicker';
 import {FormulaEditor} from './formula/Editor';
 import FormulaCodeEditor from './formula/CodeEditor';
 import type {VariableItem, FuncGroup} from './formula/CodeEditor';
 import PickerContainer from './PickerContainer';
-import InputJSONSchema from './json-schema';
-import {Badge, withBadge} from './Badge';
+import InputJSONSchema from './InputJSONSchema';
+import Badge from './Badge';
+import withBadge from './withBadge';
 import type {BadgeObject} from './Badge';
-import {getIcon, getIconNames, Icon, registerIcon} from './icons';
+import {getIcon, getIconNames, registerIcon} from './icons';
+import Icon from './Icon';
 import {withRemoteConfig} from './WithRemoteConfig';
 import type {RemoteOptionsProps} from './WithRemoteConfig';
-import ConditionBuilder from './condition-builder';
+import ConditionBuilder from './ConditionBuilder';
 import type {
   ConditionBuilderFields,
   ConditionBuilderFuncs
@@ -93,7 +97,7 @@ import CityArea from './CityArea';
 import type {PresetColor} from './ColorPicker';
 import ListMenu from './ListMenu';
 import Input from './Input';
-import JSONSchemaEditor from './schema-editor';
+import JSONSchemaEditor from './JSONSchemaEditor';
 import LocationPicker from './LocationPicker';
 import PopUp from './PopUp';
 import Cascader from './Cascader';
@@ -103,13 +107,15 @@ import ResultList from './ResultList';
 import TransferPicker from './TransferPicker';
 import UserSelect from './UserSelect';
 import UserTabSelect from './UserTabSelect';
-import HeadCellDropDown from './table/HeadCellDropDown';
+import HeadCellDropDown from './HeadCellDropDown';
 import Card from './Card';
-import GridNav, {GridNavItem} from './GridNav';
+import GridNav from './GridNav';
+import GridNavItem from './GridNavItem';
 import type {GridNavDirection} from './GridNav';
 import Link from './Link';
-import VirtualList, {AutoSizer} from './virtual-list';
-import {withStore} from './WithStore';
+import VirtualList from './VirtualList';
+import AutoSizer from './AutoSizer';
+import withStore from './WithStore';
 import PopOverContainer from './PopOverContainer';
 import Pagination from './Pagination';
 import Progress from './Progress';
@@ -179,6 +185,7 @@ export {
   Textarea,
   TitleBar,
   ToastComponent,
+  ToastComponent as Toast,
   toast,
   Tooltip,
   TooltipWrapper,
diff --git a/packages/amis-ui/src/components/withBadge.tsx b/packages/amis-ui/src/components/withBadge.tsx
new file mode 100644
index 000000000..ac3b635b2
--- /dev/null
+++ b/packages/amis-ui/src/components/withBadge.tsx
@@ -0,0 +1,3 @@
+import {withBadge} from './Badge';
+
+export default withBadge;
diff --git a/packages/amis-ui/src/index.tsx b/packages/amis-ui/src/index.tsx
index e460066be..27d93b6dd 100644
--- a/packages/amis-ui/src/index.tsx
+++ b/packages/amis-ui/src/index.tsx
@@ -11,5 +11,6 @@ import './themes/dark';
 import './themes/default';
 import type {SchemaEditorItemPlaceholder} from './components/schema-editor/Common';
 import {schemaEditorItemPlaceholder} from './components/schema-editor/Common';
+import withStore from './withStore';
 
-export {schemaEditorItemPlaceholder, SchemaEditorItemPlaceholder};
+export {schemaEditorItemPlaceholder, SchemaEditorItemPlaceholder, withStore};
diff --git a/packages/amis-ui/src/withStore.ts b/packages/amis-ui/src/withStore.ts
new file mode 100644
index 000000000..de040c44e
--- /dev/null
+++ b/packages/amis-ui/src/withStore.ts
@@ -0,0 +1,2 @@
+import withStore from './components/WithStore';
+export default withStore;
diff --git a/packages/amis-ui/tsconfig.json b/packages/amis-ui/tsconfig.json
index be506fefd..fd8d3a871 100644
--- a/packages/amis-ui/tsconfig.json
+++ b/packages/amis-ui/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "rootDir": "./",
     "outDir": "./lib",
+    "sourceRoot": "./",
     "typeRoots": [
       "../../types",
       "./node_modules/@types",
diff --git a/packages/amis/__tests__/helper.tsx b/packages/amis/__tests__/helper.tsx
index 058ccced4..0048cd2e2 100644
--- a/packages/amis/__tests__/helper.tsx
+++ b/packages/amis/__tests__/helper.tsx
@@ -1,5 +1,6 @@
 import {waitFor} from '@testing-library/react';
 import {RenderOptions} from '../src';
+import '../src';
 
 // jest.useFakeTimers 会修改 global 的 setTimeout 所以需要把原始的记录下来。
 const timerFn = (global as any).originSetTimeout || setTimeout;
diff --git a/packages/amis/package.json b/packages/amis/package.json
index cac5523a6..ababcbc66 100644
--- a/packages/amis/package.json
+++ b/packages/amis/package.json
@@ -37,8 +37,8 @@
     }
   ],
   "dependencies": {
-    "amis-core": "^6.8.0",
-    "amis-ui": "^6.8.0",
+    "amis-core": "*",
+    "amis-ui": "*",
     "attr-accept": "2.2.2",
     "blueimp-canvastoblob": "2.1.0",
     "classnames": "2.3.2",
@@ -62,7 +62,7 @@
     "moment": "^2.19.4",
     "moment-timezone": "^0.5.34",
     "mpegts.js": "^1.6.10",
-    "office-viewer": "^0.3.14",
+    "office-viewer": "*",
     "prop-types": "^15.6.1",
     "qrcode.react": "^3.1.0",
     "react-cropper": "^2.1.8",
@@ -110,6 +110,7 @@
     "@types/sortablejs": "^1.3.32",
     "@types/tinymce": "^4.5.24",
     "axios": "0.25.0",
+    "babel-plugin-import": "^1.13.8",
     "bce-sdk-js": "^0.2.9",
     "concurrently": "^7.3.0",
     "copy-to-clipboard": "3.3.1",
@@ -140,6 +141,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
     "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-license": "^2.7.0",
     "ts-jest": "^29.0.2",
     "ts-json-schema-generator": "0.96.0",
@@ -222,7 +224,9 @@
       "\\.(css|less|sass|scss)$": "<rootDir>/../../__mocks__/styleMock.js",
       "\\.(svg)$": "<rootDir>/../../__mocks__/svgMock.js",
       "\\.svg\\.js$": "<rootDir>/../../__mocks__/svgJsMock.js",
-      "^amis\\-ui$": "<rootDir>/../amis-ui/src/index.tsx"
+      "^amis\\-core$": "<rootDir>/../amis-core/src/index.tsx",
+      "^amis\\-ui$": "<rootDir>/../amis-ui/src/index.tsx",
+      "^amis\\-ui/lib/(.*)$": "<rootDir>/../amis-ui/src/$1"
     },
     "setupFilesAfterEnv": [
       "<rootDir>/../amis-core/__tests__/jest.setup.js"
diff --git a/packages/amis/rollup.config.js b/packages/amis/rollup.config.js
index 7c6f51f8d..cee3acf53 100644
--- a/packages/amis/rollup.config.js
+++ b/packages/amis/rollup.config.js
@@ -16,11 +16,14 @@ import {
 import path from 'path';
 import svgr from '@svgr/rollup';
 import moment from 'moment';
+import babel from 'rollup-plugin-babel';
 
 const settings = {
   globals: {},
   commonConfig: {
-    footer: `window.amisVersionInfo={version:'${version}',buildTime:'${moment().format("YYYY-MM-DD")}'};`,
+    footer: `window.amisVersionInfo={version:'${version}',buildTime:'${moment().format(
+      'YYYY-MM-DD'
+    )}'};`
   }
 };
 
@@ -106,7 +109,8 @@ function transpileDynamicImportForCJS(options) {
 
       return {
         left: 'Promise.resolve().then(function() {return new Promise(function(fullfill) {require([',
-        right: '], function(mod) {fullfill(tslib.__importStar(mod))})})})'
+        right:
+          ', "tslib"], function(mod, tslib) {fullfill(tslib.__importStar(mod))})})})'
       };
 
       // return {
@@ -202,6 +206,39 @@ function getPlugins(format = 'esm') {
       jsnext: true,
       main: true
     }),
+    format === 'esm'
+      ? null
+      : babel({
+          exclude: 'node_modules/**',
+          extensions: ['.jsx', '.tsx', '.js', '.ts'],
+          plugins: [
+            [
+              'import',
+              {
+                libraryName: 'amis-ui',
+                libraryDirectory: 'lib',
+                camel2DashComponentName: false,
+                customName: (name, file) => {
+                  if (
+                    ['alert', 'confirm', 'setRenderSchemaFn'].includes(name)
+                  ) {
+                    return `amis-ui/lib/components/Alert`;
+                  } else if (['toast'].includes(name)) {
+                    return `amis-ui/lib/components/Toast`;
+                  } else if ('NotFound' === name) {
+                    return `amis-ui/lib/components/404`;
+                  } else if ('withStore' === name) {
+                    return `amis-ui/lib/${name}`;
+                  } /* else if (name[0].toUpperCase() === name[0]) {
+                    return `amis-ui/lib/components/${name}`;
+                  }*/
+                  return `amis-ui/lib/components/${name}`;
+                }
+              },
+              'amis-ui'
+            ]
+          ]
+        }),
     typescript(typeScriptOptions),
     commonjs({
       sourceMap: false
diff --git a/packages/amis/src/index.tsx b/packages/amis/src/index.tsx
index c974622e0..ab15a6521 100644
--- a/packages/amis/src/index.tsx
+++ b/packages/amis/src/index.tsx
@@ -7,159 +7,8 @@
  */
 export * from 'amis-core';
 export * from 'amis-ui';
+import './minimal';
 
-import './preset';
-
-// 注册渲染器
-import './renderers/Action';
-import './renderers/Alert';
-import './renderers/App';
-import './renderers/Avatar';
-import './renderers/Remark';
-import './renderers/ButtonGroup';
-import './renderers/Form/ButtonToolbar';
-import './renderers/Breadcrumb';
-import './renderers/DropDownButton';
-import './renderers/Calendar';
-import './renderers/Collapse';
-import './renderers/CollapseGroup';
-import './renderers/Color';
-import './renderers/CRUD';
-import './renderers/CRUD2';
-import './renderers/Pagination';
-import './renderers/Cards';
-import './renderers/Card';
-import './renderers/Card2';
-import './renderers/Custom';
-import './renderers/Date';
-import './renderers/Dialog';
-import './renderers/Divider';
-import './renderers/Each';
-import './renderers/Flex';
-import './renderers/Form/Control';
-import './renderers/Form/Hidden';
-import './renderers/Form/InputText';
-import './renderers/Form/InputTag';
-import './renderers/Form/InputNumber';
-import './renderers/Form/Textarea';
-import './renderers/Form/Checkboxes';
-import './renderers/Form/Checkbox';
-import './renderers/Form/InputCity';
-import './renderers/Form/ChartRadios';
-import './renderers/Form/InputRating';
-import './renderers/Form/Switch';
-import './renderers/Form/Radios';
-import './renderers/Form/Radio';
-import './renderers/Form/JSONSchema';
-import './renderers/Form/JSONSchemaEditor';
-import './renderers/Form/ListSelect';
-import './renderers/Form/LocationPicker';
-import './renderers/Form/Select';
-import './renderers/Form/Static';
-import './renderers/Form/InputDate';
-import './renderers/Form/InputDateRange';
-import './renderers/Form/InputFormula';
-import './renderers/Form/InputRepeat';
-import './renderers/Form/InputTree';
-import './renderers/Form/TreeSelect';
-import './renderers/Form/InputImage';
-import './renderers/Form/InputFile';
-import './renderers/Form/UUID';
-import './renderers/Form/MatrixCheckboxes';
-import './renderers/Form/InputMonthRange';
-import './renderers/Form/InputQuarterRange';
-import './renderers/Form/InputYearRange';
-import './renderers/Form/InputRange';
-import './renderers/Form/InputArray';
-import './renderers/Form/Combo';
-import './renderers/Form/ConditionBuilder';
-import './renderers/Form/InputSubForm';
-import './renderers/Form/InputExcel';
-import './renderers/Form/InputRichText';
-import './renderers/Form/Editor';
-import './renderers/Form/DiffEditor';
-import './renderers/Form/InputColor';
-import './renderers/Form/ChainedSelect';
-import './renderers/Form/NestedSelect';
-import './renderers/Form/Transfer';
-import './renderers/Form/TransferPicker';
-import './renderers/Form/InputTable';
-import './renderers/Form/Picker';
-import './renderers/Form/IconPicker';
-import './renderers/Form/IconSelect';
-import './renderers/Form/Formula';
-import './renderers/Form/FieldSet';
-import './renderers/Form/TabsTransfer';
-import './renderers/Form/TabsTransferPicker';
-import './renderers/Form/Group';
-import './renderers/Form/InputGroup';
-import './renderers/Form/UserSelect';
-import './renderers/Form/InputSignature';
-import './renderers/Form/InputVerificationCode';
-import './renderers/Grid';
-import './renderers/Grid2D';
-import './renderers/HBox';
-import './renderers/VBox';
-import './renderers/Image';
-import './renderers/Images';
-import './renderers/List';
-import './renderers/Log';
-import './renderers/Operation';
-import './renderers/Page';
-import './renderers/PaginationWrapper';
-import './renderers/Panel';
-import './renderers/Plain';
-import './renderers/Property';
-import './renderers/Portlet';
-import './renderers/Spinner';
-import './renderers/Table/index';
-import './renderers/Tabs';
-import './renderers/Tpl';
-import './renderers/Mapping';
-import './renderers/Progress';
-import './renderers/Status';
-import './renderers/Json';
-import './renderers/Link';
-import './renderers/Wizard';
-import './renderers/Chart';
-import './renderers/Container';
-import './renderers/SwitchContainer';
-import './renderers/SearchBox';
-import './renderers/Service';
-import './renderers/SparkLine';
-import './renderers/Video';
-import './renderers/Audio';
-import './renderers/Nav';
-import './renderers/Number';
-import './renderers/Tasks';
-import './renderers/Drawer';
-import './renderers/Wrapper';
-import './renderers/IFrame';
-import './renderers/BarCode';
-import './renderers/QRCode';
-import './renderers/Icon';
-import './renderers/Carousel';
-import './renderers/AnchorNav';
-import './renderers/Steps';
-import './renderers/Timeline';
-import './renderers/Markdown';
-import './renderers/TableView';
-import './renderers/Code';
-import './renderers/WebComponent';
-import './renderers/GridNav';
-import './renderers/TooltipWrapper';
-import './renderers/Tag';
-import './renderers/Table2/index';
-import './renderers/Words';
-import './renderers/Password';
-import './renderers/DateRange';
-import './renderers/MultilineText';
-import './renderers/OfficeViewer';
-import './renderers/PdfViewer';
-import './renderers/AMIS';
-
-import './compat';
-import './schemaExtend';
 import type {
   BaseSchema,
   FormSchema,
diff --git a/packages/amis/src/minimal.ts b/packages/amis/src/minimal.ts
new file mode 100644
index 000000000..adbc35715
--- /dev/null
+++ b/packages/amis/src/minimal.ts
@@ -0,0 +1,822 @@
+/**
+ * 只包含 amis 最小集，不引入其他模块
+ */
+import {registerRenderer} from 'amis-core';
+import './preset';
+
+// 注册渲染器
+
+// import './renderers/Action';
+registerRenderer({
+  type: 'action',
+  alias: ['button', 'submit', 'reset'],
+  getComponent: () => import('./renderers/Action')
+});
+
+// import './renderers/Alert';
+registerRenderer({
+  type: 'alert',
+  getComponent: () => import('./renderers/Alert')
+});
+
+// import './renderers/App';
+registerRenderer({
+  type: 'app',
+  getComponent: () => import('./renderers/App')
+});
+
+// import './renderers/Avatar';
+registerRenderer({
+  type: 'avatar',
+  getComponent: () => import('./renderers/Avatar')
+});
+
+// import './renderers/Remark';
+registerRenderer({
+  type: 'remark',
+  getComponent: () => import('./renderers/Remark')
+});
+
+// import './renderers/ButtonGroup';
+registerRenderer({
+  type: 'button-group',
+  getComponent: () => import('./renderers/ButtonGroup')
+});
+// import './renderers/Form/ButtonToolbar';
+registerRenderer({
+  type: 'button-toolbar',
+  getComponent: () => import('./renderers/Form/ButtonToolbar')
+});
+
+// import './renderers/Breadcrumb';
+registerRenderer({
+  type: 'breadcrumb',
+  getComponent: () => import('./renderers/Breadcrumb')
+});
+// import './renderers/DropDownButton';
+registerRenderer({
+  type: 'dropdown-button',
+  getComponent: () => import('./renderers/DropDownButton')
+});
+
+// import './renderers/Calendar';
+registerRenderer({
+  type: 'calendar',
+  getComponent: () => import('./renderers/Calendar')
+});
+
+// import './renderers/Collapse';
+registerRenderer({
+  type: 'collapse',
+  getComponent: () => import('./renderers/Collapse')
+});
+// import './renderers/CollapseGroup';
+registerRenderer({
+  type: 'collapse-group',
+  getComponent: () => import('./renderers/CollapseGroup')
+});
+// import './renderers/Color';
+registerRenderer({
+  type: 'color',
+  getComponent: () => import('./renderers/Color')
+});
+
+// import './renderers/CRUD';
+registerRenderer({
+  type: 'crud',
+  getComponent: () => import('./renderers/CRUD')
+});
+
+// import './renderers/CRUD2';
+registerRenderer({
+  type: 'crud2',
+  getComponent: () => import('./renderers/CRUD2')
+});
+
+// import './renderers/Pagination';
+registerRenderer({
+  type: 'pagination',
+  alias: ['pager'],
+  getComponent: () => import('./renderers/Pagination')
+});
+// import './renderers/Cards';
+registerRenderer({
+  type: 'cards',
+  getComponent: () => import('./renderers/Cards')
+});
+// import './renderers/Card';
+registerRenderer({
+  type: 'card',
+  getComponent: () => import('./renderers/Card')
+});
+// import './renderers/Card2';
+registerRenderer({
+  type: 'card2',
+  getComponent: () => import('./renderers/Card2')
+});
+// import './renderers/Custom';
+registerRenderer({
+  type: 'custom',
+  getComponent: () => import('./renderers/Custom')
+});
+// import './renderers/Date';
+registerRenderer({
+  type: 'date',
+  getComponent: () => import('./renderers/Date')
+});
+registerRenderer({
+  type: 'datetime',
+  getComponent: () => import('./renderers/Date')
+});
+registerRenderer({
+  type: 'time',
+  getComponent: () => import('./renderers/Date')
+});
+registerRenderer({
+  type: 'month',
+  getComponent: () => import('./renderers/Date')
+});
+// import './renderers/Dialog';
+registerRenderer({
+  type: 'dialog',
+  getComponent: () => import('./renderers/Dialog')
+});
+// import './renderers/Divider';
+registerRenderer({
+  type: 'divider',
+  getComponent: () => import('./renderers/Divider')
+});
+// import './renderers/Each';
+registerRenderer({
+  type: 'each',
+  getComponent: () => import('./renderers/Each')
+});
+// import './renderers/Flex';
+registerRenderer({
+  type: 'flex',
+  getComponent: () => import('./renderers/Flex')
+});
+// import './renderers/Form/ButtonGroupSelect';
+registerRenderer({
+  type: 'button-group-select',
+  getComponent: () => import('./renderers/Form/ButtonGroupSelect')
+});
+// import './renderers/Form/Control';
+registerRenderer({
+  type: 'control',
+  getComponent: () => import('./renderers/Form/Control')
+});
+// import './renderers/Form/Hidden';
+registerRenderer({
+  type: 'hidden',
+  getComponent: () => import('./renderers/Form/Hidden')
+});
+// import './renderers/Form/InputText';
+registerRenderer({
+  type: 'input-text',
+  alias: ['input-password', 'native-date', 'native-time', 'native-number'],
+  getComponent: () => import('./renderers/Form/InputText')
+});
+registerRenderer({
+  type: 'input-email',
+  getComponent: () => import('./renderers/Form/InputText')
+});
+registerRenderer({
+  type: 'input-url',
+  getComponent: () => import('./renderers/Form/InputText')
+});
+// import './renderers/Form/InputTag';
+registerRenderer({
+  type: 'input-tag',
+  getComponent: () => import('./renderers/Form/InputTag')
+});
+// import './renderers/Form/InputNumber';
+registerRenderer({
+  type: 'input-number',
+  getComponent: () => import('./renderers/Form/InputNumber')
+});
+// import './renderers/Form/Textarea';
+registerRenderer({
+  type: 'textarea',
+  getComponent: () => import('./renderers/Form/Textarea')
+});
+// import './renderers/Form/Checkboxes';
+registerRenderer({
+  type: 'checkboxes',
+  getComponent: () => import('./renderers/Form/Checkboxes')
+});
+// import './renderers/Form/Checkbox';
+registerRenderer({
+  type: 'checkbox',
+  getComponent: () => import('./renderers/Form/Checkbox')
+});
+// import './renderers/Form/InputCity';
+registerRenderer({
+  type: 'input-city',
+  getComponent: () => import('./renderers/Form/InputCity')
+});
+// import './renderers/Form/ChartRadios';
+registerRenderer({
+  type: 'chart-radios',
+  getComponent: () => import('./renderers/Form/ChartRadios')
+});
+// import './renderers/Form/InputRating';
+registerRenderer({
+  type: 'input-rating',
+  getComponent: () => import('./renderers/Form/InputRating')
+});
+// import './renderers/Form/Switch';
+registerRenderer({
+  type: 'switch',
+  getComponent: () => import('./renderers/Form/Switch')
+});
+// import './renderers/Form/Radios';
+registerRenderer({
+  type: 'radios',
+  getComponent: () => import('./renderers/Form/Radios')
+});
+// import './renderers/Form/Radio';
+registerRenderer({
+  type: 'radio',
+  getComponent: () => import('./renderers/Form/Radio')
+});
+// import './renderers/Form/JSONSchema';
+registerRenderer({
+  type: 'json-schema',
+  getComponent: () => import('./renderers/Form/JSONSchema')
+});
+
+// import './renderers/Form/JSONSchemaEditor';
+registerRenderer({
+  type: 'json-schema-editor',
+  getComponent: () => import('./renderers/Form/JSONSchemaEditor')
+});
+// import './renderers/Form/ListSelect';
+registerRenderer({
+  type: 'list-select',
+  getComponent: () => import('./renderers/Form/ListSelect')
+});
+// import './renderers/Form/LocationPicker';
+registerRenderer({
+  type: 'location-picker',
+  getComponent: () => import('./renderers/Form/LocationPicker')
+});
+// import './renderers/Form/Select';
+registerRenderer({
+  type: 'select',
+  getComponent: () => import('./renderers/Form/Select')
+});
+registerRenderer({
+  type: 'multi-select',
+  getComponent: () => import('./renderers/Form/Select')
+});
+import './renderers/Form/Static';
+// import './renderers/Form/InputDate';
+registerRenderer({
+  type: 'input-date',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+registerRenderer({
+  type: 'input-datetime',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+registerRenderer({
+  type: 'input-time',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+registerRenderer({
+  type: 'input-month',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+registerRenderer({
+  type: 'input-quarter',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+registerRenderer({
+  type: 'input-year',
+  getComponent: () => import('./renderers/Form/InputDate')
+});
+// import './renderers/Form/InputDateRange';
+registerRenderer({
+  type: 'input-date-range',
+  getComponent: () => import('./renderers/Form/InputDateRange')
+});
+registerRenderer({
+  type: 'input-datetime-range',
+  getComponent: () => import('./renderers/Form/InputDateRange')
+});
+registerRenderer({
+  type: 'input-time-range',
+  getComponent: () => import('./renderers/Form/InputDateRange')
+});
+// import './renderers/Form/InputFormula';
+registerRenderer({
+  type: 'input-formula',
+  getComponent: () => import('./renderers/Form/InputFormula')
+});
+// import './renderers/Form/InputRepeat';
+registerRenderer({
+  type: 'input-repeat',
+  getComponent: () => import('./renderers/Form/InputRepeat')
+});
+// import './renderers/Form/InputTree';
+registerRenderer({
+  type: 'input-tree',
+  getComponent: () => import('./renderers/Form/InputTree')
+});
+// import './renderers/Form/TreeSelect';
+registerRenderer({
+  type: 'tree-select',
+  getComponent: () => import('./renderers/Form/TreeSelect')
+});
+// import './renderers/Form/InputImage';
+registerRenderer({
+  type: 'input-image',
+  getComponent: () => import('./renderers/Form/InputImage')
+});
+// import './renderers/Form/InputFile';
+registerRenderer({
+  type: 'input-file',
+  getComponent: () => import('./renderers/Form/InputFile')
+});
+// import './renderers/Form/UUID';
+registerRenderer({
+  type: 'uuid',
+  getComponent: () => import('./renderers/Form/UUID')
+});
+// import './renderers/Form/MatrixCheckboxes';
+registerRenderer({
+  type: 'matrix-checkboxes',
+  getComponent: () => import('./renderers/Form/MatrixCheckboxes')
+});
+// import './renderers/Form/InputMonthRange';
+registerRenderer({
+  type: 'input-month-range',
+  getComponent: () => import('./renderers/Form/InputMonthRange')
+});
+// import './renderers/Form/InputQuarterRange';
+registerRenderer({
+  type: 'input-quarter-range',
+  getComponent: () => import('./renderers/Form/InputQuarterRange')
+});
+// import './renderers/Form/InputYearRange';
+registerRenderer({
+  type: 'input-year-range',
+  getComponent: () => import('./renderers/Form/InputYearRange')
+});
+// import './renderers/Form/InputRange';
+registerRenderer({
+  type: 'input-range',
+  getComponent: () => import('./renderers/Form/InputRange')
+});
+// import './renderers/Form/InputArray';
+registerRenderer({
+  type: 'input-array',
+  getComponent: () => import('./renderers/Form/InputArray')
+});
+// import './renderers/Form/Combo';
+registerRenderer({
+  type: 'combo',
+  getComponent: () => import('./renderers/Form/Combo')
+});
+registerRenderer({
+  type: 'input-kv',
+  getComponent: () => import('./renderers/Form/Combo')
+});
+registerRenderer({
+  type: 'input-kvs',
+  getComponent: () => import('./renderers/Form/Combo')
+});
+// import './renderers/Form/ConditionBuilder';
+registerRenderer({
+  type: 'condition-builder',
+  getComponent: () => import('./renderers/Form/ConditionBuilder')
+});
+// import './renderers/Form/InputSubForm';
+registerRenderer({
+  type: 'input-sub-form',
+  getComponent: () => import('./renderers/Form/InputSubForm')
+});
+// import './renderers/Form/InputExcel';
+registerRenderer({
+  type: 'input-excel',
+  getComponent: () => import('./renderers/Form/InputExcel')
+});
+// import './renderers/Form/InputRichText';
+registerRenderer({
+  type: 'input-rich-text',
+  getComponent: () => import('./renderers/Form/InputRichText')
+});
+import './renderers/Form/Editor';
+// registerRenderer({
+//   type: 'input-rich-text',
+//   getComponent: () => import('./renderers/Form/Editor')
+// });
+// import './renderers/Form/DiffEditor';
+registerRenderer({
+  type: 'diff-editor',
+  getComponent: () => import('./renderers/Form/DiffEditor')
+});
+// import './renderers/Form/InputColor';
+registerRenderer({
+  type: 'input-color',
+  getComponent: () => import('./renderers/Form/InputColor')
+});
+// import './renderers/Form/ChainedSelect';
+registerRenderer({
+  type: 'chained-select',
+  getComponent: () => import('./renderers/Form/ChainedSelect')
+});
+// import './renderers/Form/NestedSelect';
+registerRenderer({
+  type: 'nested-select',
+  getComponent: () => import('./renderers/Form/NestedSelect')
+});
+// import './renderers/Form/Transfer';
+registerRenderer({
+  type: 'transfer',
+  getComponent: () => import('./renderers/Form/Transfer')
+});
+// import './renderers/Form/TransferPicker';
+registerRenderer({
+  type: 'transfer-picker',
+  getComponent: () => import('./renderers/Form/TransferPicker')
+});
+// import './renderers/Form/InputTable';
+registerRenderer({
+  type: 'input-table',
+  getComponent: () => import('./renderers/Form/InputTable')
+});
+// import './renderers/Form/Picker';
+registerRenderer({
+  type: 'picker',
+  getComponent: () => import('./renderers/Form/Picker')
+});
+// import './renderers/Form/IconPicker';
+registerRenderer({
+  type: 'icon-picker',
+  getComponent: () => import('./renderers/Form/IconPicker')
+});
+// import './renderers/Form/IconSelect';
+registerRenderer({
+  type: 'icon-select',
+  getComponent: () => import('./renderers/Form/IconSelect')
+});
+// import './renderers/Form/Formula';
+registerRenderer({
+  type: 'formula',
+  getComponent: () => import('./renderers/Form/Formula')
+});
+// import './renderers/Form/FieldSet';
+registerRenderer({
+  type: 'fieldset',
+  getComponent: () => import('./renderers/Form/FieldSet')
+});
+// import './renderers/Form/TabsTransfer';
+registerRenderer({
+  type: 'tabs-transfer',
+  getComponent: () => import('./renderers/Form/TabsTransfer')
+});
+// import './renderers/Form/TabsTransferPicker';
+registerRenderer({
+  type: 'tabs-transfer-picker',
+  getComponent: () => import('./renderers/Form/TabsTransferPicker')
+});
+// import './renderers/Form/Group';
+registerRenderer({
+  type: 'group',
+  getComponent: () => import('./renderers/Form/Group')
+});
+// import './renderers/Form/InputGroup';
+registerRenderer({
+  type: 'input-group',
+  getComponent: () => import('./renderers/Form/InputGroup')
+});
+// import './renderers/Form/UserSelect';
+registerRenderer({
+  type: 'users-select',
+  getComponent: () => import('./renderers/Form/UserSelect')
+});
+// import './renderers/Form/InputSignature';
+registerRenderer({
+  type: 'input-signature',
+  getComponent: () => import('./renderers/Form/InputSignature')
+});
+// import './renderers/Form/InputVerificationCode';
+registerRenderer({
+  type: 'input-verification-code',
+  getComponent: () => import('./renderers/Form/InputVerificationCode')
+});
+import './renderers/Grid';
+// import './renderers/Grid2D';
+registerRenderer({
+  type: 'grid-2d',
+  getComponent: () => import('./renderers/Grid2D')
+});
+// import './renderers/HBox';
+registerRenderer({
+  type: 'hbox',
+  getComponent: () => import('./renderers/HBox')
+});
+// import './renderers/VBox';
+registerRenderer({
+  type: 'vbox',
+  getComponent: () => import('./renderers/VBox')
+});
+// import './renderers/Image';
+registerRenderer({
+  type: 'image',
+  getComponent: () => import('./renderers/Image')
+});
+// import './renderers/Images';
+registerRenderer({
+  type: 'images',
+  getComponent: () => import('./renderers/Images')
+});
+// import './renderers/List';
+registerRenderer({
+  type: 'list',
+  getComponent: () => import('./renderers/List')
+});
+// import './renderers/Log';
+registerRenderer({
+  type: 'log',
+  getComponent: () => import('./renderers/Log')
+});
+// import './renderers/Operation';
+registerRenderer({
+  type: 'operation',
+  getComponent: () => import('./renderers/Operation')
+});
+// import './renderers/Page';
+registerRenderer({
+  type: 'page',
+  getComponent: () => import('./renderers/Page')
+});
+// import './renderers/PaginationWrapper';
+registerRenderer({
+  type: 'pagination-wrapper',
+  getComponent: () => import('./renderers/PaginationWrapper')
+});
+// import './renderers/Panel';
+registerRenderer({
+  type: 'panel',
+  getComponent: () => import('./renderers/Panel')
+});
+// import './renderers/Plain';
+registerRenderer({
+  type: 'plain',
+  alias: ['text'],
+  getComponent: () => import('./renderers/Plain')
+});
+// import './renderers/Property';
+registerRenderer({
+  type: 'property',
+  getComponent: () => import('./renderers/Property')
+});
+// import './renderers/Portlet';
+registerRenderer({
+  type: 'portlet',
+  getComponent: () => import('./renderers/Portlet')
+});
+// import './renderers/Spinner';
+registerRenderer({
+  type: 'spinner',
+  getComponent: () => import('./renderers/Spinner')
+});
+// import './renderers/Table/index';
+registerRenderer({
+  type: 'table',
+  getComponent: () => import('./renderers/Table/index')
+});
+// import './renderers/Tabs';
+registerRenderer({
+  type: 'tabs',
+  getComponent: () => import('./renderers/Tabs')
+});
+// import './renderers/Tpl';
+registerRenderer({
+  type: 'tpl',
+  alias: ['html'],
+  getComponent: () => import('./renderers/Tpl')
+});
+// import './renderers/Mapping';
+registerRenderer({
+  type: 'mapping',
+  alias: ['map'],
+  getComponent: () => import('./renderers/Mapping')
+});
+// import './renderers/Progress';
+registerRenderer({
+  type: 'progress',
+  getComponent: () => import('./renderers/Progress')
+});
+// import './renderers/Status';
+registerRenderer({
+  type: 'status',
+  getComponent: () => import('./renderers/Status')
+});
+// import './renderers/Json';
+registerRenderer({
+  type: 'json',
+  getComponent: () => import('./renderers/Json')
+});
+// import './renderers/Link';
+registerRenderer({
+  type: 'link',
+  getComponent: () => import('./renderers/Link')
+});
+// import './renderers/Wizard';
+registerRenderer({
+  type: 'wizard',
+  getComponent: () => import('./renderers/Wizard')
+});
+// import './renderers/Chart';
+registerRenderer({
+  type: 'chart',
+  getComponent: () => import('./renderers/Chart')
+});
+// import './renderers/Container';
+registerRenderer({
+  type: 'container',
+  getComponent: () => import('./renderers/Container')
+});
+// import './renderers/SwitchContainer';
+registerRenderer({
+  type: 'switch-container',
+  getComponent: () => import('./renderers/SwitchContainer')
+});
+// import './renderers/SearchBox';
+registerRenderer({
+  type: 'search-box',
+  getComponent: () => import('./renderers/SearchBox')
+});
+// import './renderers/Service';
+registerRenderer({
+  type: 'service',
+  getComponent: () => import('./renderers/Service')
+});
+// import './renderers/SparkLine';
+registerRenderer({
+  type: 'sparkline',
+  getComponent: () => import('./renderers/SparkLine')
+});
+// import './renderers/Video';
+registerRenderer({
+  type: 'video',
+  getComponent: () => import('./renderers/Video')
+});
+// import './renderers/Audio';
+registerRenderer({
+  type: 'audio',
+  getComponent: () => import('./renderers/Audio')
+});
+// import './renderers/Nav';
+registerRenderer({
+  type: 'nav',
+  alias: ['navigation'],
+  getComponent: () => import('./renderers/Nav')
+});
+// import './renderers/Number';
+registerRenderer({
+  type: 'number',
+  getComponent: () => import('./renderers/Number')
+});
+// import './renderers/Tasks';
+registerRenderer({
+  type: 'tasks',
+  getComponent: () => import('./renderers/Tasks')
+});
+// import './renderers/Drawer';
+registerRenderer({
+  type: 'drawer',
+  getComponent: () => import('./renderers/Drawer')
+});
+// import './renderers/Wrapper';
+registerRenderer({
+  type: 'wrapper',
+  getComponent: () => import('./renderers/Wrapper')
+});
+// import './renderers/IFrame';
+registerRenderer({
+  type: 'iframe',
+  getComponent: () => import('./renderers/IFrame')
+});
+// import './renderers/BarCode';
+registerRenderer({
+  type: 'barcode',
+  getComponent: () => import('./renderers/BarCode')
+});
+// import './renderers/QRCode';
+registerRenderer({
+  type: 'qrcode',
+  alias: ['qr-code'],
+  getComponent: () => import('./renderers/QRCode')
+});
+// import './renderers/Icon';
+registerRenderer({
+  type: 'icon',
+  getComponent: () => import('./renderers/Icon')
+});
+// import './renderers/Carousel';
+registerRenderer({
+  type: 'carousel',
+  getComponent: () => import('./renderers/Carousel')
+});
+// import './renderers/AnchorNav';
+registerRenderer({
+  type: 'anchor-nav',
+  getComponent: () => import('./renderers/AnchorNav')
+});
+// import './renderers/Steps';
+registerRenderer({
+  type: 'steps',
+  getComponent: () => import('./renderers/Steps')
+});
+// import './renderers/Timeline';
+registerRenderer({
+  type: 'timeline',
+  getComponent: () => import('./renderers/Timeline')
+});
+// import './renderers/Markdown';
+registerRenderer({
+  type: 'markdown',
+  getComponent: () => import('./renderers/Markdown')
+});
+// import './renderers/TableView';
+registerRenderer({
+  type: 'table-view',
+  getComponent: () => import('./renderers/TableView')
+});
+// import './renderers/Code';
+registerRenderer({
+  type: 'code',
+  getComponent: () => import('./renderers/Code')
+});
+// import './renderers/WebComponent';
+registerRenderer({
+  type: 'web-component',
+  getComponent: () => import('./renderers/WebComponent')
+});
+// import './renderers/GridNav';
+registerRenderer({
+  type: 'grid-nav',
+  getComponent: () => import('./renderers/GridNav')
+});
+// import './renderers/TooltipWrapper';
+registerRenderer({
+  type: 'tooltip-wrapper',
+  getComponent: () => import('./renderers/TooltipWrapper')
+});
+// import './renderers/Tag';
+registerRenderer({
+  type: 'tag',
+  getComponent: () => import('./renderers/Tag')
+});
+// import './renderers/Table2/index';
+registerRenderer({
+  type: 'table2',
+  getComponent: () => import('./renderers/Table2/index')
+});
+// import './renderers/Words';
+registerRenderer({
+  type: 'words',
+  getComponent: () => import('./renderers/Words')
+});
+registerRenderer({
+  type: 'tags',
+  getComponent: () => import('./renderers/Words')
+});
+// import './renderers/Password';
+registerRenderer({
+  type: 'password',
+  getComponent: () => import('./renderers/Password')
+});
+// import './renderers/DateRange';
+registerRenderer({
+  type: 'date-range',
+  getComponent: () => import('./renderers/DateRange')
+});
+// import './renderers/MultilineText';
+registerRenderer({
+  type: 'multiline-text',
+  getComponent: () => import('./renderers/MultilineText')
+});
+// import './renderers/OfficeViewer';
+registerRenderer({
+  type: 'office-viewer',
+  getComponent: () => import('./renderers/OfficeViewer')
+});
+// import './renderers/PdfViewer';
+registerRenderer({
+  type: 'pdf-viewer',
+  getComponent: () => import('./renderers/PdfViewer')
+});
+// import './renderers/AMIS';
+registerRenderer({
+  type: 'amis',
+  getComponent: () => import('./renderers/AMIS')
+});
+
+import './compat';
+import './schemaExtend';
diff --git a/packages/amis/src/preset.tsx b/packages/amis/src/preset.tsx
index a05bc2853..a9aeb1e5c 100644
--- a/packages/amis/src/preset.tsx
+++ b/packages/amis/src/preset.tsx
@@ -6,8 +6,10 @@ import {
   themeable,
   ThemeProps
 } from 'amis-core';
-
-import {alert, confirm, setRenderSchemaFn, toast, ImageGallery} from 'amis-ui';
+import {ImageGallery} from 'amis-ui';
+import {setRenderSchemaFn} from 'amis-ui/lib/components/Alert';
+import {alert, confirm} from 'amis-ui/lib/components/Alert';
+import {toast} from 'amis-ui/lib/components/Toast';
 import React from 'react';
 
 extendDefaultEnv({
@@ -68,6 +70,7 @@ const SimpleSpinner = themeable(
           className={cx(
             `Spinner-icon`,
             'Spinner-icon--default',
+            'Spinner-icon--sm',
             props.spinnerClassName
           )}
         ></div>
@@ -76,4 +79,4 @@ const SimpleSpinner = themeable(
   }
 );
 
-LazyComponent.defaultProps.placeholder = <SimpleSpinner />;
+(LazyComponent as any).defaultProps.placeholder = <SimpleSpinner />;
diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx
index e9291d064..a6f28f941 100644
--- a/packages/amis/src/renderers/Action.tsx
+++ b/packages/amis/src/renderers/Action.tsx
@@ -935,7 +935,8 @@ export type ActionRendererProps = RendererProps &
   };
 
 @Renderer({
-  type: 'action'
+  type: 'action',
+  alias: ['button', 'submit', 'reset']
 })
 // @ts-ignore 类型没搞定
 @withBadge
@@ -1089,18 +1090,3 @@ export class ActionRenderer extends React.Component<ActionRendererProps> {
     );
   }
 }
-
-@Renderer({
-  type: 'button'
-})
-export class ButtonRenderer extends ActionRenderer {}
-
-@Renderer({
-  type: 'submit'
-})
-export class SubmitRenderer extends ActionRenderer {}
-
-@Renderer({
-  type: 'reset'
-})
-export class ResetRenderer extends ActionRenderer {}
diff --git a/packages/amis/src/renderers/App.tsx b/packages/amis/src/renderers/App.tsx
index 30457d0bb..4bd9f6442 100644
--- a/packages/amis/src/renderers/App.tsx
+++ b/packages/amis/src/renderers/App.tsx
@@ -163,7 +163,7 @@ export interface AppProps
   store: IAppStore;
 }
 
-export default class App extends React.Component<AppProps, object> {
+export class App extends React.Component<AppProps, object> {
   static propsList: Array<string> = [
     'brandName',
     'logo',
@@ -549,7 +549,7 @@ export default class App extends React.Component<AppProps, object> {
   type: 'app',
   storeType: AppStore.name
 })
-export class AppRenderer extends App {
+export default class AppRenderer extends App {
   static contextType = ScopedContext;
   constructor(props: AppProps, context: IScopedContext) {
     super(props);
diff --git a/packages/amis/src/renderers/Cards.tsx b/packages/amis/src/renderers/Cards.tsx
index 6f6a47291..a1391feba 100644
--- a/packages/amis/src/renderers/Cards.tsx
+++ b/packages/amis/src/renderers/Cards.tsx
@@ -1083,8 +1083,8 @@ export default class Cards extends React.Component<GridProps, object> {
 }
 
 @Renderer({
-  test: /(^|\/)(?:crud\/body\/grid|cards)$/,
   name: 'cards',
+  type: 'cards',
   storeType: ListStore.name,
   weight: -100 // 默认的 grid 不是这样，这个只识别 crud 下面的 grid
 })
diff --git a/packages/amis/src/renderers/Form/InputFormula.tsx b/packages/amis/src/renderers/Form/InputFormula.tsx
index 3b41d1b82..889a9997a 100644
--- a/packages/amis/src/renderers/Form/InputFormula.tsx
+++ b/packages/amis/src/renderers/Form/InputFormula.tsx
@@ -8,7 +8,7 @@ import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
 import type {
   FuncGroup,
   VariableItem
-} from 'amis-ui/src/components/formula/CodeEditor';
+} from 'amis-ui/lib/components/formula/CodeEditor';
 import type {FormulaPickerInputSettings} from 'amis-ui/lib/components/formula/Picker';
 
 /**
diff --git a/packages/amis/src/renderers/Form/InputText.tsx b/packages/amis/src/renderers/Form/InputText.tsx
index 052d6b7c5..851a0955d 100644
--- a/packages/amis/src/renderers/Form/InputText.tsx
+++ b/packages/amis/src/renderers/Form/InputText.tsx
@@ -210,8 +210,14 @@ export default class TextControl extends React.PureComponent<
   };
 
   componentDidMount() {
-    const {formItem, autoComplete, addHook, formInited, data, name} =
-      this.props;
+    const {
+      formItem,
+      autoComplete,
+      addHook,
+      formInited,
+      data,
+      name
+    } = this.props;
 
     if (isEffectiveApi(autoComplete, data) && formItem) {
       if (formInited) {
@@ -302,8 +308,14 @@ export default class TextControl extends React.PureComponent<
   }
 
   async resetValue() {
-    const {onChange, dispatchEvent, resetValue, formStore, store, name} =
-      this.props;
+    const {
+      onChange,
+      dispatchEvent,
+      resetValue,
+      formStore,
+      store,
+      name
+    } = this.props;
     const pristineVal =
       getVariable(formStore?.pristine ?? store?.pristine, name) ?? resetValue;
 
@@ -484,8 +496,13 @@ export default class TextControl extends React.PureComponent<
   }
 
   async handleKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
-    const {selectedOptions, onChange, multiple, creatable, dispatchEvent} =
-      this.props;
+    const {
+      selectedOptions,
+      onChange,
+      multiple,
+      creatable,
+      dispatchEvent
+    } = this.props;
     const valueField = this.props?.valueField || 'value';
 
     if (selectedOptions.length && !this.state.inputValue && evt.keyCode === 8) {
@@ -627,8 +644,12 @@ export default class TextControl extends React.PureComponent<
 
   @autobind
   async handleNormalInputChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const {onChange, dispatchEvent, trimContents, clearValueOnEmpty} =
-      this.props;
+    const {
+      onChange,
+      dispatchEvent,
+      trimContents,
+      clearValueOnEmpty
+    } = this.props;
     let value: string | undefined = this.transformValue(e.currentTarget.value);
     if (typeof value === 'string') {
       if (trimContents) {
@@ -653,8 +674,13 @@ export default class TextControl extends React.PureComponent<
   }
 
   normalizeValue(value: Option[] | Option | undefined | null) {
-    const {multiple, delimiter, joinValues, extractValue, valueField} =
-      this.props;
+    const {
+      multiple,
+      delimiter,
+      joinValues,
+      extractValue,
+      valueField
+    } = this.props;
     const selectedOptions = Array.isArray(value) ? value : value ? [value] : [];
 
     if (joinValues) {
@@ -837,8 +863,9 @@ export default class TextControl extends React.PureComponent<
                 {
                   'is-opened': isOpen,
                   'TextControl-input--multiple': multiple,
-                  [`TextControl-input--border${ucFirst(borderMode)}`]:
+                  [`TextControl-input--border${ucFirst(
                     borderMode
+                  )}`]: borderMode
                 }
               )}
               onClick={this.handleClick}
@@ -1326,15 +1353,11 @@ export function mapItemIndex(
 }
 
 @OptionsControl({
-  type: 'input-text'
+  type: 'input-text',
+  alias: ['input-password', 'native-date', 'native-time', 'native-number']
 })
 export class TextControlRenderer extends TextControl {}
 
-@OptionsControl({
-  type: 'input-password'
-})
-export class PasswordControlRenderer extends TextControl {}
-
 @OptionsControl({
   type: 'input-email',
   validations: 'isEmail'
@@ -1346,18 +1369,3 @@ export class EmailControlRenderer extends TextControl {}
   validations: 'isUrl'
 })
 export class UrlControlRenderer extends TextControl {}
-
-@OptionsControl({
-  type: 'native-date'
-})
-export class NativeDateControlRenderer extends TextControl {}
-
-@OptionsControl({
-  type: 'native-time'
-})
-export class NativeTimeControlRenderer extends TextControl {}
-
-@OptionsControl({
-  type: 'native-number'
-})
-export class NativeNumberControlRenderer extends TextControl {}
diff --git a/packages/amis/src/renderers/Form/InputTree.tsx b/packages/amis/src/renderers/Form/InputTree.tsx
index c917515a4..3afe86ec1 100644
--- a/packages/amis/src/renderers/Form/InputTree.tsx
+++ b/packages/amis/src/renderers/Form/InputTree.tsx
@@ -3,7 +3,8 @@ import omit from 'lodash/omit';
 import debounce from 'lodash/debounce';
 import cx from 'classnames';
 import {matchSorter} from 'match-sorter';
-import {SpinnerExtraProps, Tree as TreeSelector, value2array} from 'amis-ui';
+import {SpinnerExtraProps, Tree as TreeSelector} from 'amis-ui';
+import {value2array} from 'amis-ui/lib/components/Select';
 import {
   Option,
   OptionsControl,
diff --git a/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx b/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
index 4174cda95..b945ab1c9 100644
--- a/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
+++ b/packages/amis/src/renderers/Form/JSONSchemaEditor.tsx
@@ -5,7 +5,7 @@ import {JSONSchemaEditor} from 'amis-ui';
 import {autobind, isObject} from 'amis-core';
 import {FormBaseControlSchema} from '../../Schema';
 
-import {schemaEditorItemPlaceholder} from 'amis-ui';
+import {schemaEditorItemPlaceholder} from 'amis-ui/lib/components/schema-editor/Common';
 import type {SchemaEditorItemPlaceholder} from 'amis-ui';
 import {isMobile} from 'amis-core';
 
@@ -99,7 +99,9 @@ export interface JSONSchemaEditorProps
       'type' | 'className' | 'descriptionClassName' | 'inputClassName'
     > {}
 
-export default class JSONSchemaEditorControl extends React.PureComponent<JSONSchemaEditorProps> {
+export default class JSONSchemaEditorControl extends React.PureComponent<
+  JSONSchemaEditorProps
+> {
   static defaultProps = {
     enableAdvancedSetting: false,
     placeholder: schemaEditorItemPlaceholder
diff --git a/packages/amis/src/renderers/List.tsx b/packages/amis/src/renderers/List.tsx
index 9580e21de..f0487541d 100644
--- a/packages/amis/src/renderers/List.tsx
+++ b/packages/amis/src/renderers/List.tsx
@@ -1552,8 +1552,7 @@ export class ListItem extends React.Component<ListItemProps> {
 }
 
 @Renderer({
-  test: /(^|\/)(?:list|list-group)\/(?:.*\/)?list-item$/,
-  name: 'list-item'
+  type: 'list-item'
 })
 export class ListItemRenderer extends ListItem {
   static propsList = ['multiple', ...ListItem.propsList];
diff --git a/packages/amis/src/renderers/Mapping.tsx b/packages/amis/src/renderers/Mapping.tsx
index aacc70ba2..79a0a886f 100644
--- a/packages/amis/src/renderers/Mapping.tsx
+++ b/packages/amis/src/renderers/Mapping.tsx
@@ -324,7 +324,8 @@ export const MappingField = withStore(props =>
 );
 
 @Renderer({
-  test: /(^|\/)(?:map|mapping)$/,
+  type: 'mapping',
+  alias: ['map'],
   name: 'mapping'
 })
 export class MappingFieldRenderer extends React.Component<RendererProps> {
diff --git a/packages/amis/src/renderers/Nav.tsx b/packages/amis/src/renderers/Nav.tsx
index 029080dc5..c8001a559 100644
--- a/packages/amis/src/renderers/Nav.tsx
+++ b/packages/amis/src/renderers/Nav.tsx
@@ -1415,8 +1415,15 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
     }
 
     async handleSelect(link: Link, depth: number) {
-      const {onSelect, env, data, level, dispatchEvent, updateConfig, config} =
-        this.props;
+      const {
+        onSelect,
+        env,
+        data,
+        level,
+        dispatchEvent,
+        updateConfig,
+        config
+      } = this.props;
 
       const rendererEvent = await dispatchEvent(
         'click',
@@ -1459,8 +1466,14 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
     }
 
     render() {
-      const {disabled, loading, config, deferLoad, updateConfig, ...rest} =
-        this.props;
+      const {
+        disabled,
+        loading,
+        config,
+        deferLoad,
+        updateConfig,
+        ...rest
+      } = this.props;
       const currentLink = this.getCurrentLink(this.state.currentKey);
 
       return (
@@ -1482,7 +1495,8 @@ const ConditionBuilderWithRemoteOptions = withRemoteConfig({
 
 export default ThemedNavigation;
 @Renderer({
-  test: /(^|\/)(?:nav|navigation)$/,
+  type: 'nav',
+  alias: ['navigation'],
   name: 'nav'
 })
 export class NavigationRenderer extends React.Component<RendererProps> {
diff --git a/packages/amis/src/renderers/Pagination.tsx b/packages/amis/src/renderers/Pagination.tsx
index c414aea26..4024bb079 100644
--- a/packages/amis/src/renderers/Pagination.tsx
+++ b/packages/amis/src/renderers/Pagination.tsx
@@ -141,7 +141,8 @@ export default class Pagination extends React.Component<PaginationProps> {
 }
 
 @Renderer({
-  test: /(^|\/)(?:pagination|pager)$/,
+  type: 'pagination',
+  alias: ['pager'],
   name: 'pagination'
 })
 export class PaginationRenderer extends Pagination {}
diff --git a/packages/amis/src/renderers/Plain.tsx b/packages/amis/src/renderers/Plain.tsx
index 8d4775c30..732e9e7d9 100644
--- a/packages/amis/src/renderers/Plain.tsx
+++ b/packages/amis/src/renderers/Plain.tsx
@@ -114,7 +114,8 @@ export class Plain extends React.Component<PlainProps, object> {
 }
 
 @Renderer({
-  test: /(^|\/)(?:plain|text)$/,
+  type: 'plain',
+  alias: ['text'],
   name: 'plain'
 })
 export class PlainRenderer extends Plain {}
diff --git a/packages/amis/src/renderers/QRCode.tsx b/packages/amis/src/renderers/QRCode.tsx
index c903410e6..a17dd4b34 100644
--- a/packages/amis/src/renderers/QRCode.tsx
+++ b/packages/amis/src/renderers/QRCode.tsx
@@ -244,7 +244,8 @@ export default class QRCode extends React.Component<QRCodeProps, any> {
 }
 
 @Renderer({
-  test: /(^|\/)qr\-?code$/,
+  type: 'qrcode',
+  alias: ['qr-code'],
   name: 'qrcode'
 })
 export class QRCodeRenderer extends QRCode {
diff --git a/packages/amis/src/renderers/Steps.tsx b/packages/amis/src/renderers/Steps.tsx
index 21ce01b4c..daf2656f8 100644
--- a/packages/amis/src/renderers/Steps.tsx
+++ b/packages/amis/src/renderers/Steps.tsx
@@ -8,7 +8,8 @@ import {
   filter,
   getPropValue
 } from 'amis-core';
-import {Steps, StepStatus, RemoteOptionsProps, withRemoteConfig} from 'amis-ui';
+import {Steps, RemoteOptionsProps, withRemoteConfig} from 'amis-ui';
+import {StepStatus} from 'amis-ui/lib/components/Steps';
 import {BaseSchema, SchemaCollection} from '../Schema';
 import isPlainObject from 'lodash/isPlainObject';
 import type {SchemaExpression} from 'amis-core';
diff --git a/packages/amis/src/renderers/Table/TableCell.tsx b/packages/amis/src/renderers/Table/TableCell.tsx
index fe8e6822b..4993acb55 100644
--- a/packages/amis/src/renderers/Table/TableCell.tsx
+++ b/packages/amis/src/renderers/Table/TableCell.tsx
@@ -196,7 +196,7 @@ export class TableCell extends React.Component<TableCellProps> {
 }
 
 @Renderer({
-  test: /(^|\/)table\/(?:.*\/)?cell$/,
+  type: 'cell',
   name: 'table-cell'
 })
 @QuickEdit()
diff --git a/packages/amis/src/renderers/Tpl.tsx b/packages/amis/src/renderers/Tpl.tsx
index 2ff882924..ecd272e11 100644
--- a/packages/amis/src/renderers/Tpl.tsx
+++ b/packages/amis/src/renderers/Tpl.tsx
@@ -266,7 +266,8 @@ export class Tpl extends React.Component<TplProps, TplState> {
 }
 
 @Renderer({
-  test: /(^|\/)(?:tpl|html)$/,
+  type: 'tpl',
+  alias: ['html'],
   name: 'tpl'
 })
 // @ts-ignore 类型没搞定