{"_id":"@alexstormwood/reactjs-ts-component-library-demo","_rev":"4-9e6dfc0232b6efd33679b44cee5a7fee","name":"@alexstormwood/reactjs-ts-component-library-demo","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@alexstormwood/reactjs-ts-component-library-demo","version":"0.0.1","_id":"@alexstormwood/reactjs-ts-component-library-demo@0.0.1","maintainers":[{"name":"alexstormwood","email":"alex@bigfootds.com"}],"dist":{"shasum":"305bb3577236eae99f7f5d4ac830dc4b73003a65","tarball":"https://registry.npmjs.org/@alexstormwood/reactjs-ts-component-library-demo/-/reactjs-ts-component-library-demo-0.0.1.tgz","fileCount":8,"integrity":"sha512-W1r0OMxCZANDP3mwAU/eANK4+fc5RVrF1T4X6R7wNc04Xddht4d/WN7OOt+nWPZhhELYYkLEQWAYI1X5LiESow==","signatures":[{"sig":"MEQCIEl44xctwJZ1n3Jz+Y8Lc8wIkk4qbTo/wFg3crM4/KW6AiBkM94sZGtOK+MFaTBJ2Za06YDnI20HVIFjEZMvGJzNJA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4846},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"5442d36d28ab061d77920c1359ea8c411b22bab1","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b ./tsconfig.lib.json && vite build","clean":"rm -rf dist","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"alexstormwood","email":"alex@bigfootds.com"},"_npmVersion":"10.9.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^11.0.1","vite":"^6.2.0","react":"^19.1.0","tslib":"^2.8.1","eslint":"^9.21.0","globals":"^15.15.0","react-dom":"^19.0.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/node":"^22.13.17","@types/react":"^19.0.12","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","vite-plugin-lib-inject-css":"^2.2.1","eslint-plugin-react-refresh":"^0.4.19"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/reactjs-ts-component-library-demo_0.0.1_1743848785085_0.390507516348334","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@alexstormwood/reactjs-ts-component-library-demo","version":"0.0.2","_id":"@alexstormwood/reactjs-ts-component-library-demo@0.0.2","maintainers":[{"name":"alexstormwood","email":"alex@bigfootds.com"}],"dist":{"shasum":"717c560df3a3ecf03888e0c5bfadda18856b9aaf","tarball":"https://registry.npmjs.org/@alexstormwood/reactjs-ts-component-library-demo/-/reactjs-ts-component-library-demo-0.0.2.tgz","fileCount":8,"integrity":"sha512-jEF0inwkHp+PRerCxSy3PM601mJtszT99ZKzzwoV0bqFkZH2Pyx6Ddm4wkD54EEdAUUI8wuYK1vE6f+al7BVyw==","signatures":[{"sig":"MEYCIQCn8ztmr2JTr9fL5HNLwFLFbxf76Qwnu/kPWSKy7x82JwIhAKe03m+svRxKZqhaIqmu27yie6rt+haUJv48GdCejGwA","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3427},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"5830c6c384eb1776df55c662cef75d4c273396a4","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b ./tsconfig.lib.json && vite build","clean":"rm -rf dist","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"alexstormwood","email":"alex@bigfootds.com"},"_npmVersion":"10.9.2","description":"Example repo to demonstrate how a ReactJS project built with Vite and TypeScript can be used to create and share components as a library - specifically, as an NPM package.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^11.0.1","vite":"^6.2.0","react":"^19.1.0","tslib":"^2.8.1","eslint":"^9.21.0","globals":"^15.15.0","react-dom":"^19.0.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/node":"^22.13.17","@types/react":"^19.0.12","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","vite-plugin-lib-inject-css":"^2.2.1","eslint-plugin-react-refresh":"^0.4.19"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/reactjs-ts-component-library-demo_0.0.2_1743849083527_0.6515400110974485","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@alexstormwood/reactjs-ts-component-library-demo","version":"0.0.5","_id":"@alexstormwood/reactjs-ts-component-library-demo@0.0.5","maintainers":[{"name":"alexstormwood","email":"alex@bigfootds.com"}],"dist":{"shasum":"d934e898eebe513333d753946693e1a5bc1bcb53","tarball":"https://registry.npmjs.org/@alexstormwood/reactjs-ts-component-library-demo/-/reactjs-ts-component-library-demo-0.0.5.tgz","fileCount":8,"integrity":"sha512-hol63wT80tVTRkoWJ3TIG454L1P0rHgEOuJHTiVER5L/uouWElDJ5MKxiX6m6gMW/VLX8QNZk7IkId/bHBVw6g==","signatures":[{"sig":"MEUCIQDmRTthu30hdpFHUyp+OYBhuYyhE5bkSmNT5HnFP5kg1QIgKcLLIwV7yr9t+ZFjIbeXbqmS4iHRXxcgXtDijvk6I6I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3585},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"0c0383195bdc733d37d68f984330446bfd60dcda","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b ./tsconfig.lib.json && vite build","clean":"rm -rf dist","preview":"vite preview","prepublishOnly":"npm run build"},"_npmUser":{"name":"alexstormwood","email":"alex@bigfootds.com"},"_npmVersion":"10.9.2","description":"Example repo to demonstrate how a ReactJS project built with Vite and TypeScript can be used to create and share components as a library - specifically, as an NPM package.","directories":{},"sideEffects":["**/*.css"],"_nodeVersion":"23.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^11.0.1","vite":"^6.2.0","react":"^19.1.0","tslib":"^2.8.1","eslint":"^9.21.0","globals":"^15.15.0","react-dom":"^19.0.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/node":"^22.13.17","@types/react":"^19.0.12","vite-plugin-dts":"^4.5.3","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","vite-plugin-lib-inject-css":"^2.2.1","eslint-plugin-react-refresh":"^0.4.19"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/reactjs-ts-component-library-demo_0.0.5_1743850995464_0.40773276390691415","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@alexstormwood/reactjs-ts-component-library-demo","private":false,"publishConfig":{"access":"public"},"main":"dist/index.js","types":"dist/index.d.ts","sideEffects":["**/*.css"],"version":"0.1.0","type":"module","scripts":{"dev":"vite","build:lib":"tsc -b ./tsconfig.lib.json && vite build --config ./vite.lib.config.ts","build:demo":"tsc -b ./tsconfig.app.json && vite build --config ./vite.app.config.ts","lint":"eslint .","preview":"vite preview --outDir demo","clean":"rm -rf dist","prepublishOnly":"npm run build:lib"},"peerDependencies":{"react":"^19.1.0","react-dom":"^19.0.0"},"devDependencies":{"@eslint/js":"^9.21.0","@types/node":"^22.13.17","@types/react":"^19.0.12","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","eslint":"^9.21.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","glob":"^11.0.1","globals":"^15.15.0","react":"^19.1.0","react-dom":"^19.0.0","tslib":"^2.8.1","typescript":"~5.7.2","typescript-eslint":"^8.24.1","vite":"^6.2.0","vite-plugin-dts":"^4.5.3","vite-plugin-lib-inject-css":"^2.2.1"},"_id":"@alexstormwood/reactjs-ts-component-library-demo@0.1.0","gitHead":"9a486271f72331fef5c5666eb010f054db90908d","description":"Example repo to demonstrate how a ReactJS project built with Vite and TypeScript can be used to create and share components as a library - specifically, as an NPM package.","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-NbSeRWxiNDKQZrJ1PmH9fPeqrl7KOSfwDwgEyXiy8zkT0ZL0cTXi9CXiyBuTIJSMqdE40sxoke+WwHCN8Vr/Kg==","shasum":"54d35347d6c4be523db1e1dc2f4879e2e8aca6c6","tarball":"https://registry.npmjs.org/@alexstormwood/reactjs-ts-component-library-demo/-/reactjs-ts-component-library-demo-0.1.0.tgz","fileCount":8,"unpackedSize":4971,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGXIALx/vAYqsRtsrojBPO/mliuvIDGeH7lvrIv3b2E7AiAd8s8XULc134R/BAfZnrkU4/CsiIxlDp/kAzIVH9rXXQ=="}]},"_npmUser":{"name":"alexstormwood","email":"alex@bigfootds.com"},"directories":{},"maintainers":[{"name":"alexstormwood","email":"alex@bigfootds.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/reactjs-ts-component-library-demo_0.1.0_1743905409413_0.35658336050025263"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-05T10:26:25.002Z","modified":"2025-04-06T02:10:09.819Z","0.0.1":"2025-04-05T10:26:25.263Z","0.0.2":"2025-04-05T10:31:23.720Z","0.0.5":"2025-04-05T11:03:15.664Z","0.1.0":"2025-04-06T02:10:09.631Z"},"description":"Example repo to demonstrate how a ReactJS project built with Vite and TypeScript can be used to create and share components as a library - specifically, as an NPM package.","maintainers":[{"name":"alexstormwood","email":"alex@bigfootds.com"}],"readme":"# ReactJS TypeScript Component Library Demo\n\nExample repo to demonstrate how a ReactJS project built with Vite and TypeScript can be used to create and share components as a library - specifically, as an NPM package.\n\n## Package Usage\n\nInstall this package with: \n\n`npm install @alexstormwood/reactjs-ts-component-library-demo`\n\nImport the component with:\n\n```js\nimport { ExampleComponent } from '@alexstormwood/reactjs-ts-component-library-demo';\n```\n\nUse the component with:\n\n```jsx\n<ExampleComponent />\n```\n\n## Package Build and Publish\n\nTo build this project's package, you must run: \n\n`npm run build:lib`\n\nThe package output is available in the `dist/` folder of the repository, and publishing to a registry such as NPM will publish a package with contents like:\n\n- README.md\n- LICENSE\n- package.json\n- dist/\n\t- index.js\n\t- index.d.ts\n\t- ...the rest of files and folders contained within the `dist/` folder\n\nThe package's `package.json` is configured to export the `dist/index.js` file already, so usage is handled as per above. \nYour `lib/index.ts` should provide the expected exports of the package to make that work though!\n\n## Package Demo\n\nA package made with this style of project structure will also be able to deploy as a demo website, from a website with source code in the `src` directory.\n\nTo build the demo website, you should run: \n\n`npm run build:demo`\n\nTo publish the website, you want to publish the contents of the `demo/` directory.\n\nIn Netlify, for example, your Build Settings configuration would look like:\n\n- Branch: `main`\n- Build command: `npm run build:demo`\n- Publish directory: `demo`\n\nAnd then your `src/` ReactJS app that demonstrates the usage of the package made in `lib/` would be available for all to see!","readmeFilename":"README.md"}