Babel 插件：className 添加 visionpro-hover-highlight

介绍

如果 JSX 元素已经包含 onClick 属性，该插件会为该元素添加className visionpro-hover-highlight。用于 Apple Vision Pro 眼球追踪锁定目标时的 Hover 效果。

用法

安装

安装 Babel 相关依赖：

npm install --save-dev @babel/core @babel/preset-react
npm install --save-dev npm install babel-plugin-visionpro-hover

配置

package.json

{
  "devDependencies": {
    "babel-plugin-visionpro-hover": "^0.0.3",
  }
}

.babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": ["visionpro-hover"]
}

效果示例

以下是一个使用该 Babel 插件的效果示例：

输入 JSX 代码

const Button = () => (
  <button onClick={() => console.log('Button clicked!')} className="already-exist-name">Click me</button>
);

转译后的 JSX 代码

const Button = () => (
  <button onClick={() => console.log('Button clicked!')}  className="already-exist-name visionpro-hover-highlight">Click me</button>
);