{"_id":"@djedjito/nextjs-webpack-component-tagger","_rev":"5-b618b5ad0b6e02aa9265b886f37937eb","name":"@djedjito/nextjs-webpack-component-tagger","dist-tags":{"latest":"0.8.3"},"versions":{"0.8.1":{"name":"@djedjito/nextjs-webpack-component-tagger","version":"0.8.1","keywords":["webpack","webpack-loader","nextjs","react","djedjito"],"author":{"name":"Djedjito Studio"},"license":"Apache-2.0","_id":"@djedjito/nextjs-webpack-component-tagger@0.8.1","maintainers":[{"name":"djedjito","email":"sheltondjedje@outlook.com"}],"dist":{"shasum":"6d8c542d73495917fb25d1bd98c148124160f612","tarball":"https://registry.npmjs.org/@djedjito/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.1.tgz","fileCount":7,"integrity":"sha512-WNEC+9rD4V7Zy3MHYC5IotpK3Or11pjo/6n+ZBhEQgdeQzSEViJnYn4+NHrNjgsMj2Lda+H7vacwD/6zjuYYaA==","signatures":[{"sig":"MEYCIQDwjrbZcgfvtEtwPT8eRNctw858IsUv3uZnYGRtpBGO7wIhAKIvfYx77icZiBH26tf1rbuqACWgxvcAiaa0l5epegqv","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":17982},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","include":["src","types"],"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":"djedjito","email":"sheltondjedje@outlook.com"},"_npmVersion":"10.9.3","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","directories":{},"_nodeVersion":"22.18.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.1_1771245757937_0.45955605793353205","host":"s3://npm-registry-packages-npm-production"}},"0.8.2":{"name":"@djedjito/nextjs-webpack-component-tagger","version":"0.8.2","keywords":["webpack","webpack-loader","nextjs","react","djedjito"],"author":{"name":"Djedjito Studio"},"license":"Apache-2.0","_id":"@djedjito/nextjs-webpack-component-tagger@0.8.2","maintainers":[{"name":"djedjito","email":"sheltondjedje@outlook.com"}],"dist":{"shasum":"22a6773cf7ccc75ed770f64d7f9fccc0656c20d5","tarball":"https://registry.npmjs.org/@djedjito/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.2.tgz","fileCount":7,"integrity":"sha512-uyYOSCtiNTcKEiDmCzdwTY550Ofd0oJE+TuKitA9HVkmsYyVmMLqOB9aUxxhKhIKNYwe/9Xdh0/gEuhBiRZ+cQ==","signatures":[{"sig":"MEYCIQCiCmiPz+ddSfwCekFFUbrxSqwV0fMppp4Ojm7g8bQh+gIhAJTLgzdyx1j0amb+JUfHf0BRHxrL08q/7J5mmyhe5sbz","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18005},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.mjs","include":["src","types"],"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":"djedjito","email":"sheltondjedje@outlook.com"},"_npmVersion":"10.9.3","description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","directories":{},"_nodeVersion":"22.18.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.2_1771323164880_0.8451698538859327","host":"s3://npm-registry-packages-npm-production"}},"0.8.3":{"name":"@djedjito/nextjs-webpack-component-tagger","version":"0.8.3","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","djedjito"],"author":{"name":"Djedjito Studio"},"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"},"include":["src","types"],"publishConfig":{"access":"public"},"_id":"@djedjito/nextjs-webpack-component-tagger@0.8.3","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-Srwicj6lR5gc9Ti3CGMleI+SYuMhO8kdECQBr4f/sztQ9lQr5+MboYeMaO1JQeMbjZObBy9nfq01P3YUzw32ww==","shasum":"85a5890bcbd4a493db25ca0ccedda89373360775","tarball":"https://registry.npmjs.org/@djedjito/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.3.tgz","fileCount":7,"unpackedSize":18005,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCpVUNgfTj1/2EmkTcxrplGq8dhISCPpyDHc84cbDulAwIhAKw/0G2RYXRQw3HxvhRLphC8FsprGl8f0NjKvZP1rIoH"}]},"_npmUser":{"name":"djedjito","email":"sheltondjedje@outlook.com"},"directories":{},"maintainers":[{"name":"djedjito","email":"sheltondjedje@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-webpack-component-tagger_0.8.3_1771324170867_0.14973079573524428"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-16T12:42:37.822Z","modified":"2026-02-17T10:29:31.126Z","0.8.0":"2026-02-04T12:31:05.691Z","0.8.1":"2026-02-16T12:42:38.091Z","0.8.2":"2026-02-17T10:12:45.024Z","0.8.3":"2026-02-17T10:29:31.030Z"},"author":{"name":"Djedjito Studio"},"license":"Apache-2.0","keywords":["webpack","webpack-loader","nextjs","react","djedjito"],"description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","maintainers":[{"name":"djedjito","email":"sheltondjedje@outlook.com"}],"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"}