{"_id":"@dyad-sh/nextjs-webpack-component-tagger","_rev":"3-2c8f0cbb40e1d3d5cd674a44b81c3c8f","name":"@dyad-sh/nextjs-webpack-component-tagger","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0-alpha.0":{"name":"@dyad-sh/nextjs-webpack-component-tagger","version":"0.8.0-alpha.0","keywords":["webpack","webpack-loader","nextjs","react","dyad"],"author":{"name":"Dyad"},"license":"Apache-2.0","_id":"@dyad-sh/nextjs-webpack-component-tagger@0.8.0-alpha.0","maintainers":[{"name":"dyad-sh","email":"will@dyad.sh"}],"dist":{"shasum":"d12e4f245fac93b3c79dd3c96f96fc17cc2ddf50","tarball":"https://registry.npmjs.org/@dyad-sh/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.0-alpha.0.tgz","fileCount":6,"integrity":"sha512-9+cupFVz+FLcyy5PPAE5CmvUeergdi7BmGqc/i614Eouid2GsxrJdSQL4szhYKYh52+BBZazCWI9DhncBbKqug==","signatures":[{"sig":"MEYCIQCDjwgDnDLv6C7va95E7zH0YoSiSP+tZtyP0YoEQP4nggIhAOHEOLFBvYEB0ViUEIsjNdq576tHp/JY0XgmPRlJkpGf","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9641},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"d2f546af1514cd0fce0e836526f26e34c56d60ee","scripts":{"dev":"npm run build -- --watch","lint":"eslint . --max-warnings 0","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"dyad-sh","email":"will@dyad.sh"},"_npmVersion":"10.9.2","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"magic-string":"^0.30.5","@babel/parser":"^7.23.0","estree-walker":"^2.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","eslint":"^8.52.0","typescript":"^5.2.2","@types/node":"^20.8.9","@types/webpack":"^5.28.5"},"peerDependencies":{"webpack":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-webpack-component-tagger_0.8.0-alpha.0_1749662283392_0.7405268784930445","host":"s3://npm-registry-packages-npm-production"}},"0.8.0-alpha.1":{"name":"@dyad-sh/nextjs-webpack-component-tagger","version":"0.8.0-alpha.1","keywords":["webpack","webpack-loader","nextjs","react","dyad"],"author":{"name":"Dyad"},"license":"Apache-2.0","_id":"@dyad-sh/nextjs-webpack-component-tagger@0.8.0-alpha.1","maintainers":[{"name":"dyad-sh","email":"will@dyad.sh"}],"dist":{"shasum":"d0d8727e9d694bafcee518eec0a3b7e59f338f4f","tarball":"https://registry.npmjs.org/@dyad-sh/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.0-alpha.1.tgz","fileCount":6,"integrity":"sha512-BBCzQolVGHwWOgxe3Dc25wlkxOut5XJTDWADXs6cv8ZnIadO4SuXv5Re0dzeDob2eOpAztlnjk7SI2uaiOZBKA==","signatures":[{"sig":"MEUCIDozwarcJBjsno+EjpcnH4YVRnXniH2lORoP7IoHaFWxAiEApr+56sxusnYKbIgeDxLt7llKdJrO6n+yTQD8vxrKRf8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9975},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"d2f546af1514cd0fce0e836526f26e34c56d60ee","scripts":{"dev":"npm run build -- --watch","lint":"eslint . --max-warnings 0","build":"tsup src/index.ts --format cjs,esm --dts","prepublishOnly":"npm run build"},"_npmUser":{"name":"dyad-sh","email":"will@dyad.sh"},"_npmVersion":"10.9.2","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"magic-string":"^0.30.5","@babel/parser":"^7.23.0","estree-walker":"^2.0.2"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","eslint":"^8.52.0","typescript":"^5.2.2","@types/node":"^20.8.9","@types/webpack":"^5.28.5"},"peerDependencies":{"webpack":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/nextjs-webpack-component-tagger_0.8.0-alpha.1_1749664099322_0.21532955485315464","host":"s3://npm-registry-packages-npm-production"}},"0.8.0":{"name":"@dyad-sh/nextjs-webpack-component-tagger","version":"0.8.0","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","type":"module","scripts":{"build":"tsup src/index.ts --format cjs,esm --dts","dev":"npm run build -- --watch","lint":"eslint . --max-warnings 0","prepublishOnly":"npm run build"},"keywords":["webpack","webpack-loader","nextjs","react","dyad"],"author":{"name":"Dyad"},"license":"Apache-2.0","peerDependencies":{"webpack":"^5.0.0"},"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"},"publishConfig":{"access":"public"},"_id":"@dyad-sh/nextjs-webpack-component-tagger@0.8.0","gitHead":"d2f546af1514cd0fce0e836526f26e34c56d60ee","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gWG2jdC9+f2fzlxBH4jrUunHObTgfNR1a6YZv9xHuTSC+IQmEtNKIYO220LViQv/Enjnr6xWdRHLcoaAxSZXgg==","shasum":"52583feadb030ac6bdb39a8516339c5648760002","tarball":"https://registry.npmjs.org/@dyad-sh/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.0.tgz","fileCount":7,"unpackedSize":21378,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDG2wJwnoOH4lLE9fTw4otPMCs+dN7EpkSYuvOHxeLPgAiEA0E2DBi62xsX62vUScYQ6FQJGgP/KBKKsy4Vh2LfxtKo="}]},"_npmUser":{"name":"dyad-sh","email":"will@dyad.sh"},"directories":{},"maintainers":[{"name":"dyad-sh","email":"will@dyad.sh"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-webpack-component-tagger_0.8.0_1749664776860_0.7715174683070058"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-11T17:18:03.272Z","modified":"2025-06-11T17:59:37.269Z","0.8.0-alpha.0":"2025-06-11T17:18:03.573Z","0.8.0-alpha.1":"2025-06-11T17:48:19.481Z","0.8.0":"2025-06-11T17:59:37.092Z"},"author":{"name":"Dyad"},"license":"Apache-2.0","keywords":["webpack","webpack-loader","nextjs","react","dyad"],"description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","maintainers":[{"name":"dyad-sh","email":"will@dyad.sh"}],"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```js\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n  webpack: (config) => {\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\n\nmodule.exports = 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. ","readmeFilename":"README.md"}