@dyad-sh/nextjs-webpack-组件-相接器

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

安装

npm install @dyad-sh/nextjs-webpack-component-tagger
# or
yarn add @dyad-sh/nextjs-webpack-component-tagger
# or
pnpm add @dyad-sh/nextjs-webpack-component-tagger

使用量

将装载器添加到您的 next.config.js 文件 :

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.(jsx|tsx)$/,
      exclude: /node_modules/,
      enforce: "pre",
      use: '@dyad-sh/nextjs-webpack-component-tagger',
    });

    return config;
  },
};


module.exports = nextConfig;

装入器会自动添加 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/nextjs-webpack-component-tagger/ && npm run prepublishOnly && npm publish

更新您个人叉中下一个 js- template repo 中的软件包版本 .

更新 src/shared/templates.ts 来使用下一个.js模板的叉子,例如:.

githubUrl: "https://github.com/wwwillchen/nextjs-template",

进行E2E测试,确保通过.

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