{"_id":"@codeduet-sh/nextjs-webpack-component-tagger","name":"@codeduet-sh/nextjs-webpack-component-tagger","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0":{"name":"@codeduet-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","codeduet"],"author":{"name":"CodeDuet"},"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":"@codeduet-sh/nextjs-webpack-component-tagger@0.8.0","gitHead":"6198d883162dea33c545e6a9d50090cbc44986fb","_nodeVersion":"21.6.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-D+BOgQRjpczdIVnaLe7E+AnSQUc6SIalDeSpsUPlMR8YjnW++VPaPMc/+REBhZ8V8Gf1Hvvw64egjeyzdgTong==","shasum":"52b247ecd01e18ed124a61729eff502febf0344e","tarball":"https://registry.npmjs.org/@codeduet-sh/nextjs-webpack-component-tagger/-/nextjs-webpack-component-tagger-0.8.0.tgz","fileCount":7,"unpackedSize":21365,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHcAbP8C2qj/Xw2YZvMgCRTwMkgMZjkV+Hd+66Z38a6FAiBJmHybZLGrrZk2MKcjY7jZAmCdMSMinS76bd6whEzavQ=="}]},"_npmUser":{"name":"codeduet","email":"codeduet@gmail.com"},"directories":{},"maintainers":[{"name":"codeduet","email":"codeduet@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/nextjs-webpack-component-tagger_0.8.0_1757952562907_0.3177266690698539"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-15T16:09:22.808Z","0.8.0":"2025-09-15T16:09:23.094Z","modified":"2025-09-15T16:09:23.429Z"},"maintainers":[{"name":"codeduet","email":"codeduet@gmail.com"}],"description":"A webpack loader that automatically adds data attributes to your React components in Next.js.","keywords":["webpack","webpack-loader","nextjs","react","codeduet"],"author":{"name":"CodeDuet"},"license":"Apache-2.0","readme":"# @codeduet-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 @codeduet-sh/nextjs-webpack-component-tagger\n# or\nyarn add @codeduet-sh/nextjs-webpack-component-tagger\n# or\npnpm add @codeduet-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: \"@codeduet-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/@codeduet-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-e4c852bd4ca3839da5d8eee3905ebb28"}