ara4n/WebTableViewPreact.html

## WebTableViewPreact.html
<html>
<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script>
<script type="text/javascript">

const h = preact.h;

class Timeline extends preact.Component {
    render() {
        return ( // we manually convert JSX into h() to avoid depending on babel or similar
            h('ol', null,
                this.props.events.map((ev)=>
                    h('li', null, [
                        h('span', { className: "sender" }, ev.sender + " " ),
                        h('span', { className: "body" },   ev.contents.formatted_body || ev.contents.body ),
                    ])
                )
            )
        );
    }
}

let events = [];

function setEvents(args) {
    events = args.append ? events.concat(args.events) : args.events;
    preact.render(h(Timeline, { events }), document.body, document.body.lastChild);
}
</script>

<script type="text/javascript">
    // Fake client pretending to be Swift
        setTimeout(()=>{
            setEvents({
                events: [
                    { sender: "@matthew:matrix.org", contents: { body: "Hello world!" } },
                    { sender: "@matthew:matrix.org", contents: { formatted_body: "I am a fish" } },
                ],
            });
        }, 0);

        setTimeout(()=>{
            setEvents({
                events: [
                    { sender: "@neil:sandbox.modular.im", contents: { body: "Mr Flibble is very cross!" } },
                ],
                append: true,
            });
        }, 1000);
</script>
</html>
	<html>
	<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script>
	<script type="text/javascript">

	const h = preact.h;

	class Timeline extends preact.Component {
	render() {
	return ( // we manually convert JSX into h() to avoid depending on babel or similar
	h('ol', null,
	this.props.events.map((ev)=>
	h('li', null, [
	h('span', { className: "sender" }, ev.sender + " " ),
	h('span', { className: "body" }, ev.contents.formatted_body \|\| ev.contents.body ),
	])
	)
	)
	);
	}
	}

	let events = [];

	function setEvents(args) {
	events = args.append ? events.concat(args.events) : args.events;
	preact.render(h(Timeline, { events }), document.body, document.body.lastChild);
	}
	</script>

	<script type="text/javascript">
	// Fake client pretending to be Swift
	setTimeout(()=>{
	setEvents({
	events: [
	{ sender: "@matthew:matrix.org", contents: { body: "Hello world!" } },
	{ sender: "@matthew:matrix.org", contents: { formatted_body: "I am a fish" } },
	],
	});
	}, 0);

	setTimeout(()=>{
	setEvents({
	events: [
	{ sender: "@neil:sandbox.modular.im", contents: { body: "Mr Flibble is very cross!" } },
	],
	append: true,
	});
	}, 1000);
	</script>
	</html>