1 files changed, 88 insertions, 0 deletions
diff --git a/preact/demo/profiler.js b/preact/demo/profiler.js
new file mode 100644
index 0000000..bb44269
--- /dev/null
+++ b/preact/demo/profiler.js
@@ -0,0 +1,88 @@
+import { createElement, Component, options } from 'preact';
+
+function getPrimes(max) {
+	let sieve = [],
+		i,
+		j,
+		primes = [];
+	for (i = 2; i <= max; ++i) {
+		if (!sieve[i]) {
+			// i has not been marked -- it is prime
+			primes.push(i);
+			for (j = i << 1; j <= max; j += i) {
+				sieve[j] = true;
+			}
+		}
+	}
+	return primes.join('');
+}
+
+function Foo(props) {
+	return <div>{props.children}</div>;
+}
+
+function Bar() {
+	getPrimes(10000);
+	return (
+		<div>
+			<span>...yet another component</span>
+		</div>
+	);
+}
+
+function PrimeNumber(props) {
+	// Slow down rendering of this component
+	getPrimes(10);
+
+	return (
+		<div>
+			<span>I'm a slow component</span>
+			<br />
+			{props.children}
+		</div>
+	);
+}
+
+export default class ProfilerDemo extends Component {
+	constructor() {
+		super();
+		this.onClick = this.onClick.bind(this);
+		this.state = { counter: 0 };
+	}
+
+	componentDidMount() {
+		options._diff = vnode => (vnode.startTime = performance.now());
+		options.diffed = vnode => (vnode.endTime = performance.now());
+	}
+
+	componentWillUnmount() {
+		delete options._diff;
+		delete options.diffed;
+	}
+
+	onClick() {
+		this.setState(prev => ({ counter: ++prev.counter }));
+	}
+
+	render() {
+		return (
+			<div class="foo">
+				<h1>⚛ Preact</h1>
+				<p>
+					<b>Devtools Profiler integration 🕒</b>
+				</p>
+				<Foo>
+					<PrimeNumber>
+						<Foo>I'm a fast component</Foo>
+						<Bar />
+					</PrimeNumber>
+				</Foo>
+				<Foo>I'm the fastest component 🎉</Foo>
+				<span>Counter: {this.state.counter}</span>
+				<br />
+				<br />
+				<button onClick={this.onClick}>Force re-render</button>
+			</div>
+		);
+	}
+}