Giter Club home page Giter Club logo

taro-hooks's Introduction

taro hooks logo

V2 | V1


npm package node compatibility build status discord chat vercel


Hooks Library for Taro

✨ Features

  • Fully matched Taro
  • Extending common hooks with ahooks
  • Separate abstraction useRequest
  • Complete type tips
  • Extended h5 missing apis

🚀 Quick Start

# npm
$ npm i taro-hooks
# yarn
$ yarn add taro-hooks
# pnpm
$ pnpm add taro-hooks

We use plugins for extending different frameworks. So you need to install the corresponding plugins according to the framework you are currently using

  • React/PReact/Nerv
# npm
$ npm i @taro-hooks/plugin-react
# yarn
$ yarn add @taro-hooks/plugin-react
# pnpm
$ pnpm add @taro-hooks/plugin-react
// config/index.js
module.exports = {
  // ...
  plugins: ['@taro-hooks/plugin-react'],
  // ...
};
  • Vue3
# npm
$ npm i @taro-hooks/plugin-vue
# yarn
$ yarn add @taro-hooks/plugin-vue
# pnpm
$ pnpm add @taro-hooks/plugin-vue
// config/index.js
module.exports = {
  // ...
  plugins: ['@taro-hooks/plugin-vue'],
  // ...
};

⌨️ Usage

  • React/PReact/Nerv
import { useEnv } from 'taro-hooks';

function Index() {
  const env = useEnv();

  return <View>current env: {env}</View>;
}
  • Vue3
<template>
  <view>current env: {{env}}</view>
</template>

<script setup lang="ts">
  import { useEnv } from 'taro-hooks';

  const env = useEnv();
</script>

🎰 auto-import

We provide the @taro-hooks/plugin-auto-import plugin to help you quickly use the unplugin-auto-import capability.

# npm
$ npm i @taro-hooks/plugin-auto-import
# yarn
$ yarn add @taro-hooks/plugin-auto-import
# pnpm
$ pnpm add @taro-hooks/plugin-auto-import
// config/index.js
const config = {
  // ...
  // The main prerequisite is that you have installed the plugin for the corresponding framework.
  plugins: [
    // If you are using vue3, please install the @taro-hooks/plugin-vue plugin beforehand.
    '@taro-hooks/plugin-vue'
    // If using React/PReact/Nerv, please pre-install the @taro-hooks/plugin-react plugin.
    '@taro-hooks/plugin-react',
    // Finally, the auto-import plugin is configured
    [
      '@taro-hooks/plugin-auto-import',
      {
        // your options, see configuration: https://github.com/antfu/unplugin-auto-import#configuration
      }
    ]
  ],
  // ...
};
  • React/PReact/Nerv
function Index() {
  const env = useEnv();

  return <View>current env: {env}</View>;
}
  • Vue3
<template>
  <view>current env: {{env}}</view>
</template>

<script setup lang="ts">
  const env = useEnv();
</script>

📦 Packages

packages downloads version license
taro-hooks taro-hooks taro-hooks taro-hooks
@taro-hooks/ahooks @taro-hooks/ahooks @taro-hooks/ahooks @taro-hooks/ahooks
@taro-hooks/plugin-vue @taro-hooks/plugin-vue @taro-hooks/plugin-vue @taro-hooks/plugin-vue
@taro-hooks/plugin-react @taro-hooks/plugin-react @taro-hooks/plugin-react @taro-hooks/plugin-react
@taro-hooks/use-request @taro-hooks/use-request @taro-hooks/use-request @taro-hooks/use-request
@taro-hooks/plugin-auto-import @taro-hooks/plugin-auto-import @taro-hooks/plugin-auto-import @taro-hooks/plugin-auto-import

🗨️ Communication

🤸 Contribution

See Contributing Guide.

🍻 Contributors


innocces

💬 📖 👀 📢 🤔 ⚠️ 📦 📋 🎨

ryan

📖 📢 🤔 💻

more contributors

📑 License

MIT.

💰 Sponsoring

📈 Star History

Star History Chart

taro-hooks's People

Contributors

innocces avatar kong-dev avatar rhliu1996 avatar ryan-117 avatar sssssssugar avatar stringke avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

