DEV Community

artydev
artydev

Posted on • Edited on

Mithril with HTM

#mithril #jsx #htm #html

You like JSX, but you don't want to deal with Babel & Co, give htm a try.

 const html = htm.bind(m);

 const Ciao = function ({attrs}) {
   return {view: () =>  html`<h1>Hello ${attrs.name}</h1>`}
 }

 m.render(app, m(Ciao, {name: "Raph"}))
Enter fullscreen mode Exit fullscreen mode

Test it here Mithril & htm

Improved vesion with AI :

<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/htm@2.2.1"></script>
  <script src="https://unpkg.com/mithril/mithril.js"></script>
</head>

<body>
  <div id="app"></div>

  <script>
    const html = htm.bind(m);

    // Pre-compile the template once
    const template = (name) => html`<h1>Hello ${name}</h1>`;

    // Component using the pre-compiled template
    const Ciao = {
      view: ({attrs}) => template(attrs.name)
    };

    // Render to the DOM
    m.render(document.getElementById("app"), m(Ciao, {name: "Raph"}));
  </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)