fix: #232 auto generate tabbar list item (#234)

* fix: #232 auto generate tabbar list item

* fix: check page has changed after read

* perf: reduce traversal

* fix: typo error

Author: edwinhuish

packages/core/src/context.ts

@@ -1,5 +1,6 @@
 import type { FSWatcher } from 'chokidar'
 import type { Logger, ViteDevServer } from 'vite'
+import type { TabBar, TabBarItem } from './config'
 import type { PagesConfig } from './config/types'
 import type { PageMetaDatum, PagePath, ResolvedOptions, SubPageMetaDatum, UserOptions } from './types'
 import path from 'node:path'
@@ -11,8 +12,8 @@ import dbg from 'debug'
 import detectIndent from 'detect-indent'
 import detectNewline from 'detect-newline'
 import { loadConfig } from 'unconfig'
-import { OUTPUT_NAME } from './constant'
 
+import { OUTPUT_NAME } from './constant'
 import { writeDeclaration } from './declaration'
 import { checkPagesJsonFile, getPageFiles, readFileSync, writeFileSync } from './files'
 import { resolveOptions } from './options'
@@ -279,6 +280,37 @@ export class PageContext {
     debug.subPages(this.subPageMetaData)
   }
 
+  private async getTabBarMerged(): Promise<TabBar> {
+    const tabBar = {
+      ...this.pagesGlobConfig?.tabBar,
+      list: this.pagesGlobConfig?.tabBar?.list || [],
+    }
+
+    const pagePaths = new Map<string, boolean>()
+    for (const item of tabBar.list) {
+      pagePaths.set(item.pagePath, true)
+    }
+
+    const tabBarItems: (TabBarItem & { index: number })[] = []
+    for (const [_, page] of this.pages) {
+      const tabbar = await page.getTabBar()
+      if (tabbar) {
+        tabBarItems.push(tabbar)
+      }
+    }
+
+    tabBarItems.sort((a, b) => a.index - b.index)
+
+    for (const item of tabBarItems) {
+      if (!pagePaths.has(item.pagePath)) {
+        const { index: _, ...tabbar } = item
+        tabBar.list.push(tabbar)
+      }
+    }
+
+    return tabBar
+  }
+
   async updatePagesJSON(filepath?: string) {
     if (filepath) {
       let page = this.pages.get(filepath)
@@ -292,9 +324,12 @@ export class PageContext {
         }
         page = subPage
       }
-      if (page && !await page.hasChanged()) {
-        debug.cache(`The route block on page ${filepath} did not send any changes, skipping`)
-        return false
+      if (page) {
+        await page.read()
+        if (!page.hasChanged()) {
+          debug.cache(`The route block on page ${filepath} did not send any changes, skipping`)
+          return false
+        }
       }
     }
 
@@ -331,6 +366,7 @@ export class PageContext {
       ...this.pagesGlobConfig,
       pages: this.pageMetaData,
       subPackages: this.subPageMetaData,
+      tabBar: await this.getTabBarMerged(),
     }
 
     const pagesJson = cjStringify(

packages/core/src/page.ts

@@ -1,4 +1,5 @@
 import type { SFCDescriptor, SFCParseOptions } from '@vue/compiler-sfc'
+import type { TabBarItem } from './config'
 import type { PageContext } from './context'
 import type { PageMetaDatum, PagePath, RouteBlockLang, UserPageMeta } from './types'
 import { readFileSync } from 'node:fs'
@@ -15,60 +16,76 @@ export class Page {
   ctx: PageContext
 
   path: PagePath
+  uri: string
 
-  private rawOptions: string = ''
-  private options: PageMetaDatum | undefined
+  changed: boolean = true
+
+  private raw: string = ''
+  private meta: UserPageMeta | undefined
 
   constructor(ctx: PageContext, path: PagePath) {
     this.ctx = ctx
     this.path = path
+    this.uri = normalizePath(path.relativePath.replace(extname(path.relativePath), ''))
   }
 
-  public async getPageMeta(forceUpdate = false) {
-    if (forceUpdate || !this.options) {
-      await this.readPageMeta()
+  public async getPageMeta(forceUpdate = false): Promise<PageMetaDatum> {
+    if (forceUpdate || !this.meta) {
+      await this.read()
     }
-    return this.options!
-  }
 
-  public async hasChanged() {
-    const { hasChanged } = await this.readPageMeta()
-    return hasChanged
+    const { path, tabBar: _, ...others } = this.meta!
+
+    return {
+      path: path ?? this.uri,
+      ...others,
+    }
   }
 
-  public async readPageMeta() {
-    try {
-      const { relativePath } = this.path
+  public async getTabBar(forceUpdate = false): Promise<TabBarItem & { index: number } | undefined> {
+    if (forceUpdate || !this.meta) {
+      await this.read()
+    }
 
-      const { path, ...others } = await this.readPageMetaFromFile()
-      this.options = {
-        path: path ?? normalizePath(relativePath.replace(extname(relativePath), '')),
-        ...others,
-      }
+    const { tabBar } = this.meta!
 
-      const raw = (this.options ? JSON.stringify(this.options) : '')
-      const hasChanged = this.rawOptions !== raw
-      this.rawOptions = raw
-      return {
-        options: this.options,
-        hasChanged,
-      }
+    if (tabBar === undefined) {
+      return undefined
     }
-    catch (err: any) {
-      throw new Error(`Read page options fail in ${this.path.relativePath}\n${err.message}`)
+
+    return {
+      ...tabBar,
+      pagePath: tabBar.pagePath || this.uri,
+      index: tabBar.index || 0,
     }
   }
 
+  public hasChanged() {
+    return this.changed
+  }
+
+  public async read() {
+    this.meta = await this.readPageMetaFromFile()
+    const raw = (this.meta ? JSON.stringify(this.meta) : '')
+    this.changed = this.raw !== raw
+    this.raw = raw
+  }
+
   private async readPageMetaFromFile(): Promise<UserPageMeta> {
-    const content = readFileSync(this.path.absolutePath, 'utf-8')
-    const sfc = parseSFC(content, { filename: this.path.absolutePath })
+    try {
+      const content = readFileSync(this.path.absolutePath, 'utf-8')
+      const sfc = parseSFC(content, { filename: this.path.absolutePath })
 
-    const meta = await tryPageMetaFromMacro(sfc)
-    if (meta) {
-      return meta
-    }
+      const meta = await tryPageMetaFromMacro(sfc)
+      if (meta) {
+        return meta
+      }
 
-    return tryPageMetaFromCustomBlock(sfc, this.ctx.options.routeBlockLang)
+      return tryPageMetaFromCustomBlock(sfc, this.ctx.options.routeBlockLang)
+    }
+    catch (err: any) {
+      throw new Error(`Read page meta fail in ${this.path.relativePath}\n${err.message}`)
+    }
   }
 }
 

packages/core/src/types.ts

@@ -1,6 +1,6 @@
 import type { CommentJSONValue } from 'comment-json'
 import type { LoadConfigSource } from 'unconfig'
-import type { GlobalStyle, PagesConfig } from './config'
+import type { GlobalStyle, PagesConfig, TabBarItem } from './config'
 import type { PageContext } from './context'
 import type { debug } from './utils'
 
@@ -144,12 +144,30 @@ export interface SubPageMetaDatum {
   pages: PageMetaDatum[]
 }
 
+export interface UserTabBarItem extends Partial<TabBarItem> {
+  /**
+   * 配置页面路径
+   * @deprecated 可选，将会根据文件路径自动生成
+   */
+  pagePath?: string
+
+  /**
+   * 排序，数字越小越靠前
+   */
+  index?: number
+}
+
 export interface UserPageMeta extends Partial<PageMetaDatum> {
   /**
    * 配置页面路径
    * @deprecated 可选，将会根据文件路径自动生成
    */
   path?: string
+
+  /**
+   * 底部 tabBar 的子项 [tabBar](https://uniapp.dcloud.net.cn/collocation/pages#tabBar)
+   */
+  tabBar?: UserTabBarItem
 }
 
 export type MaybePromise<T> = T | Promise<T>

packages/playground/src/pages/define-page/object.vue

@@ -6,7 +6,7 @@ definePage({
   middlewares: [
     'auth',
   ],
-  tabbar: {},
+  tabBar: {},
 });
 </script>
 

test/generate.spec.ts

@@ -145,8 +145,7 @@ describe('generate routes', () => {
           },
           "middlewares": [
             "auth"
-          ],
-          "tabbar": {}
+          ]
         },
         {
           "path": "../packages/playground/src/pages/define-page/option-api",
@@ -309,8 +308,7 @@ describe('generate routes', () => {
           },
           "middlewares": [
             "auth"
-          ],
-          "tabbar": {}
+          ]
         },
         {
           "path": "../packages/playground/src/pages/define-page/option-api",