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

.eslintignore

@@ -4,6 +4,7 @@ entry-dist
 coverage
 node_modules
 dest
+types
 
 comp-entry.ts
 config-entry.ts

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 dist
+types
 
 .temp
 .cache

magic-admin/web/tsconfig.json

@@ -15,7 +15,7 @@
     "types": [
       "webpack-env",
       "jest",
-      "./types",
+      "./typings",
       "node"
     ],
     "paths": {

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",

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": "^3.0.4"
-    "vite-plugin-dts": "^0.9.6"
   }
 }

packages/core/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/core/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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'

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.39.4"
-    "vue-tsc": "^0.38.2"
   }
 }

packages/editor/src/components/ContentMenu.vue

@@ -22,50 +22,45 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
-export default defineComponent({
+const props = withDefaults(
-  components: { ToolButton },
+  defineProps<{
-
+    menuData?: MenuItem[];
-  props: {
+    isSubMenu?: boolean;
-    menuData: {
+  }>(),
-      type: Array as PropType<MenuItem[]>,
+  {
-      default: () => [],
+    menuData: () => [],
+    isSubMenu: false,
   },
+);
 
-    isSubMenu: {
+const emit = defineEmits(['hide', 'show']);
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  emits: ['hide', 'show'],
+const menu = ref<HTMLDivElement>();
-
+const subMenu = ref<any>();
-  setup(props, { emit }) {
+const visible = ref(false);
-    const menu = ref<HTMLDivElement>();
+const subMenuData = ref<MenuItem[]>([]);
-    const subMenu = ref<any>();
+const menuStyle = ref({
-    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(() => {
+const show = (e: MouseEvent) => {
-      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) {
   // 加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>

packages/editor/src/components/ToolButton.vue

@@ -50,8 +50,8 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, markRaw, PropType } from 'vue';
+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({
+const props = defineProps({
-  components: { MIcon, ArrowDown },
-
-  props: {
   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 services = inject<Services>('services');
+const uiService = services?.uiService;
-    const uiService = services?.uiService;
 
-    const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
+const zoom = computed((): number => uiService?.get<number>('zoom') ?? 1);
-    const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
+const showGuides = computed((): boolean => uiService?.get<boolean>('showGuides') ?? true);
-    const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
+const showRule = computed((): boolean => uiService?.get<boolean>('showRule') ?? true);
 
-    const zoomInHandler = () => uiService?.zoom(0.1);
+const zoomInHandler = () => uiService?.zoom(0.1);
-    const zoomOutHandler = () => 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 {
+const display = computed(() => {
-      ZoomIn: markRaw(ZoomIn),
-      ZoomOut: markRaw(ZoomOut),
-
-      item,
-      zoom,
-      disabled,
-      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,
+const dropdownHandler = (command: any) => {
-      zoomOutHandler,
-
-      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>

packages/editor/src/fields/UISelect.vue

@@ -12,46 +12,37 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
-import { Close, Delete, Pointer } from '@element-plus/icons-vue';
+import { Close, Delete } from '@element-plus/icons-vue';
 
 import { FormState } from '@tmagic/form';
 
 import { Services } from '@editor/type';
 
-export default defineComponent({
+const props = defineProps<{
-  name: 'm-fields-ui-select',
+  labelWidth: string;
+  config: any;
+  model: any;
+  prop: string;
+  name: string;
+}>();
 
-  props: {
+const emit = defineEmits(['change']);
-    labelWidth: String,
-    config: Object,
-    model: Object,
-    prop: {
-      type: String,
-      default() {
-        return '';
-      },
-    },
-    name: String,
-  },
 
-  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 cancelHandler = () => {
-    const services = inject<Services>('services');
-    const mForm = inject<FormState>('mForm');
-    const val = computed(() => props.model[props.name]);
-    const uiSelectMode = ref(false);
-
-    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 {
+const toName = computed(() => {
-      Delete: markRaw(Delete),
-      Pointer: markRaw(Pointer),
-      Close: markRaw(Close),
-
-      val,
-      uiSelectMode,
-      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,
+const deleteHandler = () => {
-
-      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;

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">
+<script lang="ts" setup>
-import {
+import { computed, ComputedRef, inject, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
-  computed,
-  ComputedRef,
-  defineComponent,
-  inject,
-  markRaw,
-  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({
+const services = inject<Services>('services');
-  components: { ArrowLeftBold, ArrowRightBold, CaretBottom, Plus, ToolButton },
+const editorService = services?.editorService;
 
-  setup() {
+const root = computed(() => editorService?.get<MApp>('root'));
-    const services = inject<Services>('services');
-    const editorService = services?.editorService;
 
-    const root = computed(() => editorService?.get<MApp>('root'));
+const scrollState = useScroll(root);
+const page = computed(() => editorService?.get('page'));
 
-    return {
+const switchPage = (page: MPage) => {
-      Delete: markRaw(Delete),
-      DocumentCopy: markRaw(DocumentCopy),
-
-      ...useScroll(root),
-
-      root,
-      page: computed(() => editorService?.get('page')),
-
-      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>

packages/editor/src/layouts/workspace/Stage.vue

@@ -20,19 +20,8 @@
   </scroll-viewer>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import {
+import { computed, inject, markRaw, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
-  computed,
-  defineComponent,
-  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({
+let stage: StageCore | null = null;
-  name: 'magic-stage',
+let runtime: Runtime | null = null;
 
-  components: {
+const services = inject<Services>('services');
-    ViewerMenu,
+const stageOptions = inject<StageOptions>('stageOptions');
-    ScrollViewer,
-  },
 
-  setup() {
+const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
-    let stage: StageCore | null = null;
+const stageContainer = ref<HTMLDivElement>();
-    let runtime: Runtime | null = null;
+const menu = ref<InstanceType<typeof ViewerMenu>>();
 
-    const services = inject<Services>('services');
+const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
-    const stageOptions = inject<StageOptions>('stageOptions');
+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 getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
-    const stageContainer = ref<HTMLDivElement>();
-    const menu = ref<InstanceType<typeof ViewerMenu>>();
 
-    const isMultiSelect = computed(() => services?.editorService.get('nodes')?.length > 1);
+watchEffect(() => {
-    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(() => {
   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 {
+const contextmenuHandler = (e: MouseEvent) => {
-      stageWrap,
-      stageContainer,
-      menu,
-      stageRect,
-      zoom,
-      isMultiSelect,
-
-      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(
+  const parentEl: HTMLElement | null | undefined = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
-          `.${stageOptions?.containerHighlightClassName}`,
-        );
 
   let parent: MContainer | undefined = page.value;
   if (parentEl) {
@@ -274,8 +244,5 @@ export default defineComponent({
 
     services?.editorService.add(config, parent);
   }
-      },
+};
-    };
-  },
-});
 </script>

packages/editor/src/layouts/workspace/ViewerMenu.vue

@@ -2,8 +2,8 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, markRaw, onMounted, reactive, ref, watch } from 'vue';
+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({
+const props = withDefaults(defineProps<{ isMultiSelect?: boolean }>(), { isMultiSelect: false });
-  components: { ContentMenu },
 
-  props: {
+const services = inject<Services>('services');
-    isMultiSelect: {
+const editorService = services?.editorService;
-      type: Boolean,
+const menu = ref<InstanceType<typeof ContentMenu>>();
-      default: false,
+const canPaste = ref(false);
-    },
+const canCenter = ref(false);
-  },
 
-  setup(props) {
+const node = computed(() => editorService?.get<MNode>('node'));
-    const services = inject<Services>('services');
+const nodes = computed(() => editorService?.get<MNode[]>('nodes'));
-    const editorService = services?.editorService;
+const parent = computed(() => editorService?.get('parent'));
-    const menu = ref<InstanceType<typeof ContentMenu>>();
+const stage = computed(() => editorService?.get<StageCore>('stage'));
-    const canPaste = ref(false);
-    const canCenter = ref(false);
 
-    const node = computed(() => editorService?.get<MNode>('node'));
+const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
-    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 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 {
+const show = (e: MouseEvent) => {
-      menu,
-      menuData,
-      show(e: MouseEvent) {
   menu.value?.show(e);
-      },
+};
-    };
+
-  },
+defineExpose({ show });
-});
 </script>

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;
   }
 }

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,

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"
+	],
+}

packages/editor/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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: [
+  plugins: [vue()],
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
 
   resolve: {
     alias:
@@ -67,12 +57,7 @@ export default defineConfig({
     rollupOptions: {
       // 确保外部化处理那些你不想打包进库的依赖
       external(id: string) {
-        return (
+        return Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id));
-          /^vue/.test(id) ||
-          /^element-plus/.test(id) ||
-          /^@tmagic\//.test(id) ||
-          Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id))
-        );
       },
 
       output: {

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.39.4"
-    "vue-tsc": "^0.38.2"
   }
 }

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>();

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 cascader = ref<any>();
-    const dialog: Ref<null | typeof ElDialog> = ref(null);
+    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;

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

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">
+<script setup lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
-
 import { DisplayConfig } from '../schema';
-import fieldProps from '../utils/fieldProps';
 import { useAddField } from '../utils/useAddField';
 
-export default defineComponent({
+const props = defineProps<{
-  name: 'm-fields-display',
+  config: DisplayConfig;
-});
+  model: any;
-</script>
+  initValues?: any;
+  values?: any;
+  name: string;
+  prop: string;
+}>();
 
-<script setup lang="ts">
+if (props.config.initValue && props.model) {
-const props = defineProps({
+  // eslint-disable-next-line vue/no-setup-props-destructure
-  ...fieldProps,
+  props.model[props.name] = props.config.initValue;
-  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;
 }
 
 useAddField(props.prop);

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

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[]>([]);

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);

packages/form/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/form/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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: [
+  plugins: [vue()],
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
 
   resolve: {
     alias:

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": "^3.0.4"
-    "vite-plugin-dts": "^0.9.6"
   }
 }

packages/schema/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/schema/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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,
 

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": "^3.0.4"
-    "vite-plugin-dts": "^0.9.6"
   }
 }

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}`;
       }

packages/stage/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/stage/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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'

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.39.4"
-    "vue-tsc": "^0.38.2"
   }
 }

packages/table/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/table/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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: [
+  plugins: [vue()],
-    dts({
-      outputDir: 'dist/types',
-      include: ['src/**/*'],
-      staticImport: true,
-      insertTypesEntry: true,
-      logDiagnostics: true,
-    }),
-    vue(),
-  ],
 
   resolve: {
     alias:

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",
+    "rimraf": "^3.0.2",
-    "vite-plugin-dts": "^0.9.6"
+    "vite": "^3.0.4"
   }
 }

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';

packages/utils/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}

packages/utils/tsconfig.json

@@ -3,7 +3,4 @@
   "compilerOptions": {
     "baseUrl": "../..",
   },
-  "exclude": [
-    "**/dist/**/*"
-  ],
 }

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,

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"
   }
 }

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.39.4_typescript@4.7.4
-      vue-tsc: 0.38.2_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.39.4_typescript@4.7.4
-      vue-tsc: 0.38.2_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.39.4_typescript@4.7.4
-      vue-tsc: 0.38.2_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:
+  /@volar/code-gen/0.39.4:
-    resolution: {integrity: sha512-H81I6d7rZB7teqL+zhK/Xz1v0/kKkUwkB0Aq6b4+BTCqcJeiZkoWxd0gFhrhWTnUoqiM83lhoTGo2vkvx5YagQ==}
+    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:
+  /@volar/source-map/0.39.4:
-    resolution: {integrity: sha512-DWcYbYt9SPwk0r4VmXk1F0v4X5+hCqH1JRkAWSeJymQyXCQ2OQDEbY2PF12a7y2qn4FUBD2gOba2TynAqI8ZFQ==}
+    resolution: {integrity: sha512-0zp7v0Ta1rZ2nKC4RcsU94Q/wJVVDWD0AJIqRGFU8rlEs2QO+RpBgotTL6wnKyJjyTzXxhcz/7AHUcwFs2oRnw==}
     dev: true
 
-  /@volar/vue-code-gen/0.38.2:
+  /@volar/typescript-faster/0.39.4:
-    resolution: {integrity: sha512-whLunD6phSGWBUHZKdTxeglrpzQu26ii8CRVapFdjfyMaVhQ7ESNeIAhkTVyg2ovOPc0PiDYPQEPzfWAADIWog==}
+    resolution: {integrity: sha512-nVwTr1MSeUOjm+piJge3WW8PE+JyYbkfpEsf54P0e4P+8PUPHbGRIgr2TSpAh3802JSqg2SHCoDionECT5aXYw==}
     dependencies:
-      '@volar/code-gen': 0.38.2
+      semver: 7.3.7
-      '@volar/source-map': 0.38.2
+    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:
+  /@volar/vue-language-core/0.39.4:
-    resolution: {integrity: sha512-5IKvSK2m5yUmH6iu/tNScVlvJGuiHawTfSmjxaMs+/tod25WeK37LEdf+pdKtlJ30bYTQmmkAuEfG01QvvBRGQ==}
+    resolution: {integrity: sha512-ua4HAT8VYSf3EgY4Fl/mfpOQcUWz3gokJ8qsGIGfgKq3MxORnpp+RzKOEpMo1q+Ic550i+x0fh6Ylde76zOLww==}
     dependencies:
-      '@volar/code-gen': 0.38.2
+      '@volar/code-gen': 0.39.4
-      '@volar/source-map': 0.38.2
+      '@volar/source-map': 0.39.4
-      '@volar/vue-code-gen': 0.38.2
+      '@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:
+  /vue-tsc/0.39.4_typescript@4.7.4:
-    resolution: {integrity: sha512-+OMmpw9BZC9khul3I1HGtWchv7BCiaM7NvfdilVAiOFkjnivIoaW6jJm6YPQJaEPouePtpkDUWovyzgNxWdDsw==}
+    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
 

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"
   }
 }

tsconfig.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ESNext",
-    "module": "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": [
+    "lib": ["ESNext", "DOM"],
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
     "paths": {
       // 内部模块都指向 src/index.ts, 会有更好的代码跳转体验.
       "@tmagic/*": ["packages/*/src"],
@@ -31,6 +27,7 @@
     ],
   },
   "exclude": [
-    "**/dist/**/*"
+    "**/dist/**/*",
+    "**/node_modules/**/*",
   ],
 }