Compile template tag to hyperscript #3727

marcodpt · 2022-09-13T21:30:04Z

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>preact + tint</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <script type="module">
      import { h, Component, render } from 'https://unpkg.com/preact?module'
      import tint from 'https://cdn.jsdelivr.net/gh/marcodpt/tint/index.js'
      const renderView = tint(h)

      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")
        render(renderView('my-todo', {
          ...state,
          AddTodo,
          NewValue
        }, root.tagName, {id: 'app'}), root)
      }

      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 preact!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compile template tag to hyperscript #3727

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Compile template tag to hyperscript #3727

marcodpt Sep 13, 2022

Replies: 0 comments

marcodpt
Sep 13, 2022