Compile template tag to hyperscript
marcodpt opened this issue · comments
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 + cannabis</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 cannabis from 'https://cdn.jsdelivr.net/gh/marcodpt/cannabis/index.js'
const render = cannabis(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>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!
@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/
I'll just convert this into a discussion.