Compile template tag to hyperscript #2803

marcodpt · 2022-09-13T21:33:07Z

marcodpt
Sep 13, 2022

I created a view engine based on the DOM template tag, which compiles to hyperscript functions:

See for example what a simple TODO app looks like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>mithril + tint</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <script src="https://unpkg.com/mithril/mithril.js"></script>
    <script type="module">
      import tint from 'https://cdn.jsdelivr.net/gh/marcodpt/tint/index.js'
      const render = tint(m)

      const state = {
        todos: [],
        value: ""
      }
      const AddTodo = () => {
        state.todos.push(state.value)
        state.value = ""
        rerender()
      }
      const NewValue = (ev) => {
        state.value = ev.target.value
      }
      const rerender = () => {
        const root = document.getElementById("app")
        m.render(root, render('my-todo', {
          ...state,
          AddTodo,
          NewValue
        }, root.tagName, {id: 'app'}))
      }

      rerender()
    </script>
  </head>
  <body>
    <main id="app"></main>
    <template id="my-todo">
      <h1>To do list</h1>
      <input type="text" :value="value" :oninput="NewValue">
      <ul>
        <li :each="todos" :text></li>
      </ul>
      <button :onclick="AddTodo">New!</button>
    </template>
  </body>
</html>

LIVE PREVIEW

In this example, what was achieved was the total separation of the javascript layouts, without using build steps, and only introducing as a dependency a library with ~130 lines of javascript code.

Which I find extremely useful for maintaining large projects, especially working with designers who only have knowledge of css and html.

Another great feat that was achieved is that in the examples I build the same app:

Without changing absolutely anything in the model and layouts.

I'm open to listening to suggestions, solving bugs, and helping with any problems or features that the community deems necessary.

Sorry for opening an issue, but I didn't know a better way to expose my work which I believe is extremely useful for working with frameworks based on hyperscript.

Keep up the wonderful work you guys do with the mithril.js!

kevinfiol · 2022-09-13T22:09:06Z

kevinfiol
Sep 13, 2022

@marcodpt I agree that opening an issue here is probably not the appropriate place for this. I'd recommend you open a show-n-tell thread over in the #general stream of the Mithril Zulip Chat: https://mithril.zulipchat.com/

0 replies

dead-claudia · 2022-09-17T23:18:29Z

dead-claudia
Sep 17, 2022
Maintainer

I'll just convert this into a discussion.

Edit: done (and put in the right category)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compile template tag to hyperscript #2803

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Compile template tag to hyperscript #2803

marcodpt Sep 13, 2022

Replies: 2 comments

kevinfiol Sep 13, 2022

dead-claudia Sep 17, 2022 Maintainer

marcodpt
Sep 13, 2022

kevinfiol
Sep 13, 2022

dead-claudia
Sep 17, 2022
Maintainer