fix(projects): fix route const update

soybeanjs · Sep 8, 2023 · 2cc84f8 · 2cc84f8
1 parent facaa69
commit 2cc84f8
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 24 deletions.
diff --git a/examples/template-vue/package.json b/examples/template-vue/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
+    "debug": "vite --debug",
     "build": "run-s type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",

diff --git a/examples/template-vue/src/layouts/base-layout/index.vue b/examples/template-vue/src/layouts/base-layout/index.vue
@@ -10,7 +10,7 @@
 import { RouterView } from 'vue-router';
 
 defineOptions({
-  name: 'DefaultLayout'
+  name: 'BaseLayout'
 });
 </script>
 

diff --git a/examples/template-vue/src/layouts/blank-layout/index.vue b/examples/template-vue/src/layouts/blank-layout/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <RouterView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+
+defineOptions({
+  name: 'BlankLayout'
+});
+</script>
+
+<style scoped></style>
diff --git a/examples/template-vue/src/router/elegant/imports.ts b/examples/template-vue/src/router/elegant/imports.ts
@@ -6,9 +6,12 @@
 import type { RouteComponent } from "vue-router";
 import type { LastLevelRouteKey, RouteLayout } from "@elegant-router/types";
 
+import BaseLayout from "@/layouts/base-layout/index.vue";
+import BlankLayout from "@/layouts/blank-layout/index.vue";
 
 export const layouts: Record<RouteLayout, RouteComponent | (() => Promise<RouteComponent>)> = {
-  base: () => import("@/layouts/base-layout/index.vue"),
+  base: BaseLayout,
+  blank: BlankLayout,
 };
 
 export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<RouteComponent>)> = {

diff --git a/examples/template-vue/src/router/elegant/routes.ts b/examples/template-vue/src/router/elegant/routes.ts
@@ -6,7 +6,7 @@ import type { ElegantRoute } from '@elegant-router/types';
 export const autoRoutes: ElegantRoute[] = [
   {
     path: '/403',
-    component: 'layout.base',
+    component: 'layout.blank',
     children: [
       {
         name: '403',

diff --git a/examples/template-vue/src/typings/elegant-router.d.ts b/examples/template-vue/src/typings/elegant-router.d.ts
@@ -9,7 +9,7 @@ declare module "@elegant-router/types" {
   /**
    * route layout
    */
-  export type RouteLayout = "base";
+  export type RouteLayout = "base" | "blank";
 
   /**
    * route map

diff --git a/examples/template-vue/vite.config.ts b/examples/template-vue/vite.config.ts
@@ -6,7 +6,18 @@ import Inspect from 'vite-plugin-inspect';
 import ElegantVueRouter from '@elegant-router/vue/vite';
 
 export default defineConfig({
-  plugins: [vue(), vueJsx(), ElegantVueRouter(), Inspect()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    ElegantVueRouter({
+      layouts: {
+        base: 'src/layouts/base-layout/index.vue',
+        blank: 'src/layouts/blank-layout/index.vue'
+      },
+      layoutLazyImport: () => false
+    }),
+    Inspect()
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))

diff --git a/packages/vue/src/context/const.ts b/packages/vue/src/context/const.ts
@@ -67,12 +67,6 @@ export const autoRoutes: ElegantRoute[] = [];
   return code;
 }
 
-function isValidLayout(layout: string, layouts: Record<string, string>) {
-  const layoutName = layout.replace(LAYOUT_PREFIX, '');
-
-  return Boolean(layouts[layoutName]);
-}
-
 export function getUpdatedRouteConst(oldConst: AutoRoute[], newConst: AutoRoute[], options: ElegantVueRouterOption) {
   const updated = newConst.map(item => {
     const hasName = Boolean(item?.name);
@@ -88,20 +82,28 @@ export function getUpdatedRouteConst(oldConst: AutoRoute[], newConst: AutoRoute[
     }
 
     if (findItem.component) {
-      /**
-       * invalid layout
-       * @description maybe the layouts are updated
-       */
-      const isInValidLayout =
-        findItem.component.includes(LAYOUT_PREFIX) && !isValidLayout(findItem.component, options.layouts);
-
-      if (!isInValidLayout) {
+      const isView = findItem.component.startsWith(VIEW_PREFIX);
+      const isLayout = findItem.component.startsWith(LAYOUT_PREFIX);
+      const layoutName = findItem.component.replace(LAYOUT_PREFIX, '');
+      const hasLayout = Boolean(options.layouts[layoutName]);
+
+      if (isView || (isLayout && !hasLayout)) {
         findItem.component = item.component;
       }
     }
 
     if (findItem.redirect) {
-      findItem.redirect = item.redirect;
+      const { children = [] } = findItem;
+
+      const childrenNames = children.map(i => i.name);
+
+      const { name: redirectName } = findItem.redirect as { name: string };
+
+      const hasRedirect = redirectName && childrenNames.includes(redirectName);
+
+      if (!hasRedirect) {
+        findItem.redirect = item.redirect;
+      }
     }
 
     const children = getUpdatedRouteConst(findItem.children || [], item.children || [], options);

diff --git a/packages/vue/src/context/options.ts b/packages/vue/src/context/options.ts
@@ -14,7 +14,8 @@ export function createPluginOptions(erOptions: ElegantRouterOption, options?: Pa
     'not-found': '/:pathMatch(.*)*'
   };
   const DEFAULT_LAYOUTS: Record<string, string> = {
-    base: 'src/layouts/base-layout/index.vue'
+    base: 'src/layouts/base-layout/index.vue',
+    blank: 'src/layouts/blank-layout/index.vue'
   };
 
   const opts: ElegantVueRouterOption = {
@@ -25,7 +26,7 @@ export function createPluginOptions(erOptions: ElegantRouterOption, options?: Pa
     customRoutesMap: CUSTOM_ROUTES_MAP,
     layouts: DEFAULT_LAYOUTS,
     defaultLayout: Object.keys(DEFAULT_LAYOUTS)[0],
-    layoutLazyImport: _name => true,
+    layoutLazyImport: _name => false,
     transformDir: 'src/router/elegant/transform.ts',
     onRouteMetaGen: name => ({
       title: name

diff --git a/packages/vue/src/types/index.ts b/packages/vue/src/types/index.ts
@@ -49,7 +49,8 @@ export interface ElegantVueRouterOption extends ElegantRouterOption {
    * @default
    * ```ts
    * const layouts: Record<string, string> = {
-   *   base: 'src/layouts/base-layout/index.vue'
+   *   base: 'src/layouts/base-layout/index.vue',
+   *   blank: 'src/layouts/blank-layout/index.vue'
    * }
    * ```
    */
@@ -62,7 +63,7 @@ export interface ElegantVueRouterOption extends ElegantRouterOption {
   /**
    * whether the route is lazy import
    * @param layoutName the layout name
-   * @default _name => true
+   * @default _name => false
    */
   layoutLazyImport(layoutName: string): boolean;
   /**
@@ -73,6 +74,12 @@ export interface ElegantVueRouterOption extends ElegantRouterOption {
   /**
    * the route meta generator
    * @param routeName the route name
+   * @default
+   * ```ts
+   *  const onRouteMetaGen = (routeName: string) => ({
+   *    title: routeName
+   *  })
+   * ```
    */
   onRouteMetaGen(routeName: string): Record<string, unknown>;
 }