Add "preact" implementation to table-app

apps/table-app/_shared/store.js

@@ -25,7 +25,7 @@ function _random(max) {
  * @property {Data} data
  */
 
-/** @typedef {{ store?: Store }} MainProps */
+/** @typedef {{ store: Store }} MainProps */
 
 export class Store {
 	constructor() {

apps/table-app/preact-class/index.jsx

@@ -60,7 +60,7 @@ export class Main extends Component {
 	/** @param {MainProps} props */
 	constructor(props) {
 		super(props);
-		this.state = { store: props.store ?? new Store() };
+		this.state = { store: props.store };
 		this.select = this.select.bind(this);
 		this.delete = this.delete.bind(this);
 
@@ -128,6 +128,7 @@ export class Main extends Component {
 
 /** @type {(rootDom: HTMLElement, props: MainProps ) => TableApp} */
 export function render(rootDom, props) {
+	if (!props) props = { store: new Store() };
 	preactRender(<Main {...props} />, rootDom);
 
 	/** @type {import('../_shared/store.js').TableApp} */
@@ -145,8 +146,9 @@ export function render(rootDom, props) {
 	};
 }
 
-/** @type {(rootDom: HTMLElement, props: MainProps ) => TableApp} */
+/** @type {(rootDom: HTMLElement, props?: MainProps ) => TableApp} */
 export function hydrate(rootDom, props) {
+	if (!props) props = { store: new Store() };
 	preactHydrate(<Main {...props} />, rootDom);
 
 	/** @type {import('../_shared/store.js').TableApp} */

apps/table-app/preact-hooks/index.jsx

@@ -48,7 +48,7 @@ function Main({ store: initialStore }) {
 	/** @type {preact.RefObject<Store | undefined>} */
 	const storeRef = useRef();
 	if (storeRef.current == null) {
-		storeRef.current = initialStore ?? new Store();
+		storeRef.current = initialStore;
 	}
 
 	const store = storeRef.current;
@@ -115,14 +115,16 @@ function Main({ store: initialStore }) {
 	);
 }
 
-/** @type {(rootDom: HTMLElement, props: MainProps ) => TableApp} */
+/** @type {(rootDom: HTMLElement, props?: MainProps ) => TableApp} */
 export function render(rootDom, props) {
+	if (!props) props = { store: new Store() };
 	preactRender(<Main {...props} />, rootDom);
 	return app;
 }
 
-/** @type {(rootDom: HTMLElement, props: MainProps ) => TableApp} */
+/** @type {(rootDom: HTMLElement, props?: MainProps ) => TableApp} */
 export function hydrate(rootDom, props) {
+	if (!props) props = { store: new Store() };
 	preactHydrate(<Main {...props} />, rootDom);
 	return app;
 }

apps/table-app/preact/index.jsx

@@ -0,0 +1,131 @@
+import {
+	render as preactRender,
+	hydrate as preactHydrate,
+	createElement,
+} from "preact";
+import { Store } from "../_shared/store.js";
+
+/** @typedef {import('../_shared/store.js').RowProps} RowProps */
+/** @typedef {import('../_shared/store.js').MainProps} MainProps */
+/** @typedef {import("../_shared/store").TableApp} TableApp */
+
+/** @param {RowProps} props */
+function Row(props) {
+	// TODO: Memoize??
+
+	let { styleClass, data, onClick, onDelete } = props;
+
+	return (
+		<tr className={styleClass}>
+			<td className="col-md-1">{data.id}</td>
+			<td className="col-md-4">
+				<a onClick={() => onClick(data.id)}>{data.label}</a>
+			</td>
+			<td className="col-md-1">
+				<a onClick={() => onDelete(data.id)}>
+					<span className="glyphicon glyphicon-remove" aria-hidden="true" />
+				</a>
+			</td>
+			<td className="col-md-6" />
+		</tr>
+	);
+}
+
+/** @param {MainProps & { select(id: number): void; delete(id: number): void; }} props */
+function Main(props) {
+	let rows = props.store.data.map((d, i) => {
+		return (
+			<Row
+				key={d.id}
+				data={d}
+				onClick={props.select}
+				onDelete={props.delete}
+				styleClass={d.id === props.store.selected ? "danger" : ""}
+			/>
+		);
+	});
+
+	return (
+		<div className="container">
+			<table className="table table-hover table-striped test-data">
+				<tbody>{rows}</tbody>
+			</table>
+			<span
+				className="preloadicon glyphicon glyphicon-remove"
+				aria-hidden="true"
+			/>
+		</div>
+	);
+}
+
+/** @type {(store: Store, rootDom: HTMLElement) => TableApp} */
+function createTableApp(store, rootDom) {
+	/** @type {() => void} */
+	let rerender;
+
+	const app = {
+		run() {
+			store.run();
+			rerender();
+		},
+		add() {
+			store.add();
+			rerender();
+		},
+		update() {
+			store.update();
+			rerender();
+		},
+		/** @param {number} id */
+		select(id) {
+			store.select(id);
+			rerender();
+		},
+		/** @param {number} id */
+		delete(id) {
+			store.delete(id);
+			rerender();
+		},
+		runLots() {
+			store.runLots();
+			rerender();
+		},
+		clear() {
+			store.clear();
+			rerender();
+		},
+		swapRows() {
+			store.swapRows();
+			rerender();
+		},
+	};
+
+	rerender = () =>
+		preactRender(
+			<Main store={store} select={app.select} delete={app.delete} />,
+			rootDom,
+		);
+	return app;
+}
+
+/** @type {(rootDom: HTMLElement, props?: MainProps ) => TableApp} */
+export function render(rootDom, props) {
+	const store = props?.store ?? new Store();
+	const app = createTableApp(store, rootDom);
+	preactRender(
+		<Main store={store} select={app.select} delete={app.delete} />,
+		rootDom,
+	);
+	return app;
+}
+
+/** @type {(rootDom: HTMLElement, props?: MainProps ) => TableApp} */
+export function hydrate(rootDom, props) {
+	const store = props?.store ?? new Store();
+	const app = createTableApp(store, rootDom);
+	preactHydrate(
+		<Main store={store} select={app.select} delete={app.delete} />,
+		rootDom,
+	);
+	return app;
+}

cli/bin/preact-bench.js

@@ -21,7 +21,7 @@ const IS_CI = process.env.CI === "true";
 const defaultBenchOptions = {
 	interactive: false,
 	dependency: "@latest",
-	impl: "preact-class",
+	impl: "preact",
 	// Tachometer default is 50, but locally let's only do 25
 	"sample-size": !IS_CI ? 25 : 50,
 	// Tachometer default is 10% but let's do 5% to save some GitHub action