{"_id":"@astropub/web-components","name":"@astropub/web-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@astropub/web-components","version":"0.1.0","type":"module","main":"index.js","types":"index.d.ts","exports":{".":"./index.js"},"keywords":["astro-plugin","component","components","element","elements","html","htmlelement","javascript","js","web","web-component","web-components"],"gitHead":"40277fa75a719be6de2afb405820b4b70ac9645a","description":"**Web Components** lets you use native Web Components (`.web.js`) as Astro Components.","_id":"@astropub/web-components@0.1.0","_nodeVersion":"18.4.0","_npmVersion":"8.12.1","dist":{"integrity":"sha512-HfPyK+xBMhegeC+JdB2nQxZ4p3E/wNr3exLt1CJIfwRaaYTkJLw8QkJdDqdzmEaAjeWcvSNGMzsfOF/rhucQ2A==","shasum":"9d3428fefdccb433880fffc0440ff707bf66697b","tarball":"https://registry.npmjs.org/@astropub/web-components/-/web-components-0.1.0.tgz","fileCount":4,"unpackedSize":6517,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAYdW5VRJXgbFiCDXtLkdKBTn1crrzJ+ghnXjcgZLG83AiB14beEA1JilFzXhqE2kXiGlfhzjNfWP549EIgxiIkpNw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizDMCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpslw/+JG7/W5aIG8uFTGfKL+XeECR/bhWKl75IXZCf4sUR2QlaH25O\r\nuFXZ3wCNMMtcRBy4FdBk37VsWYaKgrXJz8tzfeQaV73CdJPxoNIMw/mvw8ug\r\n6JAZBl+0wubcMaJIL59sc1Gh+gcLIkp5yhWikGblZGE9q+7fP11snaiOD1x3\r\nuHtFQyL8qiDFv73TmArBxsnwyr5wF/LI7VDSvyg424kfQ7KzDUtDfDMRekQR\r\n3xAvG1UpNBd0ZxjZUTo8t4redPGGmVwUodNUW5K+OgwJaKviRZakxIaOsueb\r\nUAShjOFiaJAy+SkHHD1bcyDugFZcC47RxfczeCG+gpQly1wFJknCHYgeTVVj\r\ngAY+mGo8hDvDafV8JuC6oiJkWYpXQUjHJJBqol43NuH/go8DrIaxq7R77fQI\r\nw/akztZlvsfPBS19usDFuF7HY7nr8pUEE1NQEOyho/sHS+osoyR0I+CGOMxc\r\nbk6LnLkpWH40/XWNeimz3vX/G47jGy7t+ZCVQypZVwcQcQr+WWqS/MKw22AF\r\napv18A/BMtwHwFkF6hzef4qJKUNAoNQzlZU/wgu+gtuY5bdS/KSUBWvHZSyE\r\nusGuhssB9XixqjhOI0Wu9cDjC/IiBlWBxHO83OkZmouKJLY+q+Xb/bipIufE\r\na2T6V5Ou19ks8Cw9mAIoXTeos098IxoVKfQ=\r\n=45RY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"jonathantneal","email":"jonathantneal@hotmail.com"},"directories":{},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/web-components_0.1.0_1657549570225_0.3575219582509852"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-11T14:26:10.166Z","0.1.0":"2022-07-11T14:26:10.370Z","modified":"2022-07-11T14:26:10.535Z"},"maintainers":[{"name":"jonathantneal","email":"jonathantneal@hotmail.com"}],"description":"**Web Components** lets you use native Web Components (`.web.js`) as Astro Components.","keywords":["astro-plugin","component","components","element","elements","html","htmlelement","javascript","js","web","web-component","web-components"],"readme":"# Web Components\n\n**Web Components** lets you use native Web Components (`.web.js`) as Astro Components.\n\n**components/Button.web.js**:\n```js\nexport default class Button extends HTMLElement {\n constructor() {\n let host = super()\n let root = host.attachShadow({ mode: 'open' })\n\n root.innerHTML = ``\n }\n}\n\ncustomElements.define('h-button', Button)\n```\n\n**pages/index.astro**:\n```astro\n---\nimport Button from '../components/Button.web.js'\n---\n\n \n \n \n Button Example\n \n \n

Button Example

\n \n \n\n```\n\n**Rendered HTML**:\n```html\n\n\n\n \n \n \n Button Example\n \n \n \n

Button Example

\n click me\n \n\n```\n\n## Usage\n\nInstall **Web Components** to your project.\n\n```shell\nnpm install @astropub/web-components\n```\n\nAdd **Web Components** to your Astro configuration.\n\n```js\nimport { webcomponents } from '@astropub/web-components'\n\n/** @type {import('astro').AstroUserConfig} */\nconst config = {\n vite: {\n plugins: [\n webcomponents()\n ]\n }\n}\n\nexport default config\n```\n\nEnjoy!\n","readmeFilename":"README.md"}