fix: revert "feat: migrate to preact/compat (#190)" (#219)

This reverts commit 8c98f57.

.aegir.js

@@ -14,7 +14,7 @@ export default {
   dependencyCheck: {
     ignore: [
       // .jsx files aren't checked properly.
-      'preact',
+      'react-dom',
 
       // required by webpack
       'webpack-cli',

package.json

@@ -48,14 +48,16 @@
     "@sgtpooki/file-type": "^1.0.1",
     "debug": "^4.3.4",
     "multiformats": "^13.1.0",
-    "preact": "^10.20.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.3",
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@playwright/test": "^1.42.1",
+    "@types/react": "^18.2.74",
     "aegir": "^42.2.5",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^12.0.2",

src/app.tsx

@@ -1,8 +1,8 @@
-import React, { Suspense } from 'preact/compat'
+import React, { Suspense } from 'react'
 import { RouteContext } from './context/router-context.jsx'
 import './app.css'
 
-function App (): React.JSX.Element {
+function App (): JSX.Element {
   const { currentRoute } = React.useContext(RouteContext)
   return (
     <Suspense fallback={<div>Loading...</div>}>

src/components/Form.tsx

@@ -1,6 +1,6 @@
-import React from 'preact/compat'
+import React from 'react'
 
-export default ({ handleSubmit, requestPath, setRequestPath }): React.JSX.Element => (
+export default ({ handleSubmit, requestPath, setRequestPath }): JSX.Element => (
   <form id='add-file' onSubmit={handleSubmit}>
     <label htmlFor='inputContent' className='f5 ma0 pb2 aqua fw4 db'>CID, Content Path, or URL</label>
     <input
@@ -10,7 +10,7 @@ export default ({ handleSubmit, requestPath, setRequestPath }): React.JSX.Elemen
       type='text'
       placeholder='/ipfs/bafk.../path/to/file'
       required
-      value={requestPath} onChange={(e) => setRequestPath(e.currentTarget.value)}
+      value={requestPath} onChange={(e) => setRequestPath(e.target.value)}
     />
   </form>
 )

src/components/Header.tsx

@@ -1,9 +1,9 @@
-import React from 'preact/compat'
+import React from 'react'
 import { RouteContext } from '../context/router-context.jsx'
 import gearIcon from '../gear-icon.svg'
 import ipfsLogo from '../ipfs-logo.svg'
 
-export default function Header (): React.JSX.Element {
+export default function Header (): JSX.Element {
   const { gotoPage } = React.useContext(RouteContext)
   return (
     <header className='e2e-header flex items-center pa3 bg-navy bb bw3 b--aqua justify-between'>

src/components/collapsible.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'preact/compat'
+import React, { useState } from 'react'
 
 export interface CollapsibleProps {
   children: React.ReactNode
@@ -7,7 +7,7 @@ export interface CollapsibleProps {
   collapsed: boolean
 }
 
-export function Collapsible ({ children, collapsedLabel, expandedLabel, collapsed }: CollapsibleProps): React.JSX.Element {
+export function Collapsible ({ children, collapsedLabel, expandedLabel, collapsed }: CollapsibleProps): JSX.Element {
   const [cId] = useState(Math.random().toString(36).substring(7))
   const [isCollapsed, setCollapsed] = useState(collapsed)
 

src/components/input-validator.tsx

@@ -1,5 +1,5 @@
 import { CID } from 'multiformats/cid'
-import React from 'preact/compat'
+import React from 'react'
 import { nativeProtocolRegex, pathRegex, subdomainRegex, type IpfsUriParts } from '../lib/regex.js'
 
 function FormatHelp (): React.JSX.Element {

src/components/local-storage-input.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'preact/compat'
+import React, { useEffect, useState } from 'react'
 
 export interface LocalStorageInputProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   localStorageKey: string
@@ -16,7 +16,7 @@ const defaultValidationFunction = (value: string): Error | null => {
     return err as Error
   }
 }
-export default ({ localStorageKey, label, placeholder, validationFn, defaultValue, ...props }: LocalStorageInputProps): React.JSX.Element => {
+export default ({ localStorageKey, label, placeholder, validationFn, defaultValue, ...props }: LocalStorageInputProps): JSX.Element => {
   const [value, setValue] = useState(localStorage.getItem(localStorageKey) ?? defaultValue)
   const [error, setError] = useState<null | Error>(null)
 
@@ -47,7 +47,7 @@ export default ({ localStorageKey, label, placeholder, validationFn, defaultValu
         type='text'
         placeholder={placeholder}
         value={value}
-        onChange={(e) => { setValue(e.currentTarget.value) }}
+        onChange={(e) => { setValue(e.target.value) }}
       />
       {error != null && <span style={{ color: 'red' }}>{error.message}</span>}
     </div>

src/components/local-storage-toggle.tsx

@@ -1,7 +1,7 @@
 /**
   Inspiration from https://dev.to/codebubb/create-a-simple-on-off-slide-toggle-with-css-db8
  */
-import React, { useState } from 'preact/compat'
+import React, { useState } from 'react'
 import './local-storage-toggle.css'
 
 interface LocalStorageToggleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -17,7 +17,7 @@ export const LocalStorageToggle: React.FC<LocalStorageToggleProps> = ({ localSto
   })
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    const newValue = event.currentTarget.checked
+    const newValue = event.target.checked
     setIsChecked(newValue)
     localStorage.setItem(localStorageKey, String(newValue))
   }

src/components/sw-ready-button.tsx

@@ -1,13 +1,13 @@
-import React, { useContext, useMemo } from 'preact/compat'
+import React, { useContext, useMemo } from 'react'
 import { ServiceWorkerContext } from '../context/service-worker-context.jsx'
-type ButtonProps = React.JSX.IntrinsicElements['button']
+type ButtonProps = JSX.IntrinsicElements['button']
 
 interface ServiceWorkerReadyButtonProps extends ButtonProps {
   label: string
   waitingLabel?: string
 }
 
-export const ServiceWorkerReadyButton = ({ className, label, waitingLabel, ...props }: ServiceWorkerReadyButtonProps): React.JSX.Element => {
+export const ServiceWorkerReadyButton = ({ className, label, waitingLabel, ...props }: ServiceWorkerReadyButtonProps): JSX.Element => {
   const { isServiceWorkerRegistered } = useContext(ServiceWorkerContext)
 
   const buttonClasses = new Set(['button-reset', 'pv3', 'tc', 'bn', 'white', 'w-100', 'cursor-disabled', 'bg-gray'])

src/context/config-context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'preact/compat'
+import React, { createContext, useState } from 'react'
 import { isConfigPage } from '../lib/is-config-page.js'
 
 const isLoadedInIframe = window.self !== window.top
@@ -8,7 +8,7 @@ export const ConfigContext = createContext({
   setConfigExpanded: (value: boolean) => {}
 })
 
-export const ConfigProvider = ({ children }: { children: React.JSX.Element[] | React.JSX.Element, expanded?: boolean }): React.JSX.Element => {
+export const ConfigProvider = ({ children }: { children: JSX.Element[] | JSX.Element, expanded?: boolean }): JSX.Element => {
   const [isConfigExpanded, setConfigExpanded] = useState(isConfigPage(window.location.hash))
   const isExplicitlyLoadedConfigPage = isConfigPage(window.location.hash)
 

src/context/router-context.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect } from 'preact/compat'
+import React, { useCallback, useEffect } from 'react'
 
 export interface Route {
   default?: boolean
   path?: string
   shouldRender?(): Promise<boolean>
-  component(...args: any[]): React.JSX.Element | null
+  component: React.LazyExoticComponent<(...args: any[]) => React.JSX.Element | null>
 }
 
 export const RouteContext = React.createContext<{
@@ -13,7 +13,7 @@ export const RouteContext = React.createContext<{
   gotoPage(route?: string): void
 }>({ currentRoute: undefined, gotoPage: () => {} })
 
-export const RouterProvider = ({ children, routes }: { children: React.ReactNode, routes: Route[] }): React.JSX.Element => {
+export const RouterProvider = ({ children, routes }: { children: React.ReactNode, routes: Route[] }): JSX.Element => {
   const [currentRoute, setCurrentRoute] = React.useState<Route | undefined>(undefined)
   /**
    * The default route is the first route in the list of routes,

src/context/service-worker-context.tsx

@@ -11,7 +11,7 @@
  * After the service worker is loaded. Usually any react code isn't loaded, but some edge cases are:
  * 1. The page being loaded using some /ip[fn]s/<path> url, but subdomain isolation is supported, so we need to redirect to the isolated origin
  */
-import React, { createContext, useEffect, useState } from 'preact/compat'
+import React, { createContext, useEffect, useState } from 'react'
 import { getRedirectUrl, isDeregisterRequest } from '../lib/deregister-request.js'
 import { uiLogger } from '../lib/logger.js'
 import { findOriginIsolationRedirect } from '../lib/path-or-subdomain.js'

src/index.tsx

@@ -1,16 +1,12 @@
-import 'preact/debug'
-import React, { render } from 'preact/compat'
+import React from 'react'
+import ReactDOMClient from 'react-dom/client'
 import App from './app.jsx'
 import { RouterProvider, type Route } from './context/router-context.jsx'
 
 // SW did not trigger for this request
 const container = document.getElementById('root')
-if (container == null) {
-  /**
-   * Should never happen, but preact types are not perfect
-   */
-  throw new Error('could not find root container')
-}
+
+const root = ReactDOMClient.createRoot(container)
 
 const LazyConfig = React.lazy(async () => import('./pages/config.jsx'))
 const LazyHelperUi = React.lazy(async () => import('./pages/helper-ui.jsx'))
@@ -30,7 +26,7 @@ const routes: Route[] = [
   }
 ]
 
-render(
+root.render(
   <React.StrictMode>
     <RouterProvider routes={routes}>
       <App />

src/pages/config.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'preact/compat'
+import React, { useCallback, useEffect, useState } from 'react'
 import { Collapsible } from '../components/collapsible.jsx'
 import LocalStorageInput from '../components/local-storage-input.jsx'
 import { LocalStorageToggle } from '../components/local-storage-toggle.jsx'

src/pages/helper-ui.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'preact/compat'
+import React, { useState, useEffect } from 'react'
 import Form from '../components/Form.jsx'
 import Header from '../components/Header.jsx'
 import CidRenderer from '../components/input-validator.jsx'

src/pages/redirect-page.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo, useState } from 'preact/compat'
+import React, { useContext, useEffect, useMemo, useState } from 'react'
 import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { ServiceWorkerContext, ServiceWorkerProvider } from '../context/service-worker-context.jsx'
@@ -12,7 +12,7 @@ import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
 const uiComponentLogger = getUiComponentLogger('redirect-page')
 const log = uiLogger.forComponent('redirect-page')
 
-const ConfigIframe = (): React.JSX.Element => {
+const ConfigIframe = (): JSX.Element => {
   const { parentDomain } = getSubdomainParts(window.location.href)
   let iframeSrc
   if (parentDomain == null || parentDomain === window.location.href) {

src/pages/redirects-interstitial.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'preact/compat'
+import React, { useEffect } from 'react'
 import { findOriginIsolationRedirect } from '../lib/path-or-subdomain.js'
 import { translateIpfsRedirectUrl } from '../lib/translate-ipfs-redirect-url.js'
 import RedirectPage from './redirect-page'

test/node.ts

@@ -46,6 +46,7 @@ describe(`verify-dist at ${distRoot}`, () => {
         /ipfs-sw-styles-.*\.css/,
         /ipfs-sw-styles-.*\.js/,
         /ipfs-sw-main-.*\.js/,
+        /ipfs-sw-vendor-react-.*\.js/,
         'id="root"'
       ]
     },

webpack.config.js

@@ -27,9 +27,9 @@ const splitChunks = {
       priority: 100, // anything the sw needs should be in the sw chunk
       chunks: 'async'
     },
-    preactVendor: {
-      test: /[\\/]node_modules[\\/](preact)[\\/]/,
-      name: 'vendor-preact',
+    reactVendor: {
+      test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
+      name: 'vendor-react',
       chunks: 'initial'
     }
   }
@@ -107,11 +107,6 @@ const prod = {
       })
     ],
     splitChunks
-  },
-  externalsType: 'window',
-  externals: {
-    // remove preact debug on production builds
-    'preact/debug': ''
   }
 }