x4d3/preact.html

## preact.html
<!DOCTYPE html>
<html lang="en">
<title>htm Demo</title>
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

<script type="module">
    import {html, Component, render} from 'https://unpkg.com/htm/preact/standalone.module.js';

    class App extends Component {
        addTodo() {
            const {todos = []} = this.state;
            this.setState({todos: todos.concat(`Item ${todos.length}`)});
        }

        render({page}, {todos = []}) {
            return html`
                <div class="app">
                    <${Header} name="ToDo's (${page})"/>
                    <ul>
                        ${todos.map(todo => html`
                            <li key=${todo}>${todo}</li>
                        `)}
                    </ul>
                    <button onClick=${() => this.addTodo()}>Add Todo</button>
                    <${Footer}>footer content here</
                    />
                </div>
            `;
        }
    }

    const Header = ({name}) => html`<h1>${name} List</h1>`

    const Footer = props => html`
        <footer ...${props}/>`

    render(html`
        <${App} page="All"/>`, document.body);
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<title>htm Demo</title>
	<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

	<script type="module">
	import {html, Component, render} from 'https://unpkg.com/htm/preact/standalone.module.js';

	class App extends Component {
	addTodo() {
	const {todos = []} = this.state;
	this.setState({todos: todos.concat(`Item ${todos.length}`)});
	}

	render({page}, {todos = []}) {
	return html`
	<div class="app">
	<${Header} name="ToDo's (${page})"/>
	<ul>
	${todos.map(todo => html`
	<li key=${todo}>${todo}</li>
	`)}
	</ul>
	<button onClick=${() => this.addTodo()}>Add Todo</button>
	<${Footer}>footer content here</
	/>
	</div>
	`;
	}
	}

	const Header = ({name}) => html`<h1>${name} List</h1>`

	const Footer = props => html`
	<footer ...${props}/>`

	render(html`
	<${App} page="All"/>`, document.body);
	</script>
	</html>