added web vendorsHEADmaster

1 files changed, 63 insertions, 0 deletions

diff --git a/preact/demo/list.js b/preact/demo/list.js
new file mode 100644
index 0000000..2ef968c
--- /dev/null
+++ b/preact/demo/list.js
@@ -0,0 +1,63 @@
+import { h, render } from 'preact';
+import htm from 'htm';
+import './style.css';
+
+const html = htm.bind(h);
+const createRoot = parent => ({
+	render: v => render(v, parent)
+});
+
+function List({ items, renders, useKeys, useCounts, update }) {
+	const toggleKeys = () => update({ useKeys: !useKeys });
+	const toggleCounts = () => update({ useCounts: !useCounts });
+	const swap = () => {
+		const u = { items: items.slice() };
+		u.items[1] = items[8];
+		u.items[8] = items[1];
+		update(u);
+	};
+	return html`
+		<div>
+			<button onClick=${update}>Re-render</button>
+			<button onClick=${swap}>Swap 2 & 8</button>
+			<label>
+				<input type="checkbox" checked=${useKeys} onClick=${toggleKeys} />
+				Use Keys
+			</label>
+			<label>
+				<input type="checkbox" checked=${useCounts} onClick=${toggleCounts} />
+				Counts
+			</label>
+			<ul class="list">
+				${items.map(
+					(item, i) => html`
+						<li
+							class=${i % 2 ? 'odd' : 'even'}
+							key=${useKeys ? item.name : undefined}
+						>
+							${item.name} ${useCounts ? ` (${renders} renders)` : ''}
+						</li>
+					`
+				)}
+			</ul>
+		</div>
+	`;
+}
+
+const root = createRoot(document.body);
+
+let data = {
+	items: new Array(1000).fill(null).map((x, i) => ({ name: `Item ${i + 1}` })),
+	renders: 0,
+	useKeys: false,
+	useCounts: false
+};
+
+function update(partial) {
+	if (partial) Object.assign(data, partial);
+	data.renders++;
+	data.update = update;
+	root.render(List(data));
+}
+
+update();