From 9dd28ca789ea5dd6669024eb4538575252d7368d Mon Sep 17 00:00:00 2001 From: Marc Cataford Date: Mon, 2 Aug 2021 01:26:24 -0400 Subject: [PATCH] refactor: react to preact (#15) * refactor: react to preact * refactor: replace all refs --- .eslintrc.js | 5 ++++- package.json | 7 +++++-- src/App.tsx | 5 +++-- src/FeedsPanel.tsx | 8 +++---- src/NavigationBar.tsx | 6 ++++-- src/SettingsPanel.tsx | 5 +++-- src/index.tsx | 5 ++--- src/utils/useAppState.ts | 2 +- tsconfig.json | 3 ++- yarn.lock | 45 ++++++++-------------------------------- 10 files changed, 37 insertions(+), 54 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index d30b13e..6e98ef0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,3 +1,6 @@ module.exports = { - extends: '@tophat' + extends: '@tophat', + rules: { + "react/react-in-jsx-scope": "off" + } } diff --git a/package.json b/package.json index b3058aa..bef25b0 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.tsx b/src/App.tsx index af64c09..ccafc67 100644 --- a/src/App.tsx +++ b/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 diff --git a/src/FeedsPanel.tsx b/src/FeedsPanel.tsx index 218ffed..8619631 100644 --- a/src/FeedsPanel.tsx +++ b/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 ( { const { feeds } = props const flattenedItems = sortFeedItemsByDate(feeds) diff --git a/src/NavigationBar.tsx b/src/NavigationBar.tsx index 2eaa132..876795a 100644 --- a/src/NavigationBar.tsx +++ b/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 { const { activePanel, setActivePanel } = props const classes = useStyles() diff --git a/src/SettingsPanel.tsx b/src/SettingsPanel.tsx index bf92bfc..d2f12c5 100644 --- a/src/SettingsPanel.tsx +++ b/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 { const { feedUrls, setFeedUrls } = props const [feedUrlsForm, setFeedUrlsForm] = useState(feedUrls) diff --git a/src/index.tsx b/src/index.tsx index 553edb0..980188b 100644 --- a/src/index.tsx +++ b/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(, document.getElementById('app')) +render(, document.getElementById('app')) diff --git a/src/utils/useAppState.ts b/src/utils/useAppState.ts index 579fe65..ed1194d 100644 --- a/src/utils/useAppState.ts +++ b/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' diff --git a/tsconfig.json b/tsconfig.json index 52fa189..413d0c7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,8 @@ { "compilerOptions": { "target": "es2015", - "jsx": "react", + "jsx": "react-jsx", + "jsxImportSource": "preact", "moduleResolution": "node" }, "include": ["src/**/*"] diff --git a/yarn.lock b/yarn.lock index e767d64..92d81eb 100644 --- a/yarn.lock +++ b/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"