build: 构建时某些文件的.d文件丢失

2025-04-05 19:41:40 +08:00 · 2022-08-05 19:59:19 +08:00 · 2022-08-05 19:59:19 +08:00 · 5e36ca8e47
commit 5e36ca8e47
parent 9ffecf62f7
56 changed files with 919 additions and 1083 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -4,6 +4,7 @@ entry-dist
 coverage
 node_modules
 dest
+types

 comp-entry.ts
 config-entry.ts
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 dist
+types

 .temp
 .cache
--- a/magic-admin/web/tsconfig.json
+++ b/magic-admin/web/tsconfig.json
@ -15,7 +15,7 @@
    "types": [
      "webpack-env",
      "jest",
-      "./types",
+      "./typings",
      "node"
    ],
    "paths": {
--- a/magic-admin/web/typings/axios-jsonp/index.d.ts
+++ b/magic-admin/web/typings/axios-jsonp/index.d.ts
--- a/magic-admin/web/typings/index.d.ts
+++ b/magic-admin/web/typings/index.d.ts
--- a/magic-admin/web/typings/shims-vue.d.ts
+++ b/magic-admin/web/typings/shims-vue.d.ts
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
  "packageManager": "pnpm@7.1.9",
  "scripts": {
    "bootstrap": "pnpm i && pnpm build",
-    "clean:top": "rimraf */**/dist */**/admin-dist */**/entry-dist */dist coverage dwt*",
+    "clean:top": "rimraf */**/dist */**/types */**/admin-dist */**/entry-dist */dist coverage dwt*",
    "clean:modules": "rimraf node_modules **/node_modules **/**/node_modules",
    "clean:all": "pnpm clean:top && pnpm clean:modules",
    "lint": "eslint . --ext .js,.vue,.ts,.tsx",
--- a/packages/core/package.json
+++ b/packages/core/package.json
@ -6,7 +6,7 @@
  ],
  "main": "dist/tmagic-core.umd.js",
  "module": "dist/tmagic-core.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-core.mjs",
@ -20,7 +20,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -39,8 +41,8 @@
  "devDependencies": {
    "@types/events": "^3.0.0",
    "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
  }
 }
--- a/packages/core/tsconfig.build.json
+++ b/packages/core/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/core/vite.config.ts
+++ b/packages/core/vite.config.ts
@ -19,21 +19,10 @@
 import path from 'path';

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';

 import pkg from './package.json';

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
  resolve: {
    alias:
      process.env.NODE_ENV === 'production'
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@ -8,7 +8,7 @@
  "main": "dist/tmagic-editor.umd.js",
  "module": "dist/tmagic-editor.mjs",
  "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-editor.mjs",
@ -22,7 +22,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -73,10 +75,10 @@
    "@vitejs/plugin-vue": "^3.0.1",
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
    "sass": "^1.35.1",
    "typescript": "^4.7.4",
    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
  }
 }
--- a/packages/editor/src/components/ContentMenu.vue
+++ b/packages/editor/src/components/ContentMenu.vue
@ -22,50 +22,45 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';

 import { MenuButton, MenuItem } from '@editor/type';

 import ToolButton from './ToolButton.vue';

