Compile template tag to hyperscript #3726
Description
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 + cannabis</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 cannabis from "./index.js"
const renderView = cannabis(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>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!