{"_id":"@dyad-org/nextjs-webpack-component-tagger","name":"@dyad-org/nextjs-webpack-component-tagger","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0":{"name":"@dyad-org/nextjs-webpack-component-tagger","version":"0.8.0","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","keywords":["dyad","nextjs","react","webpack","webpack-loader"],"license":"Apache-2.0","author":{"name":"Dustin Loring","email":"agent-cli-robot@gmail.com"},"type":"module","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","publishConfig":{"access":"public"},"scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"npm run build -- --watch","lint":"eslint . --max-warnings 0","prepublishOnly":"npm run build"},"dependencies":{"@babel/parser":"^7.23.0","estree-walker":"^2.0.2","magic-string":"^0.30.5"},"devDependencies":{"@types/node":"^20.8.9","@types/webpack":"^5.28.5","eslint":"^8.52.0","tsup":"^8.0.2","typescript":"^5.2.2"},"peerDependencies":{"webpack":"^5.0.0"},"_id":"@dyad-org/nextjs-webpack-component-tagger@0.8.0","gitHead":"b984d0a6cab4eb005bf8d55509cbb442b97ae17d","_nodeVersion":"22.19.0","_npmVersion":"11.6.0","dist":{"integrity":"sha512-lO24S5RdqzYMvCtitZchoLcqdSo04cdOXhoDGHCl+1SttOEHVfjiG0hYPLFx4cQIOqEBOGP7V1Ge9z3dV5OIFQ==","shasum":"d2534e51434e01780aae44210b5aa1056e90c39f","tarball":"https://registry.npmjs.org/@dyad-org/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.0.tgz","fileCount":7,"unpackedSize":21367,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDga3gmnbGtJ8aESCZQSjd9qzZbr+CwXFNNBHyy1GQAewIgai/5chHthHrWshNedwa9RvLl4vVyl728MFc5DLz5YUU="}]},"_npmUser":{"name":"agent-cli-robot","email":"agent.cli.robot@gmail.com"},"directories":{},"maintainers":[{"name":"agent-cli-robot","email":"agent.cli.robot@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-webpack-component-tagger_0.8.0_1769527408922_0.2824829738982053"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-27T15:23:28.499Z","0.8.0":"2026-01-27T15:23:29.047Z","modified":"2026-01-27T15:23:29.282Z"},"maintainers":[{"name":"agent-cli-robot","email":"agent.cli.robot@gmail.com"}],"description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","keywords":["dyad","nextjs","react","webpack","webpack-loader"],"author":{"name":"Dustin Loring","email":"agent-cli-robot@gmail.com"},"license":"Apache-2.0","readme":"# @dyad-sh/nextjs-webpack-component-tagger\n\nA webpack loader for Next.js that automatically adds `data-dyad-id` and `data-dyad-name` attributes to your React components. This is useful for identifying components in the DOM, for example for testing or analytics.\n\n## Installation\n\n```bash\nnpm install @dyad-sh/nextjs-webpack-component-tagger\n# or\nyarn add @dyad-sh/nextjs-webpack-component-tagger\n# or\npnpm add @dyad-sh/nextjs-webpack-component-tagger\n```\n\n## Usage\n\nAdd the loader to your `next.config.js` file:\n\n```ts\nimport type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  webpack: (config) => {\n    if (process.env.NODE_ENV === \"development\") {\n      config.module.rules.push({\n        test: /\\.(jsx|tsx)$/,\n        exclude: /node_modules/,\n        enforce: \"pre\",\n        use: \"@dyad-sh/nextjs-webpack-component-tagger\",\n      });\n    }\n    return config;\n  },\n};\n\nexport default nextConfig;\n```\n\nThe loader will automatically add `data-dyad-id` and `data-dyad-name` to all your React components.\n\nThe `data-dyad-id` will be a unique identifier for each component instance, in the format `path/to/file.tsx:line:column`.\n\nThe `data-dyad-name` will be the name of the component.\n\n## Testing & Publishing\n\nBump it to an alpha version and test in Dyad app, eg. `\"version\": \"0.0.1-alpha.0\",`\n\nThen publish it:\n\n```sh\ncd packages/@dyad-sh/nextjs-webpack-component-tagger/ && npm run prepublishOnly && npm publish\n```\n\nUpdate the package version in the nextjs-template repo in your personal fork.\n\nUpdate the `src/shared/templates.ts` to use your fork of the next.js template, e.g.\n\n```\ngithubUrl: \"https://github.com/wwwillchen/nextjs-template\",\n```\n\nRun the E2E tests and make sure it passes.\n\nThen, bump to a normal version, e.g. \"0.1.0\" and then re-publish. We'll try to match the main Dyad app version where possible.\n","readmeFilename":"README.md","_rev":"1-5066e78bf428571ae3c1f71d9c897e56"}