-export default defineComponent({
-  components: { ToolButton },
-
-  props: {
-    menuData: {
-      type: Array as PropType<MenuItem[]>,
-      default: () => [],
+const props = withDefaults(
+  defineProps<{
+    menuData?: MenuItem[];
+    isSubMenu?: boolean;
+  }>(),
+  {
+    menuData: () => [],
+    isSubMenu: false,
  },
+);

-    isSubMenu: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const emit = defineEmits(['hide', 'show']);

-  emits: ['hide', 'show'],
-
-  setup(props, { emit }) {
-    const menu = ref<HTMLDivElement>();
-    const subMenu = ref<any>();
-    const visible = ref(false);
-    const subMenuData = ref<MenuItem[]>([]);
-    const menuStyle = ref({
+const menu = ref<HTMLDivElement>();
+const subMenu = ref<any>();
+const visible = ref(false);
+const subMenuData = ref<MenuItem[]>([]);
+const menuStyle = ref({
  left: '0',
  top: '0',
-    });
+});

-    const hide = () => {
+const hide = () => {
  if (!visible.value) return;

  visible.value = false;
  subMenu.value?.hide();

  emit('hide');
-    };
+};

-    const hideHandler = (e: MouseEvent) => {
+const hideHandler = (e: MouseEvent) => {
  const target = e.target as HTMLElement | undefined;
  if (!visible.value || !target) {
    return;
@ -74,30 +69,9 @@ export default defineComponent({
    return;
  }
  hide();
-    };
+};

-    onMounted(() => {
-      if (props.isSubMenu) return;
-
-      globalThis.addEventListener('mousedown', hideHandler, true);
-    });
-
-    onUnmounted(() => {
-      if (props.isSubMenu) return;
-
-      globalThis.removeEventListener('mousedown', hideHandler, true);
-    });
-
-    return {
-      menu,
-      subMenu,
-      visible,
-      menuStyle,
-      subMenuData,
-
-      hide,
-
-      show(e: MouseEvent) {
+const show = (e: MouseEvent) => {
  // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
  setTimeout(() => {
    visible.value = true;
@ -118,9 +92,9 @@ export default defineComponent({
      emit('show');
    });
  }, 300);
-      },
+};

-      showSubMenu(item: MenuItem) {
+const showSubMenu = (item: MenuItem) => {
  const menuItem = item as MenuButton;
  if (typeof item !== 'object' || !menuItem.items?.length) {
    return;
@ -133,8 +107,22 @@ export default defineComponent({
      clientY: menu.value.offsetTop,
    });
  }
-      },
-    };
-  },
+};
+
+onMounted(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.addEventListener('mousedown', hideHandler, true);
+});
+
+onUnmounted(() => {
+  if (props.isSubMenu) return;
+
+  globalThis.removeEventListener('mousedown', hideHandler, true);
+});
+
+defineExpose({
+  hide,
+  show,
 });
 </script>
--- a/packages/editor/src/components/ToolButton.vue
+++ b/packages/editor/src/components/ToolButton.vue
@ -50,8 +50,8 @@
  </div>
 </template>

-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, PropType } from 'vue';
 import { ArrowDown, Back, Delete, Grid, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';

 import { NodeType } from '@tmagic/schema';
@ -59,10 +59,7 @@ import { NodeType } from '@tmagic/schema';
 import MIcon from '@editor/components/Icon.vue';
 import type { MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';

-export default defineComponent({
-  components: { MIcon, ArrowDown },
-
-  props: {
+const props = defineProps({
  data: {
    type: [Object, String] as PropType<MenuItem | string>,
    require: true,
@ -76,20 +73,19 @@ export default defineComponent({
    type: String as PropType<'mousedown' | 'mouseup' | 'click'>,
    default: 'click',
  },
-  },
+});

-  setup(props) {
-    const services = inject<Services>('services');
-    const uiService = services?.uiService;
+const services = inject<Services>('services');
+const uiService = services?.uiService;

-    const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
-    const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
-    const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);

-    const zoomInHandler = () => uiService?.zoom(0.1);
-    const zoomOutHandler = () => uiService?.zoom(-0.1);
+const zoomInHandler = () => uiService?.zoom(0.1);
+const zoomOutHandler = () => uiService?.zoom(-0.1);

-    const item = computed((): MenuButton | MenuComponent => {
+const item = computed((): MenuButton | MenuComponent => {
  if (typeof props.data !== 'string') {
    return props.data;
  }
@ -160,70 +156,57 @@ export default defineComponent({
        text: props.data,
      };
  }
-    });
+});

-    const disabled = computed(() => {
+const disabled = computed(() => {
  if (typeof item.value === 'string') return false;
  if (item.value.type === 'component') return false;
  if (typeof item.value.disabled === 'function') {
    return item.value.disabled(services);
  }
  return item.value.disabled;
-    });
+});

-    const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
+const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
  if (disabled.value) return;
  if (typeof (item as MenuButton).handler === 'function' && services) {
    (item as MenuButton).handler?.(services, event);
  }
-    };
+};

-    return {
-      ZoomIn: markRaw(ZoomIn),
-      ZoomOut: markRaw(ZoomOut),
-
-      item,
-      zoom,
-      disabled,
-      display: computed(() => {
+const display = computed(() => {
  if (!item.value) return false;
  if (typeof item.value === 'string') return true;
  if (typeof item.value.display === 'function') {
    return item.value.display(services);
  }
  return item.value.display ?? true;
-      }),
+});

-      zoomInHandler,
-      zoomOutHandler,
-
-      dropdownHandler(command: any) {
+const dropdownHandler = (command: any) => {
  if (command.item.handler) {
    command.item.handler(services);
  }
-      },
+};

-      clickHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+const clickHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
  if (props.eventType !== 'click') return;
  if (item.type === 'button') {
    buttonHandler(item, event);
  }
-      },
+};

-      mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+const mousedownHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
  if (props.eventType !== 'mousedown') return;
  if (item.type === 'button') {
    buttonHandler(item, event);
  }
-      },
+};

-      mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent) {
+const mouseupHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
  if (props.eventType !== 'mouseup') return;
  if (item.type === 'button') {
    buttonHandler(item, event);
  }
-      },
-    };
-  },
-});
+};
 </script>
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@ -12,46 +12,37 @@
  </div>
 </template>

-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons-vue';
+<script lang="ts" setup>
+import { computed, inject, ref } from 'vue';
+import { Close, Delete } from '@element-plus/icons-vue';

 import { FormState } from '@tmagic/form';

 import { Services } from '@editor/type';

-export default defineComponent({
-  name: 'm-fields-ui-select',
+const props = defineProps<{
+  labelWidth: string;
+  config: any;
+  model: any;
+  prop: string;
+  name: string;
+}>();

-  props: {
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return '';
-      },
-    },
-    name: String,
-  },
+const emit = defineEmits(['change']);

-  emits: ['change'],
+const services = inject<Services>('services');
+const mForm = inject<FormState>('mForm');
+const val = computed(() => props.model[props.name]);
+const uiSelectMode = ref(false);

