feat(preact): add support for Preact X (#802)

* feat(preact): add support for Preact X

* Add @francoischalifour as a contributor

* docs(readme): undo formatting

* docs(readme): update GitHub links

.all-contributorsrc

@@ -1093,6 +1093,17 @@
       "contributions": [
         "bug"
       ]
+    },
+    {
+      "login": "francoischalifour",
+      "name": "François Chalifour",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/6137112?v=4",
+      "profile": "https://francoischalifour.com",
+      "contributions": [
+        "code",
+        "test",
+        "platform"
+      ]
     }
   ],
   "repoHost": "https://github.com",

.size-snapshot.json

@@ -1,59 +1,59 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 81604,
-    "minified": 37781,
-    "gzipped": 9518
+    "bundled": 82381,
+    "minified": 38042,
+    "gzipped": 9598
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 80229,
-    "minified": 36680,
-    "gzipped": 9409
+    "bundled": 81090,
+    "minified": 36994,
+    "gzipped": 9498
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 93756,
-    "minified": 32007,
-    "gzipped": 9802
+    "bundled": 93792,
+    "minified": 32003,
+    "gzipped": 9813
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 107788,
-    "minified": 38046,
-    "gzipped": 11345
+    "bundled": 107824,
+    "minified": 38043,
+    "gzipped": 11343
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 98480,
-    "minified": 33358,
-    "gzipped": 10393
+    "bundled": 98431,
+    "minified": 33321,
+    "gzipped": 10377
   },
   "dist/downshift.umd.js": {
-    "bundled": 137033,
-    "minified": 46977,
-    "gzipped": 13981
+    "bundled": 136984,
+    "minified": 46941,
+    "gzipped": 13963
   },
   "dist/downshift.esm.js": {
-    "bundled": 81132,
-    "minified": 37393,
-    "gzipped": 9436,
+    "bundled": 81619,
+    "minified": 37532,
+    "gzipped": 9478,
     "treeshaked": {
       "rollup": {
-        "code": 652,
-        "import_statements": 326
+        "code": 629,
+        "import_statements": 303
       },
       "webpack": {
-        "code": 27445
+        "code": 27541
       }
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 79757,
-    "minified": 36292,
-    "gzipped": 9324,
+    "bundled": 80309,
+    "minified": 36465,
+    "gzipped": 9374,
     "treeshaked": {
       "rollup": {
-        "code": 653,
-        "import_statements": 327
+        "code": 630,
+        "import_statements": 304
       },
       "webpack": {
-        "code": 27454
+        "code": 27584
       }
     }
   }

README.md

@@ -1270,6 +1270,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <td align="center"><a href="https://github.com/kserjey"><img src="https://avatars1.githubusercontent.com/u/19753880?v=4" width="100px;" alt="Sergey Korchinskiy"/><br /><sub><b>Sergey Korchinskiy</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/issues?q=author%3Akserjey" title="Bug reports">🐛</a> <a href="https://github.com/downshift-js/downshift/commits?author=kserjey" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/commits?author=kserjey" title="Tests">⚠️</a></td>
     <td align="center"><a href="https://github.com/edygar"><img src="https://avatars.githubusercontent.com/u/566280?v=3" width="100px;" alt="Edygar Oliveira"/><br /><sub><b>Edygar Oliveira</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=edygar" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/issues?q=author%3Aedygar" title="Bug reports">🐛</a></td>
     <td align="center"><a href="https://github.com/epeicher"><img src="https://avatars1.githubusercontent.com/u/3519124?v=4" width="100px;" alt="epeicher"/><br /><sub><b>epeicher</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/issues?q=author%3Aepeicher" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/francoischalifour"><img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;" alt="François Chalifour"/><br /><sub><b>François Chalifour</b></sub></a><br /><a href="https://github.com/downshift-js/downshift/commits?author=francoischalifour" title="Code">💻</a> <a href="https://github.com/downshift-js/downshift/commits?author=francoischalifour" title="Tests">⚠️</a> <a href="https://github.com/downshift-js/downshift/commits?author=francoischalifour" title="Platform">📦</a></td>
   </tr>
 </table>
 

other/misc-tests/__tests__/preact.js

@@ -18,7 +18,7 @@ for preact before running this test.
  */
 
 import preact from 'preact'
-import render from 'preact-render-to-string'
+import {render} from '@testing-library/preact'
 import Downshift from '../../../preact'
 
 test('works with preact', () => {

package.json

@@ -66,7 +66,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.4.5",
-    "@reach/auto-id": "^0.2.0",
     "compute-scroll-into-view": "^1.0.9",
     "prop-types": "^15.7.2",
     "react-is": "^16.9.0"
@@ -76,6 +75,7 @@
     "@testing-library/jest-dom": "^4.1.2",
     "@testing-library/react-hooks": "^3.1.0",
     "@testing-library/cypress": "^4.1.1",
+    "@testing-library/preact": "^1.0.2",
     "@testing-library/react": "^9.3.0",
     "@types/jest": "^24.0.15",
     "@types/react": "^16.9.2",
@@ -93,8 +93,7 @@
     "flow-coverage-report": "^0.6.0",
     "kcd-scripts": "^1.9.0",
     "npm-run-all": "^4.1.2",
-    "preact": "^8.5.2",
-    "preact-render-to-string": "^4.1.0",
+    "preact": "^10.0.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-native": "^0.60.5",

src/downshift.js

@@ -1,7 +1,7 @@
 /* eslint camelcase:0 */
 
 import PropTypes from 'prop-types'
-import React, {Component} from 'react'
+import {Component, cloneElement} from 'react'
 import {isForwardRef} from 'react-is'
 import {isPreact, isReactNative} from './is.macro'
 import setA11yStatus from './set-a11y-status'
@@ -1194,10 +1194,7 @@ class Downshift extends Component {
     } else if (isDOMElement(element)) {
       // they didn't apply the root props, but we can clone
       // this and apply the props ourselves
-      return React.cloneElement(
-        element,
-        this.getRootProps(getElementProps(element)),
-      )
+      return cloneElement(element, this.getRootProps(getElementProps(element)))
     }
 
     /* istanbul ignore else */

src/hooks/useSelect/README.md

@@ -318,7 +318,7 @@ The item that should be selected.
 
 > `string` | defaults to a generated ID
 
-Used to generate the first part of the `Downshift` id on the elements. Uses [@reach/auto-id][reach-auto-id] by default. You can override this `id` with one of your own, provided as a prop, or you can override the `id` for each element altogether using the props below.
+Used to generate the first part of the `Downshift` id on the elements. Uses the [@reach/auto-id][reach-auto-id] implementation by default. You can override this `id` with one of your own, provided as a prop, or you can override the `id` for each element altogether using the props below.
 
 ### labelId
 
@@ -656,4 +656,4 @@ const ui = (
 [reach-auto-id]: https://github.com/reach/reach-ui/blob/master/packages/auto-id/src/index.js
 [sandbox-example]: https://codesandbox.io/s/53qfj
 [state-change-file]: https://github.com/downshift-js/downshift/blob/master/src/hooks/useSelect/stateChangeTypes.js
-[blog-post-prop-getters]: https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf
+[blog-post-prop-getters]: https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf

src/hooks/useSelect/index.js

@@ -1,13 +1,13 @@
 /* eslint-disable max-statements */
 import {useRef, useEffect} from 'react'
-import {useId} from '@reach/auto-id'
 import {
   getElementIds,
   getItemIndex,
   getPropTypesValidator,
   itemToString as defaultItemToString,
   isAcceptedCharacterKey,
   useEnhancedReducer,
+  useId,
 } from '../utils'
 import setStatus from '../../set-a11y-status'
 import {

src/hooks/useSelect/testUtils.js

@@ -1,8 +1,7 @@
 import React from 'react'
-import {useId} from '@reach/auto-id'
 import {render} from '@testing-library/react'
 import {renderHook} from '@testing-library/react-hooks'
-import {getElementIds, itemToString} from '../utils'
+import {getElementIds, itemToString, useId} from '../utils'
 import useSelect from '.'
 
 const items = [
@@ -34,10 +33,12 @@ const items = [
   'Oganesson',
 ]
 
-jest.mock('@reach/auto-id', () => {
-  return {
-    useId: () => 'test-id',
-  }
+jest.mock('../utils', () => {
+  const module = require.requireActual('../utils')
+
+  module.useId = () => 'test-id'
+
+  return module
 })
 
 const defaultIds = getElementIds(useId)

src/hooks/utils.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import {useState, useEffect, useCallback, useReducer} from 'react'
 
 function getElementIds(
   generateDefaultId,
@@ -115,7 +115,7 @@ function callOnChangeProps(props, state, changes) {
 }
 
 function useEnhancedReducer(reducer, initialState, props) {
-  const enhancedReducer = React.useCallback(
+  const enhancedReducer = useCallback(
     (state, action) => {
       state = getState(state, action.props)
 
@@ -130,11 +130,29 @@ function useEnhancedReducer(reducer, initialState, props) {
     [reducer],
   )
 
-  const [state, dispatch] = React.useReducer(enhancedReducer, initialState)
+  const [state, dispatch] = useReducer(enhancedReducer, initialState)
 
   return [getState(state, props), dispatch]
 }
 
+let lastId = 0
+// istanbul ignore next
+const genId = () => ++lastId
+
+/**
+ * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
+ * Taken from @reach/auto-id
+ * @see https://github.com/reach/reach-ui/blob/6e9dbcf716d5c9a3420e062e5bac1ac4671d01cb/packages/auto-id/src/index.js
+ */
+// istanbul ignore next
+function useId() {
+  const [id, setId] = useState(null)
+
+  useEffect(() => setId(genId()), [])
+
+  return id
+}
+
 export {
   getElementIds,
   getNextWrappingIndex,
@@ -146,4 +164,5 @@ export {
   isAcceptedCharacterKey,
   useEnhancedReducer,
   capitalizeString,
+  useId,
 }

src/utils.js

@@ -186,8 +186,10 @@ function unwrapArray(arg, defaultValue) {
 function isDOMElement(element) {
   /* istanbul ignore if */
   if (isPreact) {
-    // then this is preact
-    return typeof element.nodeName === 'string'
+    // then this is preact or preact X
+    return (
+      typeof element.nodeName === 'string' || typeof element.type === 'string'
+    )
   }
 
   // then we assume this is react
@@ -203,7 +205,7 @@ function getElementProps(element) {
 
   /* istanbul ignore if */
   if (isPreact) {
-    return element.attributes
+    return element.attributes || element.props
   }
 
   return element.props