@dyad-sh/ react-vite- 组件- 插图

自动添加的 Vite 插件 data-dyad-id 财务报告和审定财务报表 data-dyad-name 属性到您的 React 组件。 这有助于在DOM中识别组件,例如用于测试或分析.

安装

npm install @dyad-sh/react-vite-component-tagger
# or
yarn add @dyad-sh/react-vite-component-tagger
# or
pnpm add @dyad-sh/react-vite-component-tagger

使用量

将插件添加到您的 vite.config.ts 文件 :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import dyadTagger from "@dyad-sh/react-vite-component-tagger";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), dyadTagger()],
});

插件将自动添加 data-dyad-id 财务报告和审定财务报表 data-dyad-name 切换到所有反射组件.

这个 data-dyad-id 将在格式中成为每个组件实例的独特标识符 path/to/file.tsx:line:column。 。 。 .

这个 data-dyad-name 将是组件的名称.

测试和发布

把它装入一个α版本,然后在Dyad app中测试, eg. "version": "0.0.1-alpha.0",

然后发表:

cd packages/@dyad-sh/react-vite-component-tagger/ && npm run prepublishOnly && npm publish

像这样更新脚手架 :

cd scaffold && pnpm remove @dyad-sh/react-vite-component-tagger && pnpm add -D @dyad-sh/react-vite-component-tagger

进行E2E测试,确保通过.

然后,被撞到一个普通的版本,例如"0.1.0",然后被重新被推出. 尽可能尝试与Dyad主应用版本相匹配.