-  setup(props: any, { emit }) {
-    const services = inject<Services>('services');
-    const mForm = inject<FormState>('mForm');
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
-
-    const cancelHandler = () => {
+const cancelHandler = () => {
  if (!services?.uiService) return;
  services.uiService.set<boolean>('uiSelectMode', false);
  uiSelectMode.value = false;
  globalThis.document.removeEventListener('ui-select', clickHandler as EventListener);
-    };
+};

-    const clickHandler = ({ detail }: Event & { detail: any }) => {
+const clickHandler = ({ detail }: Event & { detail: any }) => {
  if (detail.id) {
    props.model[props.name] = detail.id;
    emit('change', detail.id);
@ -61,40 +52,29 @@ export default defineComponent({
  if (cancelHandler) {
    cancelHandler();
  }
-    };
+};

-    return {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
-
-      val,
-      uiSelectMode,
-      toName: computed(() => {
+const toName = computed(() => {
  const config = services?.editorService.getNodeById(val.value);
  return config?.name || '';
-      }),
+});

-      startSelect() {
+const startSelect = () => {
  if (!services?.uiService) return;
  services.uiService.set<boolean>('uiSelectMode', true);
  uiSelectMode.value = true;
  globalThis.document.addEventListener('ui-select', clickHandler as EventListener);
-      },
+};

-      cancelHandler,
-
-      deleteHandler() {
+const deleteHandler = () => {
  if (props.model) {
    props.model[props.name] = '';
    emit('change', '');
    mForm?.$emit('field-change', props.prop, '');
  }
-      },
-    };
-  },
-});
+};
 </script>
+
 <style lang="scss">
 .m-fields-ui-select {
  cursor: pointer;
--- a/packages/editor/src/layouts/workspace/PageBar.vue
+++ b/packages/editor/src/layouts/workspace/PageBar.vue
@ -3,10 +3,19 @@
    <div id="m-editor-page-bar-add-icon" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="addPage">
      <el-icon><plus></plus></el-icon>
    </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('left')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('left')"
+    >
      <el-icon><arrow-left-bold></arrow-left-bold></el-icon>
    </div>
-    <div v-if="root" class="m-editor-page-bar-items" ref="itemsContainer" :style="`width: ${itemsContainerWidth}px`">
+    <div
+      v-if="root"
+      class="m-editor-page-bar-items"
+      ref="itemsContainer"
+      :style="`width: ${scrollState.itemsContainerWidth}px`"
+    >
      <div
        v-for="item in root.items"
        :key="item.key"
@ -51,25 +60,18 @@
        </el-popover>
      </div>
    </div>
-    <div v-if="canScroll" class="m-editor-page-bar-item m-editor-page-bar-item-icon" @click="scroll('right')">
+    <div
+      v-if="scrollState.canScroll"
+      class="m-editor-page-bar-item m-editor-page-bar-item-icon"
+      @click="scrollState.scroll('right')"
+    >
      <el-icon><arrow-right-bold></arrow-right-bold></el-icon>
    </div>
  </div>
 </template>

-<script lang="ts">
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+<script lang="ts" setup>
+import { computed, ComputedRef, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, CaretBottom, Delete, DocumentCopy, Plus } from '@element-plus/icons-vue';

 import type { MApp, MPage } from '@tmagic/schema';
@ -163,49 +165,36 @@ const useScroll = (root: ComputedRef<MApp | undefined>) => {
  };
 };

-export default defineComponent({
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
+const services = inject<Services>('services');
+const editorService = services?.editorService;

-  setup() {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
+const root = computed(() => editorService?.get<MApp>('root'));

-    const root = computed(() => editorService?.get<MApp>('root'));
+const scrollState = useScroll(root);
+const page = computed(() => editorService?.get('page'));

-    return {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
-
-      ...useScroll(root),
-
-      root,
-      page: computed(() => editorService?.get('page')),
-
-      switchPage(page: MPage) {
+const switchPage = (page: MPage) => {
  editorService?.select(page);
-      },
+};

-      addPage() {
+const addPage = () => {
  if (!editorService) return;
  const pageConfig = {
    type: NodeType.PAGE,
    name: generatePageNameByApp(toRaw(editorService.get('root'))),
  };
  editorService.add(pageConfig);
-      },
+};

-      copy(node: MPage) {
+const copy = (node: MPage) => {
  node && editorService?.copy(node);
  editorService?.paste({
    left: 0,
    top: 0,
  });
-      },
+};

-      remove(node: MPage) {
+const remove = (node: MPage) => {
  editorService?.remove(node);
-      },
-    };
-  },
-});
+};
 </script>
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@ -20,19 +20,8 @@
  </scroll-viewer>
 </template>

-<script lang="ts">
-import {
-  computed,
-  defineComponent,
-  inject,
-  markRaw,
-  onMounted,
-  onUnmounted,
-  ref,
-  toRaw,
-  watch,
-  watchEffect,
-} from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';

 import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
@ -58,36 +47,27 @@ import { getGuideLineFromCache } from '@editor/utils';

 import ViewerMenu from './ViewerMenu.vue';

-export default defineComponent({
-  name: 'magic-stage',
+let stage: StageCore | null = null;
+let runtime: Runtime | null = null;

-  components: {
-    ViewerMenu,
-    ScrollViewer,
-  },
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');

-  setup() {
-    let stage: StageCore | null = null;
-    let runtime: Runtime | null = null;
+const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
+const stageContainer = ref<HTMLDivElement>();
+const menu = ref<InstanceType<typeof ViewerMenu>>();

-    const services = inject<Services>('services');
-    const stageOptions = inject<StageOptions>('stageOptions');
+const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
+const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
+const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+const root = computed(() => services?.editorService.get<MApp>('root'));
+const page = computed(() => services?.editorService.get<MPage>('page'));
+const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
+const node = computed(() => services?.editorService.get<MNode>('node'));

-    const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-    const stageContainer = ref<HTMLDivElement>();
-    const menu = ref<InstanceType<typeof ViewerMenu>>();
+const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;

-    const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
-    const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
-    const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
-    const root = computed(() => services?.editorService.get<MApp>('root'));
-    const page = computed(() => services?.editorService.get<MPage>('page'));
-    const zoom = computed(() => services?.uiService.get<number>('zoom') || 1);
-    const node = computed(() => services?.editorService.get<MNode>('node'));
-
-    const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
-
-    watchEffect(() => {
+watchEffect(() => {
  if (stage) return;

  if (!stageContainer.value) return;
@ -173,65 +153,55 @@ export default defineComponent({
      node.value && stage?.select(toRaw(node.value.id));
    });
  });
-    });
+});

-    watch(zoom, (zoom) => {
+watch(zoom, (zoom) => {
  if (!stage || !zoom) return;
  stage.setZoom(zoom);
-    });
+});

-    watch(root, (root) => {
+watch(root, (root) => {
  if (runtime && root) {
    runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
  }
-    });
+});

-    const resizeObserver = new ResizeObserver((entries) => {
+const resizeObserver = new ResizeObserver((entries) => {
  for (const { contentRect } of entries) {
    services?.uiService.set('stageContainerRect', {
      width: contentRect.width,
      height: contentRect.height,
    });
  }
-    });
+});

-    onMounted(() => {
+onMounted(() => {
  stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
-    });
+});

-    onUnmounted(() => {
+onUnmounted(() => {
  stage?.destroy();
  resizeObserver.disconnect();
  services?.editorService.set('stage', null);
-    });
+});

-    return {
-      stageWrap,
-      stageContainer,
-      menu,
-      stageRect,
-      zoom,
-      isMultiSelect,
-
-      contextmenuHandler(e: MouseEvent) {
+const contextmenuHandler = (e: MouseEvent) => {
  e.preventDefault();
  menu.value?.show(e);
-      },
+};

-      dragoverHandler(e: DragEvent) {
+const dragoverHandler = (e: DragEvent) => {
  e.preventDefault();
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'move';
  }
-      },
+};

-      async dropHandler(e: DragEvent) {
+const dropHandler = async (e: DragEvent) => {
  e.preventDefault();

  const doc = stage?.renderer.contentWindow?.document;
-        const parentEl: HTMLElement | null | undefined = doc?.querySelector(
-          `.${stageOptions?.containerHighlightClassName}`,
-        );
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);

  let parent: MContainer | undefined = page.value;
  if (parentEl) {
@ -274,8 +244,5 @@ export default defineComponent({

    services?.editorService.add(config, parent);
  }
-      },
-    };
-  },
-});
+};
 </script>
