- A vite Plugin to add log filename, log line, log argument name and separator
- [![NPM version][npm-image]][npm-url] ![NPM downloads][download-image]
-
-![Test][test-badge]
-
-
+ [![NPM version][npm-image]][npm-url] ![NPM downloads][download-image]
[npm-image]: https://img.shields.io/npm/v/taro-history.svg?style=flat-square
[npm-url]: http://npmjs.org/package/taro-history
[download-image]: https://img.shields.io/npm/dm/taro-history.svg?style=flat-square
-
-
-
-[test-badge]: https://github.com/baozouai/taro-history/actions/workflows/ci.yml/badge.svg
-
-[codecov-badge]: https://codecov.io/github/baozouai/plugin-taro-history/branch/master/graph/badge.svg
+[download-url]: https://npmjs.org/package/taro-history
-English | [中文](./README-zh_CN.md)
-
-🔥 Features
-
-- Support to log the flog filename,
-- Support tolog line
-- Support to log argument name
-- Support to log separator
-- Support different files —— 👉 .js, .jsx, .ts, .tsx, .vue, .svelte, and .astro
-
-> for more usage please see the [examples](#-example)
-
-## 📦 Install
+## ⌨️ 安装
```sh
-pnpm add taro-history -D
+yarn add taro-history
# or
-yarn add taro-history -D
-# or
-npm i taro-history -D
+npm i taro-history
```
+## ✨ api
-## ⚙️ Options
+`app.config.js` 的例子
```ts
-interface Options {
- /**
- * log file name
- * If your file name is too long,
- * and you don;t want to log the directory of the file path,
- * such as src/pages/xxxyyy/a.tsx,
- * then you can configure enableDir to false, and only print a.tsx
- * @default true
- */
- enableFileName?: boolean | {
- enableDir?: boolean
- }
- /**
- * tip of start argument default 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
- * @example
- * console.log(' 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀', ...)
- */
- preTip?: string
- /** the delimiter for each parameter is an empty string by default, you can also use a newline \n, a semicolon';' a comma',' or even a pig '🐖' */
- splitBy?: boolean
- /**
- * need endLine, default false， only if startLine unequal endLine
- * @example
- * console.log('line of 1 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx', ..., 'line of 10 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀 ~ main.tsx')
- * */
- endLine?: boolean
+export default {
+ // 页面路径列表
+ pages: ['pages/xxx/index', 'pages/yyy/index'],
+ // 底部 tab 栏的表现
+ tabBar: {
+ list: [
+ {
+ pagePath: 'pages/tab1/index',
+ text: 'tab1',
+ },
+ ],
+ },
+ ...
}
-```
-## 🔨 Usage
+```
+1. 将 navigateTo 和 switchTab 合到 push 中
+```ts
+import history from 'taro-history'
+
+// 将 navigateTo 和 switchTab 合到 push 中
+
+// 1. push 到 pages/xxx/index
+history.push('pages/xxx/index')
+history.push('/pages/xxx/index')
+history.push('xxx')
+// 携带参数
+history.push('xxx?a=1')
+history.push({ url: 'xxx?a=1' })
+history.push({ url: 'pages/xxx/index?a=1' })
+history.push({ url: '/pages/xxx/index?a=1' })
+// push 到 tab的 pages/tab1/index
+history.push('/pages/tab1/index')
+history.push('pages/tab1/index')
+history.push('tab1')
+// 携带参数
+history.push('tab1?a=1')
+history.push({url: 'tab1?a=1' })
+history.push({url: 'pages/tab1?a=1' })
+history.push({url: '/pages/tab1?a=1' })
+```
+2. 支持第二个参数传页面参数和添加泛型
```ts
-import { defineConfig } from 'vite'
-import EnhanceLog from 'taro-history'
-
-const config = defineConfig({
- plugins: [
- // if you use vue, ensure the vuePlugin before the log plugin
- EnhanceLog({
- splitBy: '\n',
- preTip: '🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖',
- enableFileName: true, // or enableFileName: { enableDir: false}
- }),
- ],
+import history from 'taro-history'
+history.push<{
+ order_id: number
+ order: {
+ order_id: number
+ name: string
+ }
+ isAdd: boolean
+}>('xxx', {
+ order_id: 1,
+ order: { order_id: 1, name: 'xxx '},
+ isAdd: true,
})
-
-export default config
+// 支持第二个参数传页面参数
```
-
-## 👇 Example
-
-Clone the project and start playgrounds by running:
-
-```shell
-pnpm play # corresponding to vue
-# or
-pnpm play:react # corresponds to react
+3. `pushBind`，避免写成回调的形式，使代码更优雅
+```tsx
+
```
+4. `redirect`、`reLaunch` 和 `navigateBack`
+```ts
+// `redirect`、`reLaunch` 都支持short url 和 full url，其他用法和 push 类似
+
+history.redirect('pages/xxx/index')
+history.redirect('/pages/xxx/index')
+history.redirect('xxx')
+history.redirect('xxx?a=1')
+history.redirect({ url: 'xxx?a=1' })
+history.redirect({ url: 'pages/xxx/index?a=1' })
+history.redirect({ url: '/pages/xxx/index?a=1' })
+
+history.reLaunch('pages/xxx/index')
+history.reLaunch('/pages/xxx/index')
+history.reLaunch('xxx')
+history.reLaunch('xxx?a=1')
+history.reLaunch({ url: 'xxx?a=1' })
+history.reLaunch({ url: 'pages/xxx/index?a=1' })
+history.reLaunch({ url: '/pages/xxx/index?a=1' })
+
+// 返回
+history.navigateBack()
+```
+5. `history.addInterceptor` 支持拦截路由，只要有一个拦截了，那么路由就不会执行
+```tsx
+import history from 'taro-history'
+
+/**
+ * @description: 接收回调，返回true表示拦截，false表示不拦截
+ * @param {short} 短路径
+ * @param {full} 全路径
+ * @param {Record} params 传参
+ * @return {*}
+ * @memberof:
+ */
+// 返回了true表示拦截路由，那么就不会跳转了
+const cancelIntercept = history.addInterceptor({ short, full, params } => {
+ /**
+ * 上面push到'xxx?a=1&b=2',那么：
+ * {
+ * short: 'xxx',
+ * full: '/pages/xxx/index?a=1&b=2',
+ * params: {
+ * a: 1,
+ * is: true,
+ * }
+ * }
+ * */
+ console.log(short, full, params)
+ return true
+})
+// 去掉拦截
+cancelIntercept()
+// 返回了false表示不拦截路由
+history.addInterceptor({ short, full, params } => {
+ console.log(short, full, params)
+ return true
+})
+// 支持返回promise，resolve(true)表示拦截，resolve(false)表示不拦截
+history.addInterceptor({ short, full, params } => {
+ return new Promise(resolve => {
+ // 比如跳转前需要调用接口判断是否有权限，那么请求接口后才判断是否跳转
+ setTimeout(() => {
+ resolve(true)
+ }, 3000)
+ })
+})
+```
-For specific configuration, see [vue/vite.config.ts](./playgrounds/vue/vite.config.ts) or [react/vite.config.ts](./playgrounds/react/vite.config.ts)
-
-For example, if you don't like small 🚀, but you like piggy 🐖, you can configure preTip as 🐖🐖🐖🐖🐖🐖🐖🐖🐖🐖:
-
-
-
-For example, in the case of many parameters, you want log to wrap each parameter, then you can configure splitBy as `\n`:
-
-
-
-Or the delimiter is `;`:
-
-
-
-Of course, you can also specify it at will, such as using a dog head 🐶 to separate:
-
-
-
-For example, if you want to know the file name where the log is located, you can configure enableFileName to be true (of course the default is true):
-
-
-
-If the file path is too long:
-
-
-
-and you only want to print the file name without the directory prefix, you can configure `enableFileName: { enableDir: false }`:
-
-
-For another example, if there is a log that spans multiple lines, you want the number of lines at the beginning and end of the log, with the log entity in the middle, then you can set endLine to true:
-
-
+6. `history.addListener` 监听路由，在路由不被拦截的情况下才会执行
+```ts
+import history from 'taro-history'
+/**
+ * @description: 监听路由
+ * @param {short} 短路径
+ * @param {full} 全路径
+ * @param {Record} params 传参
+ * @return {*}
+ * @memberof:
+ */
+// 返回了true表示拦截路由，那么就不会跳转了
+const unListener = history.addListener({ short, full, params } => {
+ // 参数和addInterceptor的回调一样
+ console.log(short, full, params)
+ return true
+})
+// 取消监听
+unListener()
+```
-
+## utils
+1. 获取路径传参
+```ts
+import { getParams } from 'taro-history'
+// history.push('xxx?a=1&is=true')
+// a = 1, is = true
+const { a, is } = getParams<{a: number, is: boolean}>()
+```
+2. 获取当前路径
+```ts
+import { getPath } from 'taro-history'
+// 当前路径为 /pages/xxx/index
+const path = getPath()
+```
+3. 是否是当前路径
+```ts
+// 当前路径为 /pages/xxx/index
+import { getPath } from 'taro-history'
+
+console.log(isCurrentPath('/pages/xxx/index')) // true
+console.log(isCurrentPath('pages/xxx/index')) // true
+console.log(isCurrentPath('xxx/index')) // true
+console.log(isCurrentPath('xxx')) // true
+console.log(isCurrentPath('/pages/yyy/index')) // false
+```
+4. 为路径加上前缀/pages/ 和后缀 /index
+```ts
+import { addPathWithPageAndIndex } from 'taro-history'
-> We can see that the number of lines at the beginning is 29, and the number of lines at the end is 44, which is consistent with the source code
+console.log(addPathWithPageAndIndex('xxx?a=1')) // /pages/xxx/index?a=1
+```
-## 📄 License
+5. `getShortPath`, 获取短路径
+```ts
+import { getShortPath } from 'taro-history'
+/**
+ * @description: 获取短路径
+ * @param {string} originPath 长路径，如/pages/xxx/index
+ * @return {string} 短路径，如xxx
+ */
+console.log(getShortPath('pages/main/invite/index')) // xxx
+```
+6. `getCurrentShortPath`, 获取当前页短路径
+```ts
+import { getCurrentShortPath } from 'taro-history'
+// 当前页 pages/xxx/index
-taro-history is [MIT licensed](./LICENSE).
\ No newline at end of file
+console.log(getCurrentShortPath()) // xxx
+```
\ No newline at end of file