Merge branch 'next' into chore/release-3.3.17

packages/taro-components/src/components/navigator/navigator.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, h, ComponentInterface, Host, Listen, Event, EventEmitter } from '@stencil/core'
-import { navigateTo, navigateBack, redirectTo, reLaunch, switchTab } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 
 /**
@@ -54,27 +54,27 @@ export class Navigator implements ComponentInterface {
     let promise: Promise<any> = Promise.resolve()
     switch (openType) {
       case 'navigate':
-        promise = navigateTo({
+        promise = Taro.navigateTo({
           url: this.url
         })
         break
       case 'redirect':
-        promise = redirectTo({
+        promise = Taro.redirectTo({
           url: this.url
         })
         break
       case 'switchTab':
-        promise = switchTab({
+        promise = Taro.switchTab({
           url: this.url
         })
         break
       case 'reLaunch':
-        promise = reLaunch({
+        promise = Taro.reLaunch({
           url: this.url
         })
         break
       case 'navigateBack':
-        promise = navigateBack({
+        promise = Taro.navigateBack({
           delta: this.delta
         })
         break

packages/taro-components/src/components/pull-to-refresh/pull-to-refresh.tsx

@@ -1,5 +1,5 @@
 import { Component, Prop, h, ComponentInterface, Host, State, Event, EventEmitter, Watch, Element } from '@stencil/core'
-import { eventCenter } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 
 function setTransform (nodeStyle, value) {
@@ -77,7 +77,7 @@ export class PullToRefresh implements ComponentInterface {
   componentDidLoad () {
     this.init()
     this._isMounted = true
-    eventCenter.on('__taroStartPullDownRefresh', ({ successHandler, errorHandler }) => {
+    Taro.eventCenter.on('__taroStartPullDownRefresh', ({ successHandler, errorHandler }) => {
       try {
         this.triggerPullDownRefresh(true)
         successHandler({
@@ -90,7 +90,7 @@ export class PullToRefresh implements ComponentInterface {
       }
     })
 
-    eventCenter.on('__taroStopPullDownRefresh', ({ successHandler, errorHandler }) => {
+    Taro.eventCenter.on('__taroStopPullDownRefresh', ({ successHandler, errorHandler }) => {
       try {
         this.triggerPullDownRefresh(false)
         successHandler({

packages/taro-components/src/components/tabbar/tabbar.tsx

@@ -1,6 +1,5 @@
 import { Component, Prop, h, ComponentInterface, Host, State, Event, EventEmitter, Element } from '@stencil/core'
-// @ts-nocheck
-import { eventCenter, switchTab } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import classNames from 'classnames'
 import resolvePathname from 'resolve-pathname'
 
@@ -42,7 +41,7 @@ export interface Conf {
   list: TabbarList[]
   position?: 'bottom' | 'top'
   custom: boolean
-  customRoutes: Record<string, string>
+  customRoutes: Record<string, string | string[]>
   mode: 'hash' | 'browser'
   basename: string
   homePage: string
@@ -103,8 +102,14 @@ export class Tabbar implements ComponentInterface {
     }
 
     this.homePage = addLeadingSlash(this.conf.homePage)
-    for (const key in customRoutes) {
-      this.customRoutes.push([key, customRoutes[key]])
+    for (let key in customRoutes) {
+      const path = customRoutes[key]
+      key = addLeadingSlash(key)
+      if (typeof path === 'string') {
+        this.customRoutes.push([key, addLeadingSlash(path)])
+      } else if (path?.length > 0) {
+        this.customRoutes.push(...path.map(p => [key, addLeadingSlash(p)]))
+      }
     }
 
     list.forEach(item => {
@@ -160,7 +165,7 @@ export class Tabbar implements ComponentInterface {
 
   switchTab = (index: number) => {
     this.selectedIndex = index
-    switchTab({
+    Taro.switchTab({
       url: this.list[index].pagePath
     })
   }
@@ -310,29 +315,29 @@ export class Tabbar implements ComponentInterface {
   }
 
   bindEvent () {
-    eventCenter.on('__taroRouterChange', this.routerChangeHandler)
-    eventCenter.on('__taroSwitchTab', this.switchTabHandler)
-    eventCenter.on('__taroSetTabBarBadge', this.setTabBarBadgeHandler)
-    eventCenter.on('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler)
-    eventCenter.on('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler)
-    eventCenter.on('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler)
-    eventCenter.on('__taroShowTabBar', this.showTabBarHandler)
-    eventCenter.on('__taroHideTabBar', this.hideTabBarHandler)
-    eventCenter.on('__taroSetTabBarStyle', this.setTabBarStyleHandler)
-    eventCenter.on('__taroSetTabBarItem', this.setTabBarItemHandler)
+    Taro.eventCenter.on('__taroRouterChange', this.routerChangeHandler)
+    Taro.eventCenter.on('__taroSwitchTab', this.switchTabHandler)
+    Taro.eventCenter.on('__taroSetTabBarBadge', this.setTabBarBadgeHandler)
+    Taro.eventCenter.on('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler)
+    Taro.eventCenter.on('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler)
+    Taro.eventCenter.on('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler)
+    Taro.eventCenter.on('__taroShowTabBar', this.showTabBarHandler)
+    Taro.eventCenter.on('__taroHideTabBar', this.hideTabBarHandler)
+    Taro.eventCenter.on('__taroSetTabBarStyle', this.setTabBarStyleHandler)
+    Taro.eventCenter.on('__taroSetTabBarItem', this.setTabBarItemHandler)
   }
 
   removeEvent () {
-    eventCenter.off('__taroRouterChange', this.routerChangeHandler)
-    eventCenter.off('__taroSwitchTab', this.switchTabHandler)
-    eventCenter.off('__taroSetTabBarBadge', this.setTabBarBadgeHandler)
-    eventCenter.off('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler)
-    eventCenter.off('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler)
-    eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler)
-    eventCenter.off('__taroShowTabBar', this.showTabBarHandler)
-    eventCenter.off('__taroHideTabBar', this.hideTabBarHandler)
-    eventCenter.off('__taroSetTabBarStyle', this.setTabBarStyleHandler)
-    eventCenter.off('__taroSetTabBarItem', this.setTabBarItemHandler)
+    Taro.eventCenter.off('__taroRouterChange', this.routerChangeHandler)
+    Taro.eventCenter.off('__taroSwitchTab', this.switchTabHandler)
+    Taro.eventCenter.off('__taroSetTabBarBadge', this.setTabBarBadgeHandler)
+    Taro.eventCenter.off('__taroRemoveTabBarBadge', this.removeTabBarBadgeHandler)
+    Taro.eventCenter.off('__taroShowTabBarRedDotHandler', this.showTabBarRedDotHandler)
+    Taro.eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler)
+    Taro.eventCenter.off('__taroShowTabBar', this.showTabBarHandler)
+    Taro.eventCenter.off('__taroHideTabBar', this.hideTabBarHandler)
+    Taro.eventCenter.off('__taroSetTabBarStyle', this.setTabBarStyleHandler)
+    Taro.eventCenter.off('__taroSetTabBarItem', this.setTabBarItemHandler)
   }
 
   componentDidLoad () {

packages/taro-components/stencil.config.ts

@@ -1,5 +1,6 @@
 import { Config } from '@stencil/core'
 import { sass } from '@stencil/sass'
+
 const { jsWithTs: tsjPreset } = require('ts-jest/presets')
 
 export const config: Config = {
@@ -8,7 +9,13 @@ export const config: Config = {
   plugins: [
     sass()
   ],
+  rollupConfig: {
+    inputOptions: {
+      treeshake: true
+    }
+  },
   nodeResolve: {
+    preferBuiltins: false,
     // @ts-ignore
     mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main']
   },
@@ -44,5 +51,15 @@ export const config: Config = {
     emulate: [{
       device: 'iPhone 8'
     }]
+  },
+  rollupPlugins: {
+    after: [{
+      name: 'add-external',
+      options: opts => {
+        opts.external = ['@tarojs/taro']
+
+        return opts
+      }
+    }]
   }
 }

packages/taro-components/virtual-list/react/createListComponent.js

@@ -2,8 +2,7 @@
 /* eslint-disable no-case-declarations */
 /* eslint-disable no-void */
 /* eslint-disable no-return-assign */