--- a/packages/editor/src/layouts/workspace/ViewerMenu.vue
+++ b/packages/editor/src/layouts/workspace/ViewerMenu.vue
@ -2,8 +2,8 @@
  <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>

-<script lang="ts">
-import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+<script lang="ts" setup>
+import { computed, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
 import { Bottom, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';

 import { MNode, NodeType } from '@tmagic/schema';
@ -15,31 +15,22 @@ import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuItem, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';

-export default defineComponent({
-  components: { ContentMenu },
+const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });

-  props: {
-    isMultiSelect: {
-      type: Boolean,
-      default: false,
-    },
-  },
+const services = inject<Services>('services');
+const editorService = services?.editorService;
+const menu = ref<InstanceType<typeof ContentMenu>>();
+const canPaste = ref(false);
+const canCenter = ref(false);

-  setup(props) {
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
-    const menu = ref<InstanceType<typeof ContentMenu>>();
-    const canPaste = ref(false);
-    const canCenter = ref(false);
+const node = computed(() => editorService?.get<MNode>('node'));
+const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
+const parent = computed(() => editorService?.get('parent'));
+const stage = computed(() => editorService?.get<StageCore>('stage'));

-    const node = computed(() => editorService?.get<MNode>('node'));
-    const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
-    const parent = computed(() => editorService?.get('parent'));
-    const stage = computed(() => editorService?.get<StageCore>('stage'));
+const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);

-    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
-
-    const menuData = reactive<MenuItem[]>([
+const menuData = reactive<MenuItem[]>([
  {
    type: 'button',
    text: '水平居中',
@ -140,14 +131,14 @@ export default defineComponent({
    },
  },
  ...stageContentMenu,
-    ]);
+]);

-    onMounted(async () => {
+onMounted(async () => {
  const data = await storageService.getItem(COPY_STORAGE_KEY);
  canPaste.value = data !== 'undefined' && !!data;
-    });
+});

-    watch(
+watch(
  parent,
  async () => {
    if (!parent.value || !editorService) return (canCenter.value = false);
@ -159,15 +150,11 @@ export default defineComponent({
    canCenter.value = isLayoutConform && !!isTypeConform;
  },
  { immediate: true },
-    );
+);

-    return {
-      menu,
-      menuData,
-      show(e: MouseEvent) {
+const show = (e: MouseEvent) => {
  menu.value?.show(e);
-      },
-    };
-  },
-});
+};
+
+defineExpose({ show });
 </script>
--- a/packages/editor/src/services/componentList.ts
+++ b/packages/editor/src/services/componentList.ts
@ -34,11 +34,11 @@ class ComponentList extends BaseService {
  /**
   * @param componentGroupList 组件列表配置
   */
-  public setList(componentGroupList: ComponentGroup[]) {
+  public setList(componentGroupList: ComponentGroup[]): void {
    this.state.list = componentGroupList;
  }

-  public getList() {
+  public getList(): ComponentGroup[] {
    return this.state.list;
  }
 }
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@ -42,7 +42,7 @@ import { beforeAdd, beforePaste, beforeRemove, notifyAddToStage } from '@editor/
 import BaseService from './BaseService';

 class Editor extends BaseService {
-  public state = reactive<StoreState>({
+  public state: StoreState = reactive({
    root: null,
    page: null,
    parent: null,
--- a/packages/editor/tsconfig.build.json
+++ b/packages/editor/tsconfig.build.json
@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@editor/*": ["src/*"],
+    },
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/editor/vite.config.ts
+++ b/packages/editor/vite.config.ts
@ -19,7 +19,6 @@
 import path from 'path';

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';

 import pkg from './package.json';
@ -27,16 +26,7 @@ import pkg from './package.json';
 const alias = [{ find: /@editor/, replacement: path.join(__dirname, './src') }];

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],

  resolve: {
    alias:
@ -67,12 +57,7 @@ export default defineConfig({
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external(id: string) {
-        return (
-          /^vue/.test(id) ||
-          /^element-plus/.test(id) ||
-          /^@tmagic\//.test(id) ||
-          Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id))
-        );
+        return Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id));
      },

      output: {
--- a/packages/form/package.json
+++ b/packages/form/package.json
@ -8,7 +8,7 @@
  "main": "dist/tmagic-form.umd.js",
  "module": "dist/tmagic-form.mjs",
  "style": "dist/style.css",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-form.mjs",
@ -22,7 +22,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -52,10 +54,10 @@
    "@vitejs/plugin-vue": "^3.0.1",
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
    "sass": "^1.35.1",
    "typescript": "^4.7.4",
    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
  }
 }
--- a/packages/form/src/Form.vue
+++ b/packages/form/src/Form.vue
@ -26,22 +26,17 @@

 <script lang="ts">
 import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
-import { ElForm } from 'element-plus';
 import { cloneDeep, isEqual } from 'lodash-es';

 import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import { FormConfig, FormState, FormValue } from './schema';

-export interface ValidateError {
+interface ValidateError {
  message: string;
  field: string;
 }

-export interface FieldErrorList {
-  [field: string]: ValidateError[];
-}
-
 export default defineComponent({
  name: 'm-form',

@ -112,7 +107,8 @@ export default defineComponent({
  emits: ['change', 'field-input', 'field-change'],

  setup(props, { emit }) {
-    const elForm = ref<InstanceType<typeof ElForm>>();
+    // InstanceType<typeof ElForm>，构建types的时候会出错
+    const elForm = ref<any>();
    const initialized = ref(false);
    const values = ref<FormValue>({});
    const fields = new Map<string, any>();
--- a/packages/form/src/fields/Cascader.vue
+++ b/packages/form/src/fields/Cascader.vue
@ -24,11 +24,9 @@ import {
  getCurrentInstance,
  inject,
  PropType,
-  Ref,
  ref,
  watchEffect,
 } from 'vue';
-import { ElCascader, ElDialog } from 'element-plus';

 import { CascaderConfig, FormState } from '../schema';
 import { getConfig } from '../utils/config';
@ -56,11 +54,11 @@ export default defineComponent({

    const requestFunc = getConfig('request') as Function;

-    const cascader: Ref<null | typeof ElCascader> = ref(null);
-    const dialog: Ref<null | typeof ElDialog> = ref(null);
+    const cascader = ref<any>();
+    const dialog = ref<any>();

    const options = Array.isArray(props.config.options) ? ref(props.config.options) : ref([]);
-    const remoteData: Ref<any> = ref(null);
+    const remoteData = ref<any>(null);

    const setRemoteOptions = async function () {
      const { config } = props;
--- a/packages/form/src/fields/ColorPicker.vue
+++ b/packages/form/src/fields/ColorPicker.vue
@ -1,5 +1,4 @@
 <template>
-  <div v-if="model">
  <el-color-picker
    v-model="model[name]"
    :size="size"
@ -7,30 +6,24 @@
    :showAlpha="true"
    @change="changeHandler"
  ></el-color-picker>
-  </div>
 </template>

-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-
-import { ColorPickConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
-import { useAddField } from '../utils/useAddField';
-export default defineComponent({
-  name: 'm-fields-color-picker',
-});
-</script>
-
 <script lang="ts" setup>
-const emit = defineEmits(['change']);
+import { ColorPickConfig } from '../schema';
+import { useAddField } from '../utils/useAddField';

-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<ColorPickConfig>,
-    required: true,
-  },
-});
+const props = defineProps<{
+  config: ColorPickConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+  disabled?: boolean;
+  size: 'mini' | 'small' | 'medium';
+}>();
+
+const emit = defineEmits(['change']);

 useAddField(props.prop);

--- a/packages/form/src/fields/Display.vue
+++ b/packages/form/src/fields/Display.vue
@ -1,33 +1,23 @@
 <template>
-  <span v-if="model">{{ model[n] }}</span>
+  <span v-if="model">{{ model[name] }}</span>
 </template>

-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { DisplayConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';

-export default defineComponent({
-  name: 'm-fields-display',
-});
-</script>
+const props = defineProps<{
+  config: DisplayConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();

-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<DisplayConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
-
-if (props.config.initValue && n.value && props.model) {
-  // eslint-disable-next-line no-param-reassign,vue/no-setup-props-destructure
-  props.model[n.value] = props.config.initValue;
+if (props.config.initValue && props.model) {
+  // eslint-disable-next-line vue/no-setup-props-destructure
+  props.model[props.name] = props.config.initValue;
 }

 useAddField(props.prop);
--- a/packages/form/src/fields/Hidden.vue
+++ b/packages/form/src/fields/Hidden.vue
@ -1,29 +1,19 @@
 <template>
-  <input v-if="model" v-model="model[n]" type="hidden" />
+  <input v-if="model" v-model="model[name]" type="hidden" />
 </template>

-<script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
+<script setup lang="ts">
 import { HiddenConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';

-export default defineComponent({
-  name: 'm-fields-hidden',
-});
-</script>
-
-<script setup lang="ts">
-const props = defineProps({
-  ...fieldProps,
-  config: {
-    type: Object as PropType<HiddenConfig>,
-    required: true,
-  },
-});
-
-const n = computed(() => props.name || props.config.name || '');
+const props = defineProps<{
+  config: HiddenConfig;
+  model: any;
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();

 useAddField(props.prop);
 </script>
--- a/packages/form/src/fields/Select.vue
+++ b/packages/form/src/fields/Select.vue
@ -27,7 +27,6 @@

 <script lang="ts">
 import { defineComponent, inject, onBeforeMount, onMounted, PropType, Ref, ref, watch } from 'vue';
-import { ElSelect } from 'element-plus';

 import { FormState, SelectConfig, SelectGroupOption, SelectOption } from '../schema';
 import { getConfig } from '../utils/config';
@ -56,7 +55,7 @@ export default defineComponent({
    if (!props.model) throw new Error('不能没有model');
    useAddField(props.prop);

-    const select = ref<typeof ElSelect>();
+    const select = ref<any>();
    const mForm = inject<FormState | undefined>('mForm');
    const options = ref<SelectOption[] | SelectGroupOption[]>([]);
    const localOptions = ref<SelectOption[] | SelectGroupOption[]>([]);
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@ -105,17 +105,17 @@ const install = (app: App, opt: any) => {
  app.component(Text.name, Text);
  app.component(Number.name, Number);
  app.component(Textarea.name, Textarea);
-  app.component(Hidden.name, Hidden);
+  app.component('m-fields-hidden', Hidden);
  app.component(Date.name, Date);
  app.component(DateTime.name, DateTime);
  app.component(Time.name, Time);
  app.component(Checkbox.name, Checkbox);
  app.component(Switch.name, Switch);
  app.component(Daterange.name, Daterange);
-  app.component(ColorPicker.name, ColorPicker);
+  app.component('m-fields-color-picker', ColorPicker);
  app.component(CheckboxGroup.name, CheckboxGroup);
  app.component(RadioGroup.name, RadioGroup);
-  app.component(Display.name, Display);
+  app.component('m-fields-display', Display);
  app.component(Link.name, Link);
  app.component(Select.name, Select);
  app.component(Cascader.name, Cascader);
--- a/packages/form/tsconfig.build.json
+++ b/packages/form/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/form/tsconfig.json
+++ b/packages/form/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/form/vite.config.ts
+++ b/packages/form/vite.config.ts
@ -19,22 +19,12 @@
 import path from 'path';

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';

 import pkg from './package.json';

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],

  resolve: {
    alias:
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@ -4,7 +4,7 @@
  "sideEffects": false,
  "main": "dist/tmagic-schema.umd.js",
  "module": "dist/tmagic-schema.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-schema.mjs",
@ -13,7 +13,9 @@
    "./*": "./*"
  },
  "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -25,8 +27,8 @@
  },
  "devDependencies": {
    "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
  }
 }
--- a/packages/schema/tsconfig.build.json
+++ b/packages/schema/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/schema/tsconfig.json
+++ b/packages/schema/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/schema/vite.config.ts
+++ b/packages/schema/vite.config.ts
@ -1,17 +1,6 @@
 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
  build: {
    sourcemap: true,

--- a/packages/stage/package.json
+++ b/packages/stage/package.json
@ -6,7 +6,7 @@
  ],
  "main": "dist/tmagic-stage.umd.js",
  "module": "dist/tmagic-stage.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-stage.mjs",
@ -16,7 +16,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -40,9 +42,9 @@
    "@types/events": "^3.0.0",
    "@types/lodash-es": "^4.17.4",
    "@types/node": "^15.12.4",
+    "rimraf": "^3.0.2",
    "sass": "^1.35.1",
    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
  }
 }
--- a/packages/stage/src/StageDragResize.ts
+++ b/packages/stage/src/StageDragResize.ts
@ -484,7 +484,7 @@ export default class StageDragResize extends EventEmitter {
  }

  private setGhostElChildrenId(el: Element) {
-    for (const child of el.children) {
+    for (const child of Array.from(el.children)) {
      if (child.id) {
        child.id = `${GHOST_EL_ID_PREFIX}${child.id}`;
      }
--- a/packages/stage/tsconfig.build.json
+++ b/packages/stage/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/stage/tsconfig.json
+++ b/packages/stage/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/stage/vite.config.ts
+++ b/packages/stage/vite.config.ts
@ -19,21 +19,10 @@
 import path from 'path';

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';

 import pkg from './package.json';

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
  resolve: {
    alias:
      process.env.NODE_ENV === 'production'
--- a/packages/table/package.json
+++ b/packages/table/package.json
@ -6,7 +6,7 @@
  ],
  "main": "dist/tmagic-table.umd.js",
  "module": "dist/tmagic-table.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-table.mjs",
@ -20,7 +20,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vue-tsc --noEmit && vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -31,6 +33,7 @@
  },
  "dependencies": {
    "@tmagic/form": "1.1.0-beta.5",
+    "@tmagic/utils": "1.1.0-beta.5",
    "element-plus": "^2.2.6",
    "lodash-es": "^4.17.21",
    "vue": "^3.2.37"
@ -47,10 +50,10 @@
    "@vitejs/plugin-vue": "^3.0.1",
    "@vue/compiler-sfc": "^3.2.37",
    "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
    "sass": "^1.35.1",
    "typescript": "^4.7.4",
    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
  }
 }
--- a/packages/table/tsconfig.build.json
+++ b/packages/table/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/table/tsconfig.json
+++ b/packages/table/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/table/vite.config.ts
+++ b/packages/table/vite.config.ts
@ -19,22 +19,12 @@
 import path from 'path';

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
 import vue from '@vitejs/plugin-vue';

 import pkg from './package.json';

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
+  plugins: [vue()],

  resolve: {
    alias:
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@ -3,7 +3,7 @@
  "name": "@tmagic/utils",
  "main": "dist/tmagic-utils.umd.js",
  "module": "dist/tmagic-utils.mjs",
-  "types": "dist/types/src/index.d.ts",
+  "types": "types/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/tmagic-utils.mjs",
@ -12,7 +12,9 @@
  },
  "license": "Apache-2.0",
  "scripts": {
-    "build": "vite build"
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
  },
  "engines": {
    "node": ">=14"
@ -28,7 +30,7 @@
  "devDependencies": {
    "@types/node": "^15.12.4",
    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
-    "vite-plugin-dts": "^0.9.6"
+    "rimraf": "^3.0.2",
+    "vite": "^3.0.4"
  }
 }
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@ -31,7 +31,7 @@ export const sleep = (ms: number): Promise<void> =>
    }, ms);
  });

-export const datetimeFormatter = (v: string | Date, defaultValue = '-', f = 'YYYY-MM-DD HH:mm:ss') => {
+export const datetimeFormatter = (v: string | Date, defaultValue = '-', f = 'YYYY-MM-DD HH:mm:ss'): any => {
  let format = f;
  if (format === 'timestamp') {
    format = 'x';
--- a/packages/utils/tsconfig.build.json
+++ b/packages/utils/tsconfig.build.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@ -3,7 +3,4 @@
  "compilerOptions": {
    "baseUrl": "../..",
  },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }
--- a/packages/utils/vite.config.ts
+++ b/packages/utils/vite.config.ts
@ -17,23 +17,12 @@
 */

 import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';

 import pkg from './package.json';

 const deps = Object.keys(pkg.dependencies);

 export default defineConfig({
-  plugins: [
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-  ],
-
  build: {
    cssCodeSplit: false,
    sourcemap: true,
--- a/playground/package.json
+++ b/playground/package.json
@ -34,6 +34,6 @@
    "sass": "^1.35.1",
    "typescript": "^4.7.4",
    "vite": "^3.0.4",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -138,18 +138,18 @@ importers:
      '@types/events': ^3.0.0
      '@types/node': ^15.12.4
      events: ^3.3.0
+      rimraf: ^3.0.2
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
    dependencies:
      '@tmagic/schema': link:../schema
      events: 3.3.0
    devDependencies:
      '@types/events': 3.0.0
      '@types/node': 15.14.9
+      rimraf: 3.0.2
      typescript: 4.7.4
      vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4

  packages/editor:
    specifiers:
@ -175,13 +175,13 @@ importers:
      keycon: ^1.1.2
      lodash-es: ^4.17.21
      monaco-editor: ^0.32.1
+      rimraf: ^3.0.2
      sass: ^1.35.1
      serialize-javascript: ^6.0.0
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
      vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
    dependencies:
      '@babel/core': 7.18.2
      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
@ -208,11 +208,11 @@ importers:
      '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
      '@vue/compiler-sfc': 3.2.37
      '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4

  packages/form:
    specifiers:
@ -228,13 +228,13 @@ importers:
      element-plus: ^2.2.6
      lodash-es: ^4.17.21
      moment: ^2.29.2
+      rimraf: ^3.0.2
      sass: ^1.35.1
      sortablejs: ^1.14.0
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
      vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
    dependencies:
      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
      '@tmagic/utils': link:../utils
@ -251,23 +251,23 @@ importers:
      '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
      '@vue/compiler-sfc': 3.2.37
      '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4

  packages/schema:
    specifiers:
      '@types/node': ^15.12.4
+      rimraf: ^3.0.2
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
    devDependencies:
      '@types/node': 15.14.9
+      rimraf: 3.0.2
      typescript: 4.7.4
      vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4

  packages/stage:
    specifiers:
@ -283,10 +283,10 @@ importers:
      lodash-es: ^4.17.21
      moveable: ^0.30.0
      moveable-helper: ^0.4.0
+      rimraf: ^3.0.2
      sass: ^1.35.1
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
    dependencies:
      '@scena/guides': 0.17.0
      '@tmagic/core': link:../core
@ -301,14 +301,15 @@ importers:
      '@types/events': 3.0.0
      '@types/lodash-es': 4.17.6
      '@types/node': 15.14.9
+      rimraf: 3.0.2
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4

  packages/table:
    specifiers:
      '@tmagic/form': 1.1.0-beta.5
+      '@tmagic/utils': 1.1.0-beta.5
      '@types/color': ^3.0.1
      '@types/lodash-es': ^4.17.4
      '@types/node': ^15.12.4
@ -317,14 +318,15 @@ importers:
      '@vue/test-utils': ^2.0.0
      element-plus: ^2.2.6
      lodash-es: ^4.17.21
+      rimraf: ^3.0.2
      sass: ^1.35.1
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
      vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
    dependencies:
      '@tmagic/form': link:../form
+      '@tmagic/utils': link:../utils
      element-plus: 2.2.6_vue@3.2.37
      lodash-es: 4.17.21
      vue: 3.2.37
@ -335,11 +337,11 @@ importers:
      '@vitejs/plugin-vue': 3.0.1_vite@3.0.4+vue@3.2.37
      '@vue/compiler-sfc': 3.2.37
      '@vue/test-utils': 2.0.0_vue@3.2.37
+      rimraf: 3.0.2
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2
-      vite-plugin-dts: 0.9.10_vite@3.0.4
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4

  packages/ui:
    specifiers:
@ -413,17 +415,17 @@ importers:
      '@tmagic/schema': 1.1.0-beta.5
      '@types/node': ^15.12.4
      moment: ^2.29.2
+      rimraf: ^3.0.2
      typescript: ^4.7.4
      vite: ^3.0.4
-      vite-plugin-dts: ^0.9.6
    dependencies:
      '@tmagic/schema': link:../schema
      moment: 2.29.3
    devDependencies:
      '@types/node': 15.14.9
+      rimraf: 3.0.2
      typescript: 4.7.4
      vite: 3.0.4
-      vite-plugin-dts: 0.9.10_vite@3.0.4

  playground:
    specifiers:
@ -448,7 +450,7 @@ importers:
      vite: ^3.0.4
      vue: ^3.2.37
      vue-router: ^4.0.10
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
    dependencies:
      '@element-plus/icons-vue': 2.0.6_vue@3.2.37
      '@tmagic/editor': link:../packages/editor
@ -472,7 +474,7 @@ importers:
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2+terser@5.14.2
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4

  runtime/react:
    specifiers:
@ -577,7 +579,7 @@ importers:
      typescript: ^4.3.4
      vite: ^3.0.4
      vue: ^3.2.37
-      vue-tsc: ^0.38.2
+      vue-tsc: ^0.39.4
    dependencies:
      '@tmagic/cli': link:../../packages/cli
      '@tmagic/core': link:../../packages/core
@ -601,7 +603,7 @@ importers:
      sass: 1.52.2
      typescript: 4.7.4
      vite: 3.0.4_sass@1.52.2+terser@5.14.2
-      vue-tsc: 0.38.2_typescript@4.7.4
+      vue-tsc: 0.39.4_typescript@4.7.4

 packages:

@ -1441,15 +1443,6 @@ packages:
    engines: {node: '>= 10'}
    dev: true

-  /@ts-morph/common/0.12.3:
-    resolution: {integrity: sha512-4tUmeLyXJnJWvTFOKtcNJ1yh0a3SsTLi2MUoyj8iUNznFRN1ZquaNe7Oukqrnki2FzZkm0J9adCNLDZxUzvj+w==}
-    dependencies:
-      fast-glob: 3.2.11
-      minimatch: 3.1.2
-      mkdirp: 1.0.4
-      path-browserify: 1.0.1
-    dev: true
-
  /@tsconfig/node10/1.0.8:
    resolution: {integrity: sha512-6XFfSQmMgq0CFLY1MslA/CPUfhIL919M1rMsa5lP2P097N2Wd1sSX0tx1u4olM16fLNhtHZpRhedZJphNJqmZg==}
    dev: true
@ -1794,36 +1787,50 @@ packages:
      vue: 2.7.4
    dev: true

-  /@volar/code-gen/0.38.2:
-    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
+  /@volar/code-gen/0.39.4:
+    resolution: {integrity: sha512-2RoDdktnN5ovhJoL1NgxKwKhfgP2TzcKVWp8+1Lb67sZ+hvWRL5GjHGkvlPkS91cElpwuURUHnbNNDT+uEqXuA==}
    dependencies:
-      '@volar/source-map': 0.38.2
+      '@volar/source-map': 0.39.4
    dev: true

-  /@volar/source-map/0.38.2:
-    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
+  /@volar/source-map/0.39.4:
+    resolution: {integrity: sha512-0zp7v0Ta1rZ2nKC4RcsU94Q/wJVVDWD0AJIqRGFU8rlEs2QO+RpBgotTL6wnKyJjyTzXxhcz/7AHUcwFs2oRnw==}
    dev: true

-  /@volar/vue-code-gen/0.38.2:
-    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
+  /@volar/typescript-faster/0.39.4:
+    resolution: {integrity: sha512-nVwTr1MSeUOjm+piJge3WW8PE+JyYbkfpEsf54P0e4P+8PUPHbGRIgr2TSpAh3802JSqg2SHCoDionECT5aXYw==}
    dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
+      semver: 7.3.7
+    dev: true
+
+  /@volar/vue-code-gen/0.39.4:
+    resolution: {integrity: sha512-jQwweKAgtKhX7kDvsVcBRieyNtEywoxZFN+XTyPRvtY57Z2B7Ei9zQb/01n1l2lI+FPuskxaXdZKCn4txSKojQ==}
+    dependencies:
+      '@volar/code-gen': 0.39.4
+      '@volar/source-map': 0.39.4
      '@vue/compiler-core': 3.2.37
      '@vue/compiler-dom': 3.2.37
      '@vue/shared': 3.2.37
    dev: true

-  /@volar/vue-typescript/0.38.2:
-    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
+  /@volar/vue-language-core/0.39.4:
+    resolution: {integrity: sha512-ua4HAT8VYSf3EgY4Fl/mfpOQcUWz3gokJ8qsGIGfgKq3MxORnpp+RzKOEpMo1q+Ic550i+x0fh6Ylde76zOLww==}
    dependencies:
-      '@volar/code-gen': 0.38.2
-      '@volar/source-map': 0.38.2
-      '@volar/vue-code-gen': 0.38.2
+      '@volar/code-gen': 0.39.4
+      '@volar/source-map': 0.39.4
+      '@volar/vue-code-gen': 0.39.4
      '@vue/compiler-sfc': 3.2.37
      '@vue/reactivity': 3.2.37
    dev: true

+  /@volar/vue-typescript/0.39.4:
+    resolution: {integrity: sha512-ZIWg8EvTq53+P4DQVlrW5y+bo5v9VTOASBTrojBo0yK2frNbv/Gs7Ml4V+NmlsvIggtrPtDC/hIQChFiS5B3SA==}
+    dependencies:
+      '@volar/code-gen': 0.39.4
+      '@volar/typescript-faster': 0.39.4
+      '@volar/vue-language-core': 0.39.4
+    dev: true
+
  /@vue/babel-helper-vue-transform-on/1.0.2:
    resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}

@ -2746,12 +2753,6 @@ packages:
    resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
    engines: {node: '>=0.8'}

-  /code-block-writer/11.0.0:
-    resolution: {integrity: sha512-GEqWvEWWsOvER+g9keO4ohFoD3ymwyCnqY3hoTr7GZipYFwEhMHJw+TtV0rfgRhNImM6QWZGO2XYjlJVyYT62w==}
-    dependencies:
-      tslib: 2.3.1
-    dev: true
-
  /color-convert/1.9.3:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
    dependencies:
@ -5258,12 +5259,6 @@ packages:
    resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
    dev: true

-  /mkdirp/1.0.4:
-    resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
-    engines: {node: '>=10'}
-    hasBin: true
-    dev: true
-
  /modify-values/1.0.1:
    resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
    engines: {node: '>=0.10.0'}
@ -5564,10 +5559,6 @@ packages:
    resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
    dev: true

-  /path-browserify/1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-    dev: true
-
  /path-exists/3.0.0:
    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
    engines: {node: '>=4'}
@ -6580,13 +6571,6 @@ packages:
    resolution: {integrity: sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg==}
    dev: true

-  /ts-morph/13.0.3:
-    resolution: {integrity: sha512-pSOfUMx8Ld/WUreoSzvMFQG5i9uEiWIsBYjpU9+TTASOeUa89j5HykomeqVULm1oqWtBdleI3KEFRLrlA3zGIw==}
-    dependencies:
-      '@ts-morph/common': 0.12.3
-      code-block-writer: 11.0.0
-    dev: true
-
  /ts-node/10.8.1_7oqjshy4scgohh2k2lzivplbau:
    resolution: {integrity: sha512-Wwsnao4DQoJsN034wePSg5nZiw4YKXf56mPIAeD6wVmiv+RytNSWqc2f3fKvcUoV+Yn2+yocD71VOfQHbmVX4g==}
    hasBin: true
@ -6631,10 +6615,6 @@ packages:
    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
    dev: true

-  /tslib/2.3.1:
-    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
-    dev: true
-
  /tslib/2.4.0:
    resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}

@ -6770,18 +6750,6 @@ packages:
      spdx-expression-parse: 3.0.1
    dev: true

-  /vite-plugin-dts/0.9.10_vite@3.0.4:
-    resolution: {integrity: sha512-dNfFJXRsm3YW8k+Wm8SesSaEGOaicKdgFz5PoUpT9zUh6URr5cwu5NMOBhJgiofrzcuYtOU2Ez7JQtg68RII8g==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      vite: '>=2.4.4'
-    dependencies:
-      fast-glob: 3.2.11
-      fs-extra: 10.1.0
-      ts-morph: 13.0.3
-      vite: 3.0.4
-    dev: true
-
  /vite/2.9.14:
    resolution: {integrity: sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw==}
    engines: {node: '>=12.2.0'}
@ -7009,13 +6977,14 @@ packages:
      he: 1.2.0
    dev: true

-  /vue-tsc/0.38.2_typescript@4.7.4:
-    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
+  /vue-tsc/0.39.4_typescript@4.7.4:
+    resolution: {integrity: sha512-oGFuAdSt8Q1NatnyyJheW0P/8Sk9RDMWPNzeMHXl1OOnoXrbjz2miMcccujySCpA48+AhzdtyFY1PL0XTPsOSg==}
    hasBin: true
    peerDependencies:
      typescript: '*'
    dependencies:
-      '@volar/vue-typescript': 0.38.2
+      '@volar/vue-language-core': 0.39.4
+      '@volar/vue-typescript': 0.39.4
      typescript: 4.7.4
    dev: true

--- a/runtime/vue3/package.json
+++ b/runtime/vue3/package.json
@ -39,6 +39,6 @@
    "sass": "^1.35.1",
    "typescript": "^4.3.4",
    "vite": "^3.0.4",
-    "vue-tsc": "^0.38.2"
+    "vue-tsc": "^0.39.4"
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,10 +1,10 @@
 {
  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ESNext",
+    "module": "ESNext",
    "strict": true,
    "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
@ -13,13 +13,9 @@
    "emitDecoratorMetadata": true,
    "resolveJsonModule": true,
    "sourceMap": true,
+    "useDefineForClassFields": true,
    "baseUrl": ".",
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
+    "lib": ["ESNext", "DOM"],
    "paths": {
      // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
      "@tmagic/*": ["packages/*/src"],
@ -31,6 +27,7 @@
    ],
  },
  "exclude": [
-    "**/dist/**/*"
+    "**/dist/**/*",
+    "**/node_modules/**/*",
  ],
 }