//import { html, render } from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/preact/standalone.module.js';
//import { Fragment } from 'https://cdn.jsdelivr.net/npm/preact@10.3.4/dist/preact.module.js';

import { h, render, Fragment } from 'https://cdn.jsdelivr.net/npm/preact@10.3.4/dist/preact.module.js';
import htm from 'https://cdn.jsdelivr.net/npm/htm@3.0.3/dist/htm.module.js';
const html = htm.bind(h);

const elem = document.querySelector("#app");

const Item = (item) => {
	return html`
  	<div key=${item.id} data-id=${item.id}>
      ${item.text}
    </div>`;
};

const items = [{id: 1, text: 'one'}, { id: 2, text:'two' }];

const performRender = () => {
  const children = items.map(item => html`<${Item} ...${item} />`);
  render(html`<${Fragment}>${children.reverse()}<//>`, elem);
};

setTimeout(() => {
  items.push({ id: 3, text: 'three'});
  performRender();
}, 1000);

setTimeout(() => {
  items.push({ id: 4, text: 'four'});
  performRender();
}, 2000);

window.onload = performRender;