import { JSXAlone, ElementClass } from 'jsx-alone-html'
import { writeFileSync } from 'fs'
const TaskPageLink = props =>
<a href={`pages/tasks/${props.task}_small.html`}>{props.children}</a>
class App extends ElementClass {
render() {
return (
<article>
<h3>Welcome {this.props.name}!</h3>
<p>These are your tasks:</p>
<ul>
{this.props.tasks.map(task => (
<li>
<TaskPageLink task={task}>{task}</TaskPageLink>
</li>
))}
</ul>
</article>
)
}
}
const tasks = ['Wash dishes', 'Go outside', 'Play soccer']
const app = <App name="John Doe" tasks={tasks} />
const output = JSXAlone.render(app)
writeFileSync(`output.html`, output)