taro-hooks's Issues

bug: qrcode invaild

版本

  • taro-hooks:
  • taro:
  • node:
  • npm:
  • OS:
  • Browser:

复现步骤

你期望的现象?

现有的现象?

复现 repo(最好可以提供一个复现的 repo)

【Bug】: useImage

版本

  • taro-hooks:
  • taro: 3.3.4
  • node: 16
  • npm: 8.1.2
  • OS: 微信小程序
  • Browser:

复现步骤

问题: 小程序中使用,打开页面直接报错。

定位:在useImage 中应用了BLOB属性。

你期望的现象?

不报错。

现有的现象?

报错。

复现 repo(最好可以提供一个复现的 repo)

preloadData这个数据好像未进行写入

Question

我看了包内的源码,好像并未封装preloadData,无论是useRouter内的preloadData还是usePreload,usePreload直接使用的是useRouter的方法,而preloadData没有进行任何操作。无论是route.preloadData还是const [preloadData] = usePreload();preloadData都为空

bug: taro-hooks2.0 不支持rn

版本

  • taro-hooks: 2.0.6
  • taro: 3.6.13
  • node: 18.16.0
  • npm: 9.5.1
  • OS: mac m2 Pro
  • Browser: chrome

复现步骤

按照官网2.X文档进行安装, @taro-hooks/plugin-react 也安装了

你期望的现象?

现有的现象?

复现 repo(最好可以提供一个复现的 repo)

截屏2023-09-21 17 48 20

bug: useClipboardData不支持\r\n

版本

  • taro-hooks: 1.5.6
  • taro: 3.4.7
  • node:
  • npm:
  • OS:
  • Browser: chrome 100

复现步骤

你期望的现象?

原原生taro方法一致

现有的现象?

被当做json串处理了。

复现 repo(最好可以提供一个复现的 repo)

官网taro init 的taro hooks模板项目启动报错。

版本

  • taro-hooks:latest
  • taro:3.6.8
  • node:v16.18.1
  • npm:9.6.2
  • OS: windows10
  • Browser: edge

复现步骤

yarn dev:h5

你期望的现象?

正常启动

现有的现象?

报错

复现 repo(最好可以提供一个复现的 repo)

https://github.com/guwan/taro-hooks-bug-report.git

https://github.com/innocces/taro-hooks/tree/next#-quick-start 改了两处。
yarn add @taro-hooks/plugin-react

plugins: ['@taro-hooks/plugin-react']

没啥用。

useSelectorQuery

const [query, { getBoundingClientRect }] = useSelectorQuery();

点击某个元素获取 对应id的节点的信息
这个hooks 真机调试起来非常卡

bug: plugin 中使用 @taro-hooks/shared 导致报错

版本

  • taro-hooks: 1.5.10
  • taro: 3.3.15
  • node: v14.18.1
  • npm: 6.14.15
  • OS: MacOS 13.0
  • Browser: Chrome

复现步骤

包管理使用的 pnpm,config/index.js => plugins 中添加 @taro-hooks/shared 启动即报错

你期望的现象?

正常启动

现有的现象?

启动后报错:
(node:81484) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

复现 repo(最好可以提供一个复现的 repo)

编译不过

Question

微信小程 编译不过 (taro react 环境)
版本:2.0.0-beta-serro.3

Sample Code

./node_modules/@taro-hooks/shared/dist/shared.esm.js 12:20
Module parse failed: Unexpected token (12:20)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| ENV_TYPE["JD"] = "JD";
| })(ENV_TYPE || (ENV_TYPE = {}));

const ENV = process?.env?.TARO_ENV;
| const ISWEAPP = ENV === ENV_TYPE.WEAPP;
| const ISWEB = ENV === ENV_TYPE.WEB;

bug: Cannot find module '@taro-hooks/core'

版本

  • taro-hooks: 2.0.5
  • taro: 3.6.13
  • node: 16.19.1
  • npm: 8.19.3
  • OS: macos
  • Browser: 小程序

复现步骤

直接用vscode打开项目,在pages/index/index.tsx文件里有一个import from '@taro-hooks/core'的地方,可以看到这里提示说找不到这个模块。但是功能是正常的,只是TS在报错。
我已经检查过,在types/global.d.ts里面已经按照文档引入了对应的类型文件

