{"_id":"@au5ton/remount","name":"@au5ton/remount","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@au5ton/remount","description":"Mount React components to the DOM using custom elements","version":"1.0.0","author":{"name":"Rico Sta. Cruz","email":"rstacruz@users.noreply.github.com"},"bugs":{"url":"https://github.com/au5ton/remount/issues"},"devDependencies":{"@babel/core":"^7.19.1","@babel/preset-env":"^7.19.1","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.18.6","@rollup/plugin-babel":"^5.3.1","@rollup/plugin-commonjs":"^22.0.2","@rollup/plugin-node-resolve":"^14.1.0","@types/jest":"^29.0.3","@types/react":"^18.0.20","@types/react-dom":"^18.0.6","jest":"^29.0.3","jest-environment-jsdom":"^29.0.3","npm-run-all":"^4.1.5","prettier":"^1.15.3","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^2.79.1","rollup-plugin-copy":"^3.4.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-serve":"^2.0.1","rollup-plugin-terser":"^7.0.2","typescript":"^4.8.3"},"directories":{"doc":"docs","example":"examples"},"homepage":"https://github.com/au5ton/remount#readme","jest":{"setupFilesAfterEnv":["./test/jest.setup.js"],"testPathIgnorePatterns":["/node_modules/","/dist/"]},"keywords":["custom element","mount","onmount","react","web component"],"license":"MIT","main":"dist/remount.es5.js","module":"dist/remount.js","types":"dist/index.d.ts","peerDependencies":{"react":">= 18.0.0","react-dom":">= 18.0.0"},"repository":{"type":"git","url":"git+https://github.com/au5ton/remount.git"},"scripts":{"build":"rollup --config","postbuild":"run-s tsc","prettier":"prettier '*.js' 'src/**/*.{js,ts}'","tsc":"tsc","jest":"jest","prepare":"run-s build","test":"jest","watch":"env NODE_ENV=test-rollup rollup --config --watch"},"gitHead":"874e222b45a2a426bd3519ad81999413360181da","_id":"@au5ton/remount@1.0.0","_nodeVersion":"19.8.1","_npmVersion":"9.5.1","dist":{"integrity":"sha512-JY7GBoVoKzrqGkmczqaKS/Xy/aVdmQefjVA8zNSq5z/K9tgD8PSmMqmzuzY/AbgUujMaGigzY5JNdEGjUvH/Dg==","shasum":"b67d12b8ce3058a01a6c8703f498a0f4843ee9d4","tarball":"https://registry.npmjs.org/@au5ton/remount/-/remount-1.0.0.tgz","fileCount":26,"unpackedSize":86403,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcaCW2/oD0/kjQXueilN7a86p9WZWddVDbKukAqViOLAiB4xMe4p9b2kCIzXIn44pDhVSWx9D5m1Opkuj38OAQtjA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIx8sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCjw/9Gz5F/U0X2FvfefwsQuoRlbky9R4htZREgk07v3yBmKYOFzRG\r\n8cByWgwMeLi9iEehXh45UKe6ZzmqXupWpvywZQZTMYR6yCotGv/OKvt7rNRI\r\naIjlaXXWfTFRnKeyD7LzPHgebqxUZuIsXkBYYDx7DV1KnB9/zjEIK/0h10z3\r\nG/KGB0tbxAwJCYx65QdFn4dx6pK5tPFn0VoSGdKOW5zD1EEKincT/qvJJ9QT\r\ntlsKqdeVZrEetAyD79T0DDpl/hV6zUzLScbC5kaV4hMqXQXJDBgT8j1sefKf\r\nGr3jA3Uu0EyU5W5JYjllNc58LOV1gWqdTO7b99Q/nrG+OrF7OdE/Iof5YtcN\r\n77AmWBiZSNAal99BT6VKo6JaiQg24UISmjma0F+x9aptiG1TIi1PcIx81LcI\r\ny3NIHS9OSBjqjM2sG3hsgTneqGLy1A9By4cgarUovZ/S7RB2Sc/RVs3TKl8C\r\nhhJU70aOq7erTy4Xi7kWb0b/Cui84Ft7MchDElvBpwaSKRWIWuO4ZNO7EjYo\r\nh4D7X8++OLf7KEXEpUoj0+sYB8uSBgUnQwmIZrJ1NCEStUbx7ZXTBnY159P9\r\nyS6vvUd3PUtnZznBzcJ4woK4Zw0f9nmKOGw7MjBGrywTxp+6VSN7HMpJEsjO\r\ncAu/ZTGG1Z305UxB0fq7nRJlp6WSjqIymjM=\r\n=Uavt\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"au5ton","email":"austinjckson@gmail.com"},"maintainers":[{"name":"au5ton","email":"austinjckson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/remount_1.0.0_1680023339902_0.7215482806468247"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-28T17:08:59.809Z","1.0.0":"2023-03-28T17:09:00.048Z","modified":"2023-03-28T17:09:00.239Z"},"maintainers":[{"name":"au5ton","email":"austinjckson@gmail.com"}],"description":"Mount React components to the DOM using custom elements","homepage":"https://github.com/au5ton/remount#readme","keywords":["custom element","mount","onmount","react","web component"],"repository":{"type":"git","url":"git+https://github.com/au5ton/remount.git"},"author":{"name":"Rico Sta. Cruz","email":"rstacruz@users.noreply.github.com"},"bugs":{"url":"https://github.com/au5ton/remount/issues"},"license":"MIT","readme":"**Experimental fork of https://github.com/rstacruz/remount**\n\n<br>\n\n<p align='center'><a href='https://github.com/rstacruz/remount'><img src='docs/images/remount.png' width='450'></a></p>\n\n<br>\n\n<h1 align='center'>Remount</h1>\n\n<p align='center'>\n<a href='https://npmjs.com/package/remount'><img src='https://img.shields.io/npm/v/remount.svg?colorA=234&colorB=83e' alt='version'></a>\n&nbsp;\n<a href='https://bundlephobia.com/result?p=remount'><img src='https://img.shields.io/bundlephobia/minzip/remount.svg?colorA=345&colorB=89a&label=size' alt='Bundle size'></a>\n</p>\n\n<p align='center'>Use your React components anywhere in your <br> HTML as web components (custom elements).</p>\n\n<p align='center'>\n<a href='https://codepen.io/rstacruz/pen/EpBZRv?editors=1010'>Demo</a> ⚡ <a href='https://github.com/rstacruz/remount#remount'>Docs</a>\n<br>\n<em>2kb gzip'd &nbsp;&middot;&nbsp; No dependencies &nbsp;&middot;&nbsp; IE support</em>\n</p>\n\n<br>\n\n<br>\n\n## Installation\n\nRemount is available through the npm package repository. React 18 is required.\n\n```sh\n# npm\nnpm install remount react react-dom\n# yarn\nyarn add remount react react-dom\n```\n\n- Via yarn: `yarn add remount`\n- or npm: `npm install remount`\n\n## Usage\n\nLet's start with any React component. Here's one:\n\n```js\nconst Greeter = ({ name }) => {\n  return <div>Hello, {name}!</div>\n}\n```\n\nUse _define()_ to define custom elements. Let's define a `<x-greeter>` element:\n\n```js\nimport { define } from 'remount'\n\ndefine({ 'x-greeter': Greeter })\n```\n\nYou can now use it anywhere in your HTML! :boom:\n\n```html\n<x-greeter props-json='{\"name\":\"John\"}'></x-greeter>\n```\n\n⚡ **[API documentation →](docs/api.md)**\n\n## Use cases\n\nSome ideas on why you might want to consider Remount for your project:\n\n|                                                               |                                                                                                                                                                                                            |\n| ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| <br><img src='./docs/images/non-spa.png' width='400'><br><br> | ✨ **Adding React to non-SPA apps** <br> You can use React components on any page of a \"regular\" HTML site. Great for adding React to apps built on Rails or Phoenix.                                      |\n|                                                               |                                                                                                                                                                                                            |\n| <br><img src='./docs/images/interop.png' width='400'><br><br> | 💞 **Interop with other frameworks** <br> Remount lets you use your React components just like any other HTML element. This means you can use React with Vue, Angular, or any other DOM library/framework. |\n\n## More features\n\n- JSON props (eg, `<x-greeter props-json=\"{...}\">`) ([docs](./docs/api.md))\n- Named attributes (eg, `<x-greeter name=\"John\">`) ([docs](./docs/api.md))\n- Uses Custom Elements API (when available)\n- Fallback to compatible API for other browers\n- Shadow DOM mode (when available)\n\n## Browser support\n\nRemount supports all browsers that React 18 supports.\n\nCustom Elements API<sup>[#][custom-elements]</sup> (\"Web Components\") will be used if it's available (Chrome/67+), and will fallback to a compatible API otherwise.\n\n⚡ [Browser support docs →](./docs/browser_support.md)\n\n[custom-elements]: https://caniuse.com/#search=custom%20elements\n\n## Documentation\n\n- [API documentation](./docs/api.md)\n- [Builds](./docs/builds.md) &mdash; ES2015+ and ES Module builds are also provided.\n- [FAQ and Troubleshooting](./docs/faq.md) &mdash; Start here if you find any issues.\n- [Comparison with alternatives](./docs/comparison.md)\n- [Browser support](./docs/browser_support.md)\n\n## Thanks\n\n**remount** © 2022, Rico Sta. Cruz. Released under the [MIT] License.<br>\nAuthored and maintained by Rico Sta. Cruz with help from contributors ([list][contributors]).\n\n> [ricostacruz.com](http://ricostacruz.com) &nbsp;&middot;&nbsp;\n> GitHub [@rstacruz](https://github.com/rstacruz) &nbsp;&middot;&nbsp;\n> Twitter [@rstacruz](https://twitter.com/rstacruz)\n\n[mit]: http://mit-license.org/\n[contributors]: http://github.com/rstacruz/remount/contributors\n\n<br>\n\n[![](https://img.shields.io/github/followers/rstacruz.svg?style=social&label=@rstacruz)](https://github.com/rstacruz) &nbsp;\n[![](https://img.shields.io/twitter/follow/rstacruz.svg?style=social&label=@rstacruz)](https://twitter.com/rstacruz) <br>\n","readmeFilename":"README.md"}