https://github.com/atomicojs/uhtml
https://github.com/atomicojs/uhtml
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/atomicojs/uhtml
- Owner: atomicojs
- Created: 2022-06-18T04:02:39.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-18T04:05:30.000Z (about 4 years ago)
- Last Synced: 2025-04-30T00:02:24.270Z (about 1 year ago)
- Language: TypeScript
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @atomico/uhtml
[](https://discord.gg/7z3rNhmkNE) [](https://twitter.com/atomicojs)
`@atomico/uhtml` will allow you to use uhtml within Atomico, example:
```js
import { c } from "atomico";
import { html } from "@atomico/uhtml";
function component() {
return html`
Atomico + uhtml
`;
}
```
The 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.
## Objectives.
1. Support uhtml as an optional renderer for developers who are comfortable with uhtml.
2. Give declarative support to the use of the shadowDom.
3. Support references, to share hooks between Atomico, uhtml, react and react.
## shadowDom
```js
import { c } from "atomico";
import { html } from "@atomico/uhtml";
function component({ message }: Props) {
html.shadowDom = true;
return html`
Welcome to ${message}!
`;
}
component.props = {
message: { type: String, value: "Atomico" },
};
customElements.define("my-component", c(component));
```
## useRender
Homologous hook of useRender from [@atomico/hooks/use-render](https://atomico.gitbook.io/doc/atomico/atomico-hooks/use-render).
```js
import { useRender } from "@atomico/uhtml";
function component() {
useRender(() => html``);
}
```