-import { createSelectorQuery } from '@tarojs/taro'
-
+import Taro from '@tarojs/taro'
 import { getRTLOffsetType } from '../domHelpers'
 import { memoizeOne } from '../memoize'
 import { createElement, PureComponent } from 'react'
@@ -23,7 +22,7 @@ export function isRtlFunc ({ direction }) {
   return direction === 'rtl'
 }
 export function getRectSize (id, success = () => {}, fail = () => {}) {
-  const query = createSelectorQuery()
+  const query = Taro.createSelectorQuery()
   query.select(id).boundingClientRect((res) => {
     if (res) {
       success(res)

packages/taro-router/rollup.config.js

@@ -2,13 +2,12 @@ const { join } = require('path')
 const buble = require('rollup-plugin-buble')
 const resolve = require('rollup-plugin-node-resolve')
 const commonjs = require('rollup-plugin-commonjs')
-// const alias = require('rollup-plugin-alias')
 const typescript = require('rollup-plugin-typescript2')
 const cwd = __dirname
 
 const baseConfig = {
   input: join(cwd, 'src/index.ts'),
-  external: ['@tarojs/runtime'],
+  external: ['@tarojs/runtime', '@tarojs/taro'],
   output: [
     {
       file: join(cwd, 'dist/index.js'),
@@ -18,15 +17,10 @@ const baseConfig = {
     }
   ],
   plugins: [
-    // alias({
-    //   entries: [
-    //     {
-    //       find: '@tarojs/shared',
-    //       replacement: join(cwd, '../shared/dist/shared.esm')
-    //     }
-    //   ]
-    // }),
-    resolve(),
+    resolve({
+      preferBuiltins: false,
+      mainFields: ['main:h5', 'browser', 'module', 'jsnext:main', 'main']
+    }),
     commonjs(),
     typescript(),
     buble({

packages/taro-router/src/api.ts

@@ -22,11 +22,7 @@ function processNavigateUrl (option: Option) {
   const pathPieces = parsePath(option.url)
 
   // 处理自定义路由
-  Object.keys(routesAlias).forEach(key => {
-    if (addLeadingSlash(key) === addLeadingSlash(pathPieces.pathname)) {
-      pathPieces.pathname = routesAlias[key]
-    }
-  })
+  pathPieces.pathname = routesAlias.getAlias(addLeadingSlash(pathPieces.pathname))
 
   // 处理相对路径
   if (pathPieces?.pathname?.includes('./')) {

packages/taro-router/src/router/index.ts

@@ -14,7 +14,7 @@ import { init, routerConfig } from './init'
 import { hidePage, loadPage, showPage, unloadPage } from './page'
 import { qs } from './qs'
 import stacks from './stack'
-import { addLeadingSlash, isTabBar, setRoutesAlias } from '../utils'
+import { addLeadingSlash, isTabBar, routesAlias } from '../utils'
 
 /**
  * TODO
@@ -32,7 +32,7 @@ export interface RouterConfig extends AppConfig {
   router: {
     mode: 'hash' | 'browser'
     basename: string,
-    customRoutes?: Record<string, string>,
+    customRoutes?: Record<string, string | string[]>,
     pathname: string,
     forcePath?: string
   },
@@ -47,15 +47,14 @@ export function createRouter (
   init(config)
 
   const routes: Routes = []
-  const alias = config.router.customRoutes ?? {}
   const runtimeHooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks)
 
-  setRoutesAlias(alias)
+  routesAlias.set(config.router.customRoutes)
   for (let i = 0; i < config.routes.length; i++) {
     const route = config.routes[i]
     const path = addLeadingSlash(route.path)
     routes.push({
-      path: alias[path] || path,
+      path: routesAlias.getAll(path),
       action: route.load
     })
   }
@@ -82,7 +81,7 @@ export function createRouter (
     const pageConfig = config.routes.find(r => {
       const path = addLeadingSlash(r.path)
       const urlPath = stripBasename(location.pathname, routerConfig.router.basename)
-      return path === urlPath || alias[path] === urlPath
+      return path === urlPath || routesAlias.getConfig(path)?.includes(urlPath)
     })
     let enablePullDownRefresh = false
 
@@ -149,7 +148,7 @@ export function createRouter (
   }
 
   if (history.location.pathname === '/') {
-    history.replace(prependBasename((config.entryPagePath || routes[0].path) as string + history.location.search))
+    history.replace(prependBasename((config.entryPagePath || routes[0].path?.[0]) as string + history.location.search))
   }
 
   render({ location: history.location, action: LocationAction.Push })

packages/taro-router/src/utils.ts

@@ -1,10 +1,5 @@
 import { stripBasename } from './history'
 import { RouterConfig } from './router'
-export let routesAlias = {}
-
-export function setRoutesAlias (alias) {
-  routesAlias = alias
-}
 
 export function addLeadingSlash (path?: string) {
   if (path == null) {
@@ -13,6 +8,48 @@ export function addLeadingSlash (path?: string) {
   return path.charAt(0) === '/' ? path : '/' + path
 }
 
+class RoutesAlias {
+  conf: Array<string[]> = []
+
+  set (customRoutes: Record<string, string | string[]> = {}) {
+    for (let key in customRoutes) {
+      const path = customRoutes[key]
+      key = addLeadingSlash(key)
+      if (typeof path === 'string') {
+        this.conf.push([key, addLeadingSlash(path)])
+      } else if (path?.length > 0) {
+        this.conf.push(...path.map(p => [key, addLeadingSlash(p)]))
+      }
+    }
+  }
+
+  getConfig = (url: string) => {
+    const customRoute = this.conf.filter((arr) => {
+      return arr.includes(url)
+    })
+    return customRoute[0]
+  }
+
+  getOrigin = (url: string) => {
+    return this.getConfig(url)?.[0] || url
+  }
+
+  getAlias = (url: string) => {
+    return this.getConfig(url)?.[1] || url
+  }
+
+  getAll = (url: string) => {
+    return this.conf.filter((arr) => {
+      return arr.includes(url)
+    }).reduce((p, a) => {
+      p.push(a[1])
+      return p
+    }, [url])
+  }
+}
+
+export const routesAlias = new RoutesAlias()
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 export const throttle = (fn: Function, threshold: number) => {
   let lastTime = 0
@@ -29,7 +66,14 @@ export const isTabBar = (config: RouterConfig): boolean => {
   const { customRoutes = {}, basename = '', pathname } = config.router
   const routePath = stripBasename(pathname, basename)
   const pagePath = Object.entries(customRoutes).find(
-    ([, target]) => target === routePath
+    ([, target]) => {
+      if (typeof target === 'string') {
+        return target === routePath
+      } else if (target?.length > 0) {
+        return target.includes(routePath)
+      }
+      return false
+    }
   )?.[0] || routePath
 
   return !!pagePath && (config.tabBar?.list || []).some(t => t.pagePath === pagePath)