From b04d9cf61874548c23341160174945939644b513 Mon Sep 17 00:00:00 2001
From: Nick McCurdy <nick@nickmccurdy.com>
Date: Thu, 27 Aug 2020 15:10:45 -0400
Subject: [PATCH] Update Preact example to use Preact X hooks

This upgrades Preact from 8 to X while making the example more consistent with the migration docs and the existing React hooks example.
---
 package-lock.json |  6 +++---
 package.json      |  2 +-
 preact.test.js    | 27 +++++++++++++--------------
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5e29d95..52cb002 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6209,9 +6209,9 @@
       "dev": true
     },
     "preact": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-8.4.2.tgz",
-      "integrity": "sha512-TsINETWiisfB6RTk0wh3/mvxbGRvx+ljeBccZ4Z6MPFKgu/KFGyf2Bmw3Z/jlXhL5JlNKY6QAbA9PVyzIy9//A=="
+      "version": "10.4.8",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.8.tgz",
+      "integrity": "sha512-uVLeEAyRsCkUEFhVHlOu17OxcrwC7+hTGZ08kBoLBiGHiZooUZuibQnphgMKftw/rqYntNMyhVCPqQhcyAGHag=="
     },
     "prelude-ls": {
       "version": "1.1.2",
diff --git a/package.json b/package.json
index 313667a..1e1624e 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "jquery": "^3.4.1",
     "knockout": "^3.5.0",
     "mithril": "^2.0.3",
-    "preact": "^8.4.2",
+    "preact": "^10.4.8",
     "react": "^16.8.6",
     "svelte": "^3.6.9",
     "vue": "^2.6.10"
diff --git a/preact.test.js b/preact.test.js
index 1b1d797..0158d49 100644
--- a/preact.test.js
+++ b/preact.test.js
@@ -1,26 +1,25 @@
-/** @jsx Preact.h */
+/** @jsx h */
 import '@testing-library/jest-dom/extend-expect'
-import * as Preact from 'preact'
+import {h, render as preactRender} from 'preact'
+import {useState} from 'preact/hooks'
 import {getQueriesForElement, fireEvent, wait} from '@testing-library/dom'
 
-class Counter extends Preact.Component {
-  state = {count: 0}
-  increment = () => this.setState(({count}) => ({count: count + 1}))
-  render() {
-    return (
-      <div>
-        <button onClick={this.increment}>{this.state.count}</button>
-      </div>
-    )
-  }
+function Counter() {
+  const [count, setCount] = useState(0)
+  const increment = () => setCount(c => c + 1)
+  return (
+    <div>
+      <button onClick={increment}>{count}</button>
+    </div>
+  )
 }
 
 function render(ui) {
   const container = document.createElement('div')
-  Preact.render(ui, container)
+  preactRender(ui, container)
   return {
-    container,
     ...getQueriesForElement(container),
+    container,
   }
 }