refactor: react to preact (#15)

* refactor: react to preact

* refactor: replace all refs

.eslintrc.js

@@ -1,3 +1,6 @@
 module.exports = {
-    extends: '@tophat'
+    extends: '@tophat',
+    rules: {
+        "react/react-in-jsx-scope": "off"
+    }
 }

package.json

@@ -41,7 +41,10 @@
     "@material-ui/core": "^4.12.1",
     "@material-ui/icons": "^4.11.2",
     "htmlparser2": "^6.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "preact": "^10.5.14"
+  },
+  "alias": {
+    "react": "preact/compat",
+    "react-dom": "preact/compat"
   }
 }

src/App.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect } from 'react'
+import { FunctionComponent } from 'preact'
+import { useEffect } from 'preact/hooks'
 
 import fetchFeeds from './utils/fetchFeeds'
 import NavigationBar from './NavigationBar'
@@ -8,7 +9,7 @@ import { panelIdentifiers } from './constants'
 import { restoreSettings } from './utils/persistence'
 import useAppState from './utils/useAppState'
 
-export default function App(): ReactNode {
+export default function App(): FunctionComponent<> {
     const [state, actions] = useAppState()
     const { setActivePanel, setFeeds, setFeedUrls } = actions
 

src/FeedsPanel.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { FunctionComponent } from 'preact'
 import Box from '@material-ui/core/Box'
 import Typography from '@material-ui/core/Typography'
 import Card from '@material-ui/core/Card'
@@ -26,7 +26,7 @@ const useStyles = makeStyles({
     },
 })
 
-function ItemCard(props: CardProps): ReactNode {
+function ItemCard(props: CardProps) {
     const { title, url, published, feedTitle } = props
     const classes = useStyles()
 
@@ -41,7 +41,7 @@ function ItemCard(props: CardProps): ReactNode {
     )
 }
 
-function NoItemsNotice(): ReactNode {
+function NoItemsNotice() {
     return (
         <Box
             alignSelf="center"
@@ -59,7 +59,7 @@ function NoItemsNotice(): ReactNode {
     )
 }
 
-export default function FeedsPanel(props: Props): ReactNode {
+export default function FeedsPanel(props: Props): FunctionComponent<Props> {
     const { feeds } = props
 
     const flattenedItems = sortFeedItemsByDate(feeds)

src/NavigationBar.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { FunctionComponent } from 'preact'
 import AppBar from '@material-ui/core/AppBar'
 import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
@@ -23,7 +23,9 @@ function getAvailableDestinations(activePanel: string): string[] {
     )
 }
 
-export default function NavigationBar(props: NavigationBarProps): ReactNode {
+export default function NavigationBar(
+    props: NavigationBarProps,
+): FunctionComponent<NavigationBarProps> {
     const { activePanel, setActivePanel } = props
 
     const classes = useStyles()

src/SettingsPanel.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react'
+import { useState } from 'preact/hooks'
+import { FunctionComponent } from 'preact'
 import { makeStyles } from '@material-ui/core/styles'
 import Typography from '@material-ui/core/Typography'
 import Box from '@material-ui/core/Box'
@@ -31,7 +32,7 @@ function isValidUrl(url: string): boolean {
     return urlPattern.test(url)
 }
 
-export default function SettingsPanel(props: Props): ReactNode {
+export default function SettingsPanel(props: Props): FunctionComponent<Props> {
     const { feedUrls, setFeedUrls } = props
     const [feedUrlsForm, setFeedUrlsForm] = useState(feedUrls)
 

src/index.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
+import { render } from 'preact'
 
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('app'))
+render(<App />, document.getElementById('app'))

src/utils/useAppState.ts

@@ -1,4 +1,4 @@
-import { useReducer, useRef } from 'react'
+import { useReducer, useRef } from 'preact/hooks'
 
 import type { State } from '../types'
 import { panelIdentifiers } from '../constants'

tsconfig.json

@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
         "target": "es2015",
-        "jsx": "react",
+        "jsx": "react-jsx",
+        "jsxImportSource": "preact",
         "moduleResolution": "node"
     },
     "include": ["src/**/*"]

yarn.lock

@@ -12105,7 +12105,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -14658,6 +14658,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"preact@npm:^10.5.14":
+  version: 10.5.14
+  resolution: "preact@npm:10.5.14"
+  checksum: d936f83a2afad13aa5870812d7fa8fec111d4a1bb6b0bea6485f2656a062bcc01717398d8184c4bc589cba455f3b2def8e43ba23db846b208d9823e3804658ad
+  languageName: node
+  linkType: hard
+
 "precinct@npm:^8.0.0":
   version: 8.1.0
   resolution: "precinct@npm:8.1.0"
@@ -15101,19 +15108,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react-dom@npm:17.0.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-    scheduler: ^0.20.2
-  peerDependencies:
-    react: 17.0.2
-  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^16.12.0, react-is@npm:^16.7.0, react-is@npm:^16.8.1, react-is@npm:^16.8.4":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -15150,16 +15144,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^17.0.2":
-  version: 17.0.2
-  resolution: "react@npm:17.0.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
-  languageName: node
-  linkType: hard
-
 "read-package-json-fast@npm:^2.0.2":
   version: 2.0.3
   resolution: "read-package-json-fast@npm:2.0.3"
@@ -15756,9 +15740,8 @@ __metadata:
     jest: ^27.0.6
     netlify-cli: ^5.2.3
     parcel: ^2.0.0-beta.2
+    preact: ^10.5.14
     prettier: ^2.3.2
-    react: ^17.0.2
-    react-dom: ^17.0.2
     typescript: ^4.3.5
   languageName: unknown
   linkType: soft
@@ -15843,16 +15826,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.20.2":
-  version: 0.20.2
-  resolution: "scheduler@npm:0.20.2"
-  dependencies:
-    loose-envify: ^1.1.0
-    object-assign: ^4.1.1
-  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
-  languageName: node
-  linkType: hard
-
 "seek-bzip@npm:^1.0.5":
   version: 1.0.6
   resolution: "seek-bzip@npm:1.0.6"