你期望的现象?

TS不报错

现有的现象?

TS提示找不到@taro-hooks/core这个模块

复现 repo(最好可以提供一个复现的 repo)

https://github.com/thundersdata-frontend/taro-style/tree/master/demo

bug: useEvent的返回类型在TypeScript中的问题

版本

  • typscript: 4.5.4
  • taro-hooks: 1.5.1
  • taro: 3.4.1
  • node: 16

复现步骤

在TypeScript的环境下,useEvent的返回类型有问题,会报 TS2339: Property 'emitEvent' does not exist on type 'IState | { dispatch: Dispatch ; setListener: (eventName: string, ...handlers: eventHandler[]) => void; setListenerOnce: (eventName: string, handler: eventHandler) => void; removeListener: (eventName?: string | undefined, handler?: eventHandler | undefined) => void; emitEvent: (eventName: string, ...params: a...'.

你期望的现象?

应当像useState一样返回一个typed list如[IState, ICallback]

可能的解决方案

源码中应在返回这个list后加 as const

taro-cli创建项目时选择taro-hooks@canary模板,在微信开发者工具控制台报错,渲染失败

相关平台版本

预览工具:微信开发者工具 Stable 1.06.2210310
调试基础库:2.27.2
试用框架:React

复现步骤

  $ npx @tarojs/cli init taro-hooks-app

  ? 请输入项目介绍 Introduce
  ? 请选择框架 React
  ? 是否需要使用 TypeScript ? No
  ? 请选择 CSS 预处理器(Sass/Less/Stylus) Sass
  ? 请选择编译工具 Webpack5
  ? 请选择包管理工具 yarn
  ? 请选择模板源 Github(最新)
  √ 拉取远程模板仓库成功!
  ? 请选择模板 taro-hooks@canary(使用 taro-hooks canary 版本的模板)

  $ cd  taro-hooks-app && yarn run dev:weapp

  # 打开微信开发者工具导入对应项目,等待编译控制台出现error提醒

期望结果

微信开发者工具正常预览小程序

实际结果

微信开发者工具预览界面白屏,控制台提示error,hook函数执行报错

环境信息

👽 Taro v3.5.7


  Taro CLI 3.5.7 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 16.15.1
      Yarn: 1.22.19
      npm: 8.11.0

bug: useRequest with options refreshOnWindowFocus init render two times

版本

  • taro-hooks:2.0.7
  • taro:3.5.8
  • node:16.20.0
  • npm:yarn v1.22.19
  • OS:macos 14
  • Browser: chrome或者微信小程序

复现步骤

npx @tarojs/[email protected] init taro-hooks-app
选择taro-hooks模版,添加@taro-hooks/plugin-react依赖。
image

index.tsx文件改成这样,

你期望的现象?

useRequest提供参数refreshOnWindowFocus后初次渲染仅请求一次。

现有的现象?

image image 可以看到不是在严格模式下运行时,仍然请求了两遍。 无论是在h5上面还是小程序上面,都会在初次渲染的时候请求两遍。

复现 repo(最好可以提供一个复现的 repo)

bug:useRequest 设置 cachekey 以后列表数据残留

版本

  • taro-hooks:1.5.8
  • taro:3.4.12
  • node:14.18.1
  • npm:6.14.15
  • OS:mac
  • Browser:微信小程序

复现步骤

先查询全部列表,下滑请求到第二页数据A,此时再更改查询条件B,这时候发现第二页的数据A没有被清空(这个数据A不是查询条件B应该获得的)

你期望的现象?

更改查询条件B以后,应该要把原来请求参数的后面页数数据全部清空

现有的现象?

上次查询结果的后面页数的数据残留

复现 repo(最好可以提供一个复现的 repo)

https://github.com/ziqiya/taro-hooks-cache-reproduce

bug: getUserProfile方法取消后报错无法catch

版本

  • taro-hooks: 1.5.6
  • taro: 3.4.7
  • node:
  • npm:
  • OS:
  • Browser: 100

复现步骤

getUserProfile 点击取消

你期望的现象?

可以catch

现有的现象?

无法catch,控制台异常。

