{"id":18534814,"url":"https://github.com/atomicojs/uhtml","last_synced_at":"2025-05-14T23:35:05.705Z","repository":{"id":113250245,"uuid":"504739301","full_name":"atomicojs/uhtml","owner":"atomicojs","description":null,"archived":false,"fork":false,"pushed_at":"2022-06-18T04:05:30.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-30T00:02:24.270Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomicojs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-06-18T04:02:39.000Z","updated_at":"2022-08-10T14:11:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"7aa15755-f047-4a02-a00e-b0aeeeac82ba","html_url":"https://github.com/atomicojs/uhtml","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"33c943bf26a81fe50d7a412412be03e3021f13a6"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fuhtml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fuhtml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fuhtml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomicojs%2Fuhtml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomicojs","download_url":"https://codeload.github.com/atomicojs/uhtml/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253208315,"owners_count":21871490,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T19:17:07.385Z","updated_at":"2025-05-14T23:35:05.630Z","avatar_url":"https://github.com/atomicojs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"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`\u003ch1\u003eAtomico + uhtml\u003c/h1\u003e`;\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\u003ctypeof component\u003e) {\r\n    html.shadowDom = true;\r\n    return html`\u003ch1\u003eWelcome to ${message}!\u003c/h1\u003e`;\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(() =\u003e html`\u003cinput type=\"text\" /\u003e`);\r\n}\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fuhtml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomicojs%2Fuhtml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomicojs%2Fuhtml/lists"}