I’ve been working on improved documentation for ReactiveHTML. As a part of that I’ve been exploring Preact.
Preact is a an alternative to React that is worth considering because
- Its faster
- It supports jsx like syntax via htm.
I don’t want to mention Preact in the documentation at the current stage because I have not yet been able to successfully use it with for example React frameworks like MaterialUI. But I want to persist and share the example if someone ever wonders if Preact can be used with Panel and how.
Todo List Example
import panel as pn
import param
from panel.reactive import ReactiveHTML
pn.extension()
class TodoList(ReactiveHTML):
title = param.String("Todo List")
todos = param.List()
_template = '<div id="container"></div>'
__javascript__ = [
"https://cdnjs.cloudflare.com/ajax/libs/htm/3.1.1/preact/standalone.umd.min.js",
]
_scripts = {
"render": """
const {render, html, Component} = htmPreact
const Header = ({ name }) => html`<h1>${name}</h1>`
class App extends Component {
addTodo() {
data.todos=data.todos.concat(`Item ${data.todos.length}`)
}
reset() {
data.todos=[]
}
render({title, todos}) {
return html`
<div class="app">
<${Header} name="${title}" />
<ul>
${todos.map(todo => html`
<li key=${todo}>${todo}</li>
`)}
</ul>
<button onClick=${() => this.addTodo()}>Add Todo</button>
<button onClick=${() => this.reset()}>Reset</button>
</div>
`;
}
}
state.rerender=()=>{
app = html`<${App} title=${data.title} todos=${data.todos} />`
render(app, container);
}
state.rerender()
""",
"todos": "state.rerender()",
"title": "state.rerender()",
}
component = TodoList(width=500)
pn.Column(component, component.param.title, component.param.todos).servable()
