{"_id":"@atomico/uhtml","name":"@atomico/uhtml","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atomico/uhtml","description":"uhtml render for Atomico webcomponents","version":"1.0.0","type":"module","publishConfig":{"access":"public"},"scripts":{"start":"vite","build":"vite build","test":"vitest","coverage":"vitest run --coverage","exports":"exports src/uhtml.ts --exports --types","prepublishOnly":"npm run coverage && npm run exports"},"dependencies":{"atomico":"latest","uhtml":"latest"},"devDependencies":{"@atomico/exports":"^0.33.5","@atomico/tsconfig":"1.0.0","@atomico/vite":"latest","c8":"^7.11.3","happy-dom":"latest","typescript":"^4.7.3","vite":"latest","vitest":"latest"},"peerDependencies":{"atomico":"latest","uhtml":"latest"},"prettier":{"tabWidth":4,"singleQuote":false},"module":"./dist/uhtml.js","exports":{"./uhtml":"./dist/uhtml.js",".":"./dist/uhtml.js"},"types":"types/uhtml.d.ts","typesVersions":{"*":{"uhtml":["./types/uhtml.d.ts"]}},"gitHead":"33c943bf26a81fe50d7a412412be03e3021f13a6","_id":"@atomico/uhtml@1.0.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-q20B4iIsxNVZQ2fc6GA308/H5XxJU1PjSRlmg/Qx9qrZXuPRwx+ctYukayDhk4oOD9aqTbcxRxBkcuLJ/ygAMA==","shasum":"e20544315ecccd2d7323979acbdef392c0afe4ed","tarball":"https://registry.npmjs.org/@atomico/uhtml/-/uhtml-1.0.0.tgz","fileCount":29,"unpackedSize":6079852,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAluNsB9oeb5giJpje/x4E8/n3Vsbw+MZU9miCG1bQ8AIgCYQGsTp8v0MJrq8Q0N5iHECDQnfCfHKfUVtgNCOR0TM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirVBIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA5A//RtoXTQJP2hEujcn+eKf2/5TaIsYOLXwswgfv4OjTv/0jWnPn\r\nFvMwAqgVGt3s8WCw6a+Q4w32TRBHlQHFV3E6+u6Zskw+aoZC5kCBuuliT0yy\r\nnOH4T70zGLnqwSCcnL2lqDGkF3baPgDceBVfi+7UwLXhHfXQaVAX03bu0Zwc\r\ned3o+KU4fWRccumAN+EPrkfkqebfpbLW6Y/TqwF6bgJuiTc9BAzGC90A0Gog\r\nIs+Bi2L4Tk/400C7fwdnRJJHwQRKqubHvEl2qZdyv+3zRlKCLdGnYWET7XWv\r\nafSv3qtlw+9uyi4iUnOtHvfRyUk9Gf5piu7Ck+zphBcEmeQZxicEZUOCrJt+\r\ngZHos/Gp19PXOdSCEhIAlqI4jL6hO6E6AKFCcLEwAs37B/6vvHF4E7MCi01j\r\nq5b5Rj3a8hbBFvR6X+87EqlfpiZe2c0MquINyL0o227HrIMyyM6/AM52yJ5l\r\nfao47J0XsE3Skk1KwYR17ywUsgHGlAyeoWH5J/lXHyfDYSvHCXvIFrQyPQYq\r\nilVkAG4UHK5J0ZlraoQvBvUSmmXyQc/ztb1iK3T0qFhHrqzTb0WO5u9dBadv\r\n4bB/qSsDDXQNXPPxDg1CShqpRqvrPorf8pCNvd2tHvVfx/xPipJtfVaUBFeJ\r\nkxJ0xEShhbyttZqdE47hkVwvrccTFSCauPQ=\r\n=IjIY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"uppercod","email":"mtrujillo@outlook.cl"},"directories":{},"maintainers":[{"name":"uppercod","email":"mtrujillo@outlook.cl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/uhtml_1.0.0_1655525448209_0.3260393694155985"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-18T04:10:48.151Z","1.0.0":"2022-06-18T04:10:48.515Z","modified":"2022-06-18T04:10:48.650Z"},"maintainers":[{"name":"uppercod","email":"mtrujillo@outlook.cl"}],"description":"uhtml render for Atomico webcomponents","readme":"# @atomico/uhtml\r\n\r\n[![Discord](https://raw.githubusercontent.com/atomicojs/atomico/brand/link-to-discord.svg)](https://discord.gg/7z3rNhmkNE) [![Twitter](https://raw.githubusercontent.com/atomicojs/atomico/brand/link-to-twitter.svg)](https://twitter.com/atomicojs)\r\n\r\n`@atomico/uhtml` will allow you to use uhtml within Atomico, example:\r\n\r\n```js\r\nimport { c } from \"atomico\";\r\nimport { html } from \"@atomico/uhtml\";\r\n\r\nfunction component() {\r\n    return html`<h1>Atomico + uhtml</h1>`;\r\n}\r\n```\r\n\r\nThe first html return must always come from the `@atomico/uhtml` model, since atomico adds the render method to this function, which allows atomico to render any library.\r\n\r\n## Objectives.\r\n\r\n1. Support uhtml as an optional renderer for developers who are comfortable with uhtml.\r\n2. Give declarative support to the use of the shadowDom.\r\n3. Support references, to share hooks between Atomico, uhtml, react and react.\r\n\r\n## shadowDom\r\n\r\n```js\r\nimport { c } from \"atomico\";\r\nimport { html } from \"@atomico/uhtml\";\r\n\r\nfunction component({ message }: Props<typeof component>) {\r\n    html.shadowDom = true;\r\n    return html`<h1>Welcome to ${message}!</h1>`;\r\n}\r\n\r\ncomponent.props = {\r\n    message: { type: String, value: \"Atomico\" },\r\n};\r\n\r\ncustomElements.define(\"my-component\", c(component));\r\n```\r\n\r\n## useRender\r\n\r\nHomologous hook of useRender from [@atomico/hooks/use-render](https://atomico.gitbook.io/doc/atomico/atomico-hooks/use-render).\r\n\r\n```js\r\nimport { useRender } from \"@atomico/uhtml\";\r\n\r\nfunction component() {\r\n    useRender(() => html`<input type=\"text\" />`);\r\n}\r\n```\r\n","readmeFilename":"README.md"}