复现 repo(最好可以提供一个复现的 repo)

为什么useEnv中的setEnv要在useEffect中触发?

Question

理论上来说TARO_ENV 在运行的时候就已经确定了环境,但是看useEnv源码的setter却是在useEffect中触发,是否有什么特殊的case要处理,需要这么做?

如果确定是不可变的,那么用useRef来存性能会更好,一些情况下可以少触发一次render。

function useEnv(): ENV {
  return useRef(getEnv()).current
}

bug: 2.0版本useRequest类型定义有问题

版本

  • taro-hooks: 2.0
  • taro: 3.2
  • node: 16
  • npm: 8
  • OS: mac
  • Browser:

复现步骤

引入就报错

你期望的现象?

类型提示正确

现有的现象?

image

复现 repo(最好可以提供一个复现的 repo)

bug: TypeError: 'getOwnPropertyDescriptor' on proxy: trap reported non-configurability for property 'onLaunch' which is either non-existent or configurable in the proxy target

版本

  • taro-hooks: 2.0.7
  • taro: 3.6.18
  • node: 16.20.2
  • npm: 8.19.4
  • OS: MacBook Pro M2 sonoma
  • Browser:

复现步骤

示例代码:codesandbox

  1. npm install
  2. 确保project.alipay.json设置developOptions.hotReloadtrue
  3. npm run dev:alipay
  4. 打开支付宝IDE,收到报错信息

你期望的现象?

获取到app中的globalData

现有的现象?

复现 repo(最好可以提供一个复现的 repo)

repo

bug: 微信小程序无法运行

版本

  • taro-hooks:2.0.3
  • taro:3.6.10
  • node:18.15.0
  • npm:9.5.0
  • OS:windows 11
  • Browser: chorm

复现步骤

yarn dev:weapp

你期望的现象?

运行成功

现有的现象?

运行失败
h5端可以正常运行

resolve 'react' in 'D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\dist'
Parsed request is a module
using description file: D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\package.json (relative path: ./dist)
aliased with mapping 'react': 'cjs/react.production.min.js' to 'cjs/react.production.min.js'
Parsed request is a module
using description file: D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\package.json (relative path: ./dist)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\dist\node_modules doesn't exist or is not a directory
looking for modules in D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\node_modules
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\plugin-react\node_modules\cjs doesn't exist
D:\workplace\taro\hooks-demo\node_modules@taro-hooks\node_modules doesn't exist or is not a directory
D:\workplace\taro\hooks-demo\node_modules\node_modules doesn't exist or is not a directory
looking for modules in D:\workplace\taro\hooks-demo\node_modules
D:\workplace\taro\hooks-demo\node_modules\cjs doesn't exist
D:\workplace\taro\node_modules doesn't exist or is not a directory
D:\workplace\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory

→ Watching... [2023/7/27 12:05:19]

node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "[object Array]".] {
code: 'ERR_UNHANDLED_REJECTION'
}

复现 repo(最好可以提供一个复现的 repo)

feat: 支持unplugin-auto-import

Description

Solution

现在支持unplugin-auto-import吗, 支持以后页面应该除了组件库基本上可以不需要额外的引入

现有taro项目中引入taro-hooks,在微信小程序开发者工具中报错

相关平台版本

系统版本:MacOS 13.0
预览工具:微信开发者工具 Stable 1.06.2210310
调试基础库:2.28.0
试用框架:React

Package.json

...
"dependencies": {
    "@babel/runtime": "^7.7.7",
    "@nutui/nutui-react-taro": "^1.3.4",
    "@taro-hooks/plugin-react": "2.0.0-beta-serro.5",
    "@tarojs/components": "3.5.8",
    "@tarojs/helper": "3.5.8",
    "@tarojs/plugin-framework-react": "3.5.8",
    "@tarojs/plugin-html": "3.5.8",
    "@tarojs/plugin-platform-alipay": "3.5.8",
    "@tarojs/plugin-platform-jd": "3.5.8",
    "@tarojs/plugin-platform-qq": "3.5.8",
    "@tarojs/plugin-platform-swan": "3.5.8",
    "@tarojs/plugin-platform-tt": "3.5.8",
    "@tarojs/plugin-platform-weapp": "3.5.8",
    "@tarojs/react": "3.5.8",
    "@tarojs/router": "3.5.8",
    "@tarojs/runtime": "3.5.8",
    "@tarojs/shared": "3.5.8",
    "@tarojs/taro": "3.5.8",
    "@tarojs/taro-h5": "3.5.8",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-refresh": "^0.11.0",
    "taro-hooks": "2.0.0-beta-serro.5"
},
...

