修复typescript编译错误以及升级vite

README.md

@@ -1,4 +1,4 @@
-# 基于 Vite2.x + Vue3.x + TypeScript H5 低代码平台
+# 基于 Vite4.x + Vue3.x + TypeScript H5 低代码平台
 
 [![license](https://img.shields.io/github/license/buqiyuan/vite-vue3-lowcode.svg)](LICENSE)
 
@@ -66,7 +66,7 @@ pnpm build
 ## 技术栈
 
 - 编程语言：[TypeScript 4.x](https://www.typescriptlang.org/zh/) + [JavaScript](https://www.javascript.com/)
-- 构建工具：[Vite 2.x](https://cn.vitejs.dev/)
+- 构建工具：[Vite 4.x](https://cn.vitejs.dev/)
 - 前端框架：[Vue 3.x](https://v3.cn.vuejs.org/)
 - 路由工具：[Vue Router 4.x](https://next.router.vuejs.org/zh/index.html)
 - 状态管理：[Vuex 4.x](https://next.vuex.vuejs.org/)

auto-imports.d.ts

@@ -1,5 +1,8 @@
-// Generated by 'unplugin-auto-import'
-export {};
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope'];
   const computed: typeof import('vue')['computed'];
@@ -20,6 +23,8 @@ declare global {
   const nextTick: typeof import('vue')['nextTick'];
   const onActivated: typeof import('vue')['onActivated'];
   const onBeforeMount: typeof import('vue')['onBeforeMount'];
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave'];
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate'];
   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'];
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'];
   const onDeactivated: typeof import('vue')['onDeactivated'];
@@ -42,11 +47,13 @@ declare global {
   const toRaw: typeof import('vue')['toRaw'];
   const toRef: typeof import('vue')['toRef'];
   const toRefs: typeof import('vue')['toRefs'];
+  const toValue: typeof import('vue')['toValue'];
   const triggerRef: typeof import('vue')['triggerRef'];
   const unref: typeof import('vue')['unref'];
   const useAttrs: typeof import('vue')['useAttrs'];
   const useCssModule: typeof import('vue')['useCssModule'];
   const useCssVars: typeof import('vue')['useCssVars'];
+  const useLink: typeof import('vue-router')['useLink'];
   const useRoute: typeof import('vue-router')['useRoute'];
   const useRouter: typeof import('vue-router')['useRouter'];
   const useSlots: typeof import('vue')['useSlots'];
@@ -55,3 +62,16 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect'];
   const watchSyncEffect: typeof import('vue')['watchSyncEffect'];
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type {
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+  } from 'vue';
+}

components.d.ts

@@ -1,7 +1,9 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core';
+import '@vue/runtime-core'
 
 export {};
 

package.json

@@ -60,8 +60,8 @@
     "@types/node": "^18.0.3",
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
-    "@vitejs/plugin-legacy": "^1.8.2",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-legacy": "^4.0.4",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "commitizen": "^4.2.4",
     "conventional-changelog-cli": "^2.2.2",
@@ -89,12 +89,12 @@
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.3.0",
     "typescript": "^4.7.4",
-    "unplugin-auto-import": "^0.9.2",
-    "unplugin-vue-components": "^0.21.1",
-    "unplugin-vue-define-options": "^0.6.2",
-    "vite": "2.9.14",
+    "unplugin-auto-import": "^0.16.4",
+    "unplugin-vue-components": "^0.25.0",
+    "unplugin-vue-define-options": "^1.3.7",
+    "vite": "^4.3.9",
     "vite-plugin-checker": "^0.4.8",
-    "vite-plugin-windicss": "^1.8.6",
+    "vite-plugin-windicss": "^1.9.0",
     "vue-eslint-parser": "^9.0.3",
     "vue-tsc": "^0.38.3",
     "windicss": "^3.5.6"

src/packages/base-widgets/index.ts

@@ -1,12 +1,23 @@
 import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
 
-const modules = import.meta.globEager('./*/index.tsx');
+const modules = import.meta.globEager('./*/index.tsx') as Record<
+  string,
+  undefined | { default: VisualEditorComponent } | VisualEditorComponent
+>;
+
+type DefaultModule = { default: VisualEditorComponent };
 
 const components: Record<string, VisualEditorComponent> = {};
 
 Object.entries(modules).forEach(([key, module]) => {
   const name = key.replace(/\.\/(.*)\/index\.(tsx|vue)/, '$1');
-  components[name] = module?.default || module;
+  if (module) {
+    if (Object.prototype.hasOwnProperty.call(module, 'default')) {
+      components[name] = (module as DefaultModule).default;
+    } else {
+      components[name] = module as VisualEditorComponent;
+    }
+  }
 });
 
 console.log(components, 'base-widgets');

src/packages/container-component/index.ts

@@ -1,12 +1,24 @@
 import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils';
 
-const modules = import.meta.globEager('./*/index.tsx');
+const modules = import.meta.globEager('./*/index.tsx') as Record<
+  string,
+  undefined | { default: VisualEditorComponent } | VisualEditorComponent
+>;
+
+type DefaultModule = { default: VisualEditorComponent };
 
 const components: Record<string, VisualEditorComponent> = {};
 
 Object.keys(modules).forEach((key: string) => {
   const name = key.replace(/\.\/(.*)\/index\.(tsx|vue)/, '$1');
-  components[name] = modules[key]?.default || modules[key];
+  const module = modules[key];
+  if (module) {
+    if (Object.prototype.hasOwnProperty.call(module, 'default')) {
+      components[name] = (module as DefaultModule).default;
+    } else {
+      components[name] = module as VisualEditorComponent;
+    }
+  }
 });
 
 console.log(components, 'container-component');

src/visual-editor/components/left-aside/components/index.ts

@@ -1,14 +1,19 @@
 import { DefineComponent } from 'vue';
 
-const modules = import.meta.globEager('./*/index.(tsx|vue)');
+const modules = import.meta.globEager('./*/index.(tsx|vue)') as Record<
+  string,
+  undefined | { default: DefineComponent }
+>;
 
 const components: Record<string, DefineComponent> = {};
 
 console.log(modules, '起航');
 
 for (const path in modules) {
-  const comp = modules[path].default;
-  components[comp.name || path.split('/')[1]] = comp;
+  const comp = modules[path]?.default;
+  if (comp) {
+    components[comp.name || path.split('/')[1]] = comp;
+  }
 }
 console.log('left-aside components:', components);