HTM stands for 'Hyperscript Tagged Markup', written by Jason Miller,
who is also the creator of the awesome library Preact.
Here is how to use it :
import { render } from 'preact';
import { html } from 'htm/preact';
render(html`<a href="/">Hello!</a>`, document.body);
What's nice, it's that you can use it with any frameworks.
For example in Mithril :
const html = htm.bind(m);
const Ciao = function ({attrs}) {
return {view: () => html`<h1>Hello ${attrs.name}</h1>`}
}
m.render(app, m(Ciao, {name: "Raph"}))
In React :
import ReactDOM from 'react-dom';
import { html } from 'htm/react';
ReactDOM.render(html`<a href="/">Hello!</a>`, document.body);
As you can see, in order display the component, you have to pass it to a 'render' function, specific to the framework used.
Wouldn't it be nice if we could do ? :
let HelloWorld = html`<h1>Hello</h1>`
document.body.append(HelloWorld)
It turns out it's indeed possible HTML to Dom Element :
import { html } from "sinuous"
let HelloWorld = html`<h1>Hello</h1>`
HelloWorld.style.color = "red";
document.body.append(HelloWorld)
Here the 'html' function returns a real DOM element.
Thanks to Sinuous
There are really many advantages in doing so.
It is not unlike the nice library DML;
Here is another example IonicSinuous:
const { html, observable, map } = sinuous;
const Users = observable([]);
function Services() {
async function fetchRandomUsers() {
const response =
await fetch('https://randomuser.me/api/?results=10');
const data = await response.json();
Users(data.results);
}
return {
fetchRandomUsers,
};
}
const User = (user, index) => {
let userView = html`
<ion-item style="display:none;">
<ion-avatar style="margin-right:10px">
<ion-img src=${user.picture.thumbnail}></ion-img>
</ion-avatar>
<ion-label>
${user.name.first} ${user.name.last}
</ion-label>
</ion-item>
`;
setTimeout(() => userView.style.display = "block" , 10 * index + 10)
return userView;
};
const App = () => {
const svc = Services();
return html`
<ion-content style="text-align:center">
<ion-button
onclick=${svc.fetchRandomUsers}
>
Fetch Users
</ion-button>
<ion-list>
${() => Users().map((user,index) => User(user, index))}
</ion-list>
</ion-content>
`;
};
document.body.appendChild(App());
Top comments (0)