config/index.js

...
plugins: ["@tarojs/plugin-html", "@taro-hooks/plugin-react"],
...
framework: "react",
compiler: {
    type: "webpack5",
    prebundle: {
      enable: false,
    },
},
...

期望结果

微信开发者工具正常预览小程序

实际结果

微信开发者工具预览界面白屏,控制台报错
image

bug: requestSubscribeMessage无法获取点击返回值

版本

  • taro-hooks: 1,5,7
  • taro: 3.4.7
  • node:
  • npm:
  • OS:
  • Browser:

小程序

复现步骤

  1. 使用小程序增加按钮,增加回调方法:
    const { subscribeIds: result } = await requestSubscribeMessage(subscribeIds)
  2. 弹出确认授权后点击确认。
  3. 断点查看 result返回值。

你期望的现象?

返回: accept 或 拒绝。

现有的现象?

result 返回 undefined

复现 repo(最好可以提供一个复现的 repo)

bug: taro-hooks 的依赖是否遗漏了@taro-hooks/core

版本

同:NervJS/taro#14181

复现步骤

taro-hooks 依赖了 @taro-hooks/core,但是没有将其添加为依赖:

import { useRef } from '@taro-hooks/core';

相关 issues:NervJS/taro#14181

命令行:
taro init taro_hooks

? 请输入项目介绍 taro
? 请选择框架 React
? 是否需要使用 TypeScript ? Yes
? 请选择 CSS 预处理器(Sass/Less/Stylus) Less
? 请选择编译工具 Webpack5
? 请选择包管理工具 npm
? 请选择模板源 Github(最新)
✔ 拉取远程模板仓库成功!
? 请选择模板 taro-hooks(使用 taro-hooks 的模板)

你期望的现象?

taro-hooks 模板正常运行

现有的现象?

taro-hooks 模板运行失败

复现 repo(最好可以提供一个复现的 repo)

bug: useRequest 设置debounceInterval,报 Cannot read property 'now' of undefined

使用useRequest 时,在小程序里,会报Cannot read property 'now' of undefined 的错误

  • taro-hooks: latest
  • taro: 3.3.10
  • node: 14.13.0

复现步骤

在使用useRequest,并且使用了debounceInterval,会报上述错误
查看源代码 是 p.Date.now 报错,应该是 ahook的问题,我单独使用ahook里的防抖和节流函数也会报这个错误

bug: useSystemInfo 返回空对象

版本

  • taro-hooks: 2.0.8
  • taro: v3.6.17
  • node: v16.19.1
  • npm:8.19.3
  • OS:macOS
  • Browser: Chrome 120.0.6099.109(正式版本) (arm64)

复现步骤

const systemInfo = useSystemInfo()

你期望的现象?

能正确获取到SystemInfo

现有的现象?

SystemInfo为空对象

浏览器Console 输出错误: 🎮[taro-hooks]---[createUseInfoHook]: fn is not a function. undefined

image
看源码,是taro_1["default"].getSystemInfoSync为 undefined导致

复现 repo(最好可以提供一个复现的 repo)

const systemInfo = useSystemInfo()
console.log(JSON.stringify((systemInfo)))

bug: AutoImport 引入,在vscode里面看不到函数的方法

版本

  • taro-hooks: 2.0.7
  • taro: 3.6.17
  • node: v16.14.0
  • npm: 8.3.1
  • OS: window
  • Browser: 微信小程序及支付宝小程序

复现步骤

选择最新taro-hooks@2模板,其次将taro-hooks相关升级成最新2.0.7,@taro-hooks/plugin-auto-import": "^2.0.7",
image

你期望的现象?

在vscode中看到引入的方法

现有的现象?

image

复现 repo(最好可以提供一个复现的 repo)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.