refactor: Better align REPL examples for comparison (#1164)

* refactor: Better align REPL examples for comparison

* chore: Additional formatting

* refactor: Switch to pointer events in spiral to support mobile

src/components/controllers/repl-page.jsx

@@ -52,7 +52,7 @@ async function getInitialCode(query) {
 		if (typeof window !== 'undefined' && localStorage.getItem('preact-www-repl-code')) {
 			code = localStorage.getItem('preact-www-repl-code');
 		} else {
-			const slug = 'counter';
+			const slug = 'counter-hooks';
 			if (typeof window !== 'undefined') {
 				route(`/repl?example=${encodeURIComponent(slug)}`, true);
 			}

src/components/controllers/repl/examples/context.txt

@@ -1,4 +1,4 @@
-import { render, createContext } from 'preact';
+import { render, createContext } from 'preact';
 import { useState, useMemo, useContext } from 'preact/hooks';
 
 const CounterContext = createContext(null);
@@ -21,9 +21,7 @@ function App() {
 		setCount(count + 1);
 	}
 
-	const counter = useMemo(() => {
-		return { count, increment };
-	}, [count]);
+	const counter = useMemo(() => ({ count, increment }), [count]);
 
 	return (
 		<CounterContext.Provider value={counter}>

src/components/controllers/repl/examples/counters/counter-hooks.txt

@@ -0,0 +1,16 @@
+import { render } from 'preact';
+import { useState } from 'preact/hooks';
+
+function Counter() {
+	const [count, setCount] = useState(0);
+
+	return (
+		<div class="counter-container">
+			<button onClick={() => setCount(count + 1)}>Increment</button>
+			<input readonly value={count} />
+			<button onClick={() => setCount(count - 1)}>Decrement</button>
+		</div>
+	);
+}
+
+render(<Counter />, document.getElementById('app'));

src/components/controllers/repl/examples/counters/counter-htm.txt

@@ -0,0 +1,17 @@
+import { render } from 'preact';
+import { useState } from 'preact/hooks';
+import { html } from 'htm/preact';
+
+export function Counter() {
+	const [count, setCount] = useState(0);
+
+	return html`
+		<div class="counter-container">
+			<button onClick=${() => setCount(count + 1)}>Increment</button>
+			<input readonly value=${count} />
+			<button onClick=${() => setCount(count - 1)}>Decrement</button>
+		</div>
+	`;
+}
+
+render(<Counter />, document.getElementById('app'));

src/components/controllers/repl/examples/counters/counter-signals.txt

@@ -0,0 +1,16 @@
+import { render } from 'preact';
+import { signal } from '@preact/signals';
+
+const count = signal(0);
+
+function Counter() {
+	return (
+		<div class="counter-container">
+			<button onClick={() => count.value++}>Increment</button>
+			<input readonly value={count} />
+			<button onClick={() => count.value--}>Decrement</button>
+		</div>
+	);
+}
+
+render(<Counter />, document.getElementById('app'));

src/components/controllers/repl/examples/counters/counter.txt

@@ -0,0 +1,21 @@
+import { Component, render } from 'preact';
+
+class Counter extends Component {
+	state = { count: 0 };
+
+	render({}, { count }) {
+		return (
+			<div class="counter-container">
+				<button onClick={() => this.setState({ count: count + 1 })}>
+					Increment
+				</button>
+				<input readonly value={count} />
+				<button onClick={() => this.setState({ count: count - 1 })}>
+					Decrement
+				</button>
+			</div>
+		);
+	}
+}
+
+render(<Counter />, document.getElementById('app'));

src/components/controllers/repl/examples/index.js

@@ -0,0 +1,97 @@
+// Counters
+import simpleCounterExample from './counters/counter.txt?url';
+import simpleCounterHooksExample from './counters/counter-hooks.txt?url';
+import simpleCounterSignalsExample from './counters/counter-signals.txt?url';
+import simpleCounterHTMExample from './counters/counter-htm.txt?url';
+
+// Todo Lists
+import todoExample from './todo-lists/todo-list.txt?url';
+import todoSignalExample from './todo-lists/todo-list-signals.txt?url';
+
+import repoListExample from './github-repo-list.txt?url';
+import contextExample from './context.txt?url';
+import spiralExample from './spiral.txt?url';
+
+export const EXAMPLES = [
+	{
+		group: 'Simple Counters',
+		items: [
+			{
+				name: 'Simple Counter',
+				slug: 'counter',
+				url: simpleCounterExample
+			},
+			{
+				name: 'Simple Counter (Hooks)',
+				slug: 'counter-hooks',
+				url: simpleCounterHooksExample
+			},
+			{
+				name: 'Simple Counter (Signals)',
+				slug: 'counter-signals',
+				url: simpleCounterSignalsExample
+			},
+			{
+				name: 'Simple Counter (HTM)',
+				slug: 'counter-htm',
+				url: simpleCounterHTMExample
+			}
+		]
+	},
+	{
+		group: 'Todo Lists',
+		items: [
+			{
+				name: 'Todo List',
+				slug: 'todo',
+				url: todoExample
+			},
+			{
+				name: 'Todo List (Signals)',
+				slug: 'todo-signals',
+				url: todoSignalExample
+			}
+		]
+	},
+	{
+		name: 'Github Repo List',
+		slug: 'github-repo-list',
+		url: repoListExample
+	},
+	{
+		name: 'Context',
+		slug: 'context',
+		url: contextExample
+	},
+	{
+		group: 'Animation',
+		items: [
+			{
+				name: 'Spiral',
+				slug: 'spiral',
+				url: spiralExample
+			}
+		]
+	}
+];
+
+export function getExample(slug, list = EXAMPLES) {
+	for (let i = 0; i < list.length; i++) {
+		let item = list[i];
+		if (item.group) {
+			let found = getExample(slug, item.items);
+			if (found) return found;
+		} else if (item.slug.toLowerCase() === slug.toLowerCase()) {
+			return item;
+		}
+	}
+}
+
+/**
+ * @param {string} slug
+ */
+export async function fetchExample(slug) {
+	const example = getExample(slug);
+	if (!example) return;
+	return await fetch(example.url).then(r => r.text());
+}

src/components/controllers/repl/examples/spiral.txt

@@ -9,12 +9,12 @@ options.debounceRendering = requestAnimationFrame;
 class Spiral extends Component {
 	state = { x: 0, y: 0, big: false, count: 0 };
 
-	handleMouseMove = e => {
+	handlePointerMove = e => {
 		this.setState({ x: e.pageX, y: e.pageY });
 	};
 
-	handleMouseDownUp = e => {
-		this.setState({ big: e.type === 'mousedown' });
+	handlePointerDownUp = e => {
+		this.setState({ big: e.type === 'pointerdown' });
 	};
 
 	increment = () => {
@@ -31,7 +31,7 @@ class Spiral extends Component {
 		cancelAnimationFrame(this.raf);
 	}
 
-	render(props, { x, y, big, count }) {
+	render({}, { x, y, big, count }) {
 		let max = (COUNT + Math.sin((count / 90) * 2 * Math.PI) * COUNT * 0.5) | 0,
 			dots = [];
 
@@ -47,9 +47,9 @@ class Spiral extends Component {
 		return (
 			<div
 				id="spiral"
-				onMouseMove={this.handleMouseMove}
-				onMouseDown={this.handleMouseDownUp}
-				onMouseUp={this.handleMouseDownUp}
+				onPointerMove={this.handlePointerMove}
+				onPointerDown={this.handlePointerDownUp}
+				onPointerUp={this.handlePointerDownUp}
 			>
 				<Dot x={x} y={y} big={big} label />
 				{dots}
@@ -90,7 +90,6 @@ class Dot extends Component {
 
 render(<Spiral />, document.getElementById('app'));
 
-
 // Add some styles!!
 const style = document.createElement('style');
 document.body.append(style);

src/components/controllers/repl/examples.css → src/components/controllers/repl/examples/style.css

@@ -1,3 +1,15 @@
+.counter-container {
+	input,
+	button {
+		margin: 0.5rem;
+		text-align: center;
+	}
+
+	input {
+		width: 3rem;
+	}
+}
+
 .list-item {
 	padding: 1rem;
 	margin: 1rem;