feat: move to react from preact

.pnpmfile.cjs

@@ -4,14 +4,8 @@ function switchDependency(pkg, dep, newDep) {
   }
 }
 
-function switchToPreact(pkg, dep) {
-  switchDependency(pkg, dep, 'npm:@preact/compat@17.0.2');
-}
-
 function readPackage(pkg) {
   if (pkg.dependencies) {
-    switchToPreact(pkg, 'react');
-    switchToPreact(pkg, 'react-dom');
     switchDependency(pkg, '@growthbook/growthbook', 'https://gitpkg.now.sh/dailydotdev/growthbook/packages/sdk-js?a0d1a3add257acdbf5353dfd690547feebbada92');
   }
   return pkg

packages/extension/babel.config.js

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const path = require('path');
-const sharedPackage = require('../shared/package.json');
 
 module.exports = {
   presets: [
@@ -30,24 +28,6 @@ module.exports = {
         regenerator: true,
       },
     ],
-    [
-      require.resolve('babel-plugin-module-resolver'),
-      {
-        root: ['.'],
-        alias: {
-          // Required to remove duplicate dependencies from the build
-          ...Object.keys(sharedPackage.peerDependencies).reduce((acc, dep) => {
-            if (['react', 'react-dom'].find((name) => name === dep)) {
-              return {
-                ...acc,
-                [dep]: path.resolve('./node_modules/preact/compat'),
-              };
-            }
-            return { ...acc, [dep]: path.resolve(`./node_modules/${dep}`) };
-          }, {}),
-        },
-      },
-    ],
   ],
   env: {
     production: {

packages/extension/package.json

@@ -31,10 +31,8 @@
     "graphql-request": "^3.6.1",
     "idb-keyval": "^5.1.5",
     "next": "^12.2.2",
-    "preact": "^10.8.2",
-    "preact-render-to-string": "^5.2.0",
-    "react": "npm:@preact/compat@17.0.2",
-    "react-dom": "npm:@preact/compat@17.0.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-intersection-observer": "^8.34.0",
     "react-modal": "^3.15.1",
     "react-query": "3.39.1",
@@ -56,7 +54,7 @@
     "@svgr/cli": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/preact": "^2.0.1",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.2.11",
     "@types/dompurify": "^2.3.1",
@@ -75,7 +73,6 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.3.1",

packages/extension/src/companion/Companion.spec.tsx

@@ -5,7 +5,7 @@ import {
   render,
   RenderResult,
   screen,
-} from '@testing-library/preact';
+} from '@testing-library/react';
 import defaultUser from '@dailydotdev/shared/__tests__/fixture/loggedUser';
 import { UserPostVote } from '@dailydotdev/shared/src/graphql/posts';
 import App from './App';

packages/extension/src/companion/Companion.tsx

@@ -56,7 +56,7 @@ const Container = ({
   return (
     <div
       ref={containerRef}
-      data-testId="companion"
+      data-testid="companion"
       className={classNames(
         'flex fixed flex-row top-[7.5rem] items-stretch right-0 z-10 max-w-[26.5rem]',
         shouldLoad && 'transition-transform',

packages/extension/src/companion/CompanionPermission.spec.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import '@testing-library/jest-dom';
-import { render, RenderResult, screen } from '@testing-library/preact';
+import { render, RenderResult, screen } from '@testing-library/react';
 import { companionExplainerVideo } from '@dailydotdev/shared/src/lib/constants';
 import { EXTENSION_PERMISSION_KEY } from '@dailydotdev/shared/src/hooks';
 import { CompanionPermission } from './CompanionPermission';
 import {
   registerBrowserContentScripts,
   requestContentScripts,
+  getContentScriptPermission,
 } from '../lib/extensionScripts';
 
 let client: QueryClient;
@@ -51,6 +52,7 @@ beforeEach(() => {
   client.setQueryData(EXTENSION_PERMISSION_KEY, () => ({
     requestContentScripts,
     registerBrowserContentScripts,
+    getContentScriptPermission,
   }));
 });
 

packages/extension/src/companion/CompanionPermission.tsx

@@ -15,9 +15,7 @@ const CompanionPermissionComponent = (
   _,
   ref: Ref<HTMLDivElement>,
 ): ReactElement => {
-  const { requestContentScripts } = useExtensionPermission({
-    origin: 'companion permission popup',
-  });
+  const { requestContentScripts } = useExtensionPermission();
   const link = 'Overview Video';
   const button = 'Activate companion';
   const title = 'Try the new companion feature!';
@@ -38,7 +36,11 @@ const CompanionPermissionComponent = (
         </p>
         <Button
           className="mt-1 w-[12.5rem] btn btn-primary"
-          onClick={() => requestContentScripts()}
+          onClick={() =>
+            requestContentScripts({
+              origin: 'companion permission popup',
+            })
+          }
           buttonSize={ButtonSize.Small}
         >
           {button}

packages/extension/src/companion/CompanionPopupButton.tsx

@@ -5,15 +5,11 @@ import SimpleTooltip from '@dailydotdev/shared/src/components/tooltips/SimpleToo
 import CompanionIcon from '@dailydotdev/shared/src/components/icons/App';
 import AnalyticsContext from '@dailydotdev/shared/src/contexts/AnalyticsContext';
 import { ExperimentWinner } from '@dailydotdev/shared/src/lib/featureValues';
-import { useExtensionPermission } from '@dailydotdev/shared/src/hooks';
+import { useContentScriptStatus } from '@dailydotdev/shared/src/hooks';
 import { CompanionPermission } from './CompanionPermission';
 
 export const CompanionPopupButton = (): ReactElement => {
   const { trackEvent } = useContext(AnalyticsContext);
-  const { useContentScriptStatus } = useExtensionPermission({
-    origin: 'companion permission button',
-  });
-
   const { contentScriptGranted, isFetched } = useContentScriptStatus();
   const [showCompanionPermission, setShowCompanionPermission] = useState(false);
 

packages/extension/src/companion/useCompanionSettings.ts

@@ -1,12 +1,14 @@
 import { useContext, useEffect, useRef } from 'react';
 import SettingsContext from '@dailydotdev/shared/src/contexts/SettingsContext';
-import { useExtensionPermission } from '@dailydotdev/shared/src/hooks';
+import {
+  useContentScriptStatus,
+  useExtensionPermission,
+} from '@dailydotdev/shared/src/hooks';
 
-export const useCompanionSettings = (origin: string): void => {
+export const useCompanionSettings = (): void => {
   const isOnLoad = useRef(true);
   const { optOutCompanion, loadedSettings } = useContext(SettingsContext);
-  const { registerBrowserContentScripts, useContentScriptStatus } =
-    useExtensionPermission({ origin });
+  const { registerBrowserContentScripts } = useExtensionPermission();
   const { contentScriptGranted } = useContentScriptStatus();
 
   useEffect(() => {

packages/extension/src/lib/extensionScripts.ts

@@ -1,10 +1,11 @@
 import 'content-scripts-register-polyfill';
 import { browser, ContentScripts } from 'webextension-polyfill-ts';
-import { RequestContentScripts } from '@dailydotdev/shared/src/hooks';
-import { useQuery } from 'react-query';
+import {
+  CreateRequestContentScripts,
+  contentScriptKey,
+} from '@dailydotdev/shared/src/hooks';
 import { companionPermissionGrantedLink } from '@dailydotdev/shared/src/lib/constants';
 import { AnalyticsEvent } from '@dailydotdev/shared/src/lib/analytics';
-import { disabledRefetch } from '@dailydotdev/shared/src/lib/func';
 
 export const registerBrowserContentScripts =
   (): Promise<ContentScripts.RegisteredContentScript> =>
@@ -33,14 +34,17 @@ export const getContentScriptPermissionAndRegister =
     }
   };
 
-const contentScriptKey = 'permission_key';
-
-export const requestContentScripts: RequestContentScripts = (
-  origin,
+export const requestContentScripts: CreateRequestContentScripts = (
   client,
   trackEvent,
 ) => {
-  return async ({ skipRedirect }: { skipRedirect?: boolean } = {}) => {
+  return async ({
+    origin,
+    skipRedirect,
+  }: {
+    origin: string;
+    skipRedirect?: boolean;
+  }) => {
     trackEvent({
       event_name: AnalyticsEvent.RequestContentScripts,
       extra: JSON.stringify({ origin }),
@@ -71,16 +75,3 @@ export const requestContentScripts: RequestContentScripts = (
     return granted;
   };
 };
-
-export const useContentScriptStatus = (): {
-  contentScriptGranted: boolean;
-  isFetched: boolean;
-} => {
-  const { data: contentScriptGranted, isFetched } = useQuery(
-    contentScriptKey,
-    getContentScriptPermission,
-    disabledRefetch,
-  );
-
-  return { contentScriptGranted, isFetched };
-};

packages/extension/src/newtab/App.tsx

@@ -26,6 +26,7 @@ import { useNotificationContext } from '@dailydotdev/shared/src/contexts/Notific
 import { useLazyModal } from '@dailydotdev/shared/src/hooks/useLazyModal';
 import { usePrompt } from '@dailydotdev/shared/src/hooks/usePrompt';
 import { defaultQueryClientConfig } from '@dailydotdev/shared/src/lib/query';
+import { ReactQueryDevtools } from 'react-query/devtools';
 import CustomRouter from '../lib/CustomRouter';
 import { version } from '../../package.json';
 import MainFeedPage from './MainFeedPage';
@@ -34,10 +35,13 @@ import { BootDataProvider } from '../../../shared/src/contexts/BootProvider';
 import {
   getContentScriptPermissionAndRegister,
   requestContentScripts,
-  useContentScriptStatus,
   registerBrowserContentScripts,
+  getContentScriptPermission,
 } from '../lib/extensionScripts';
-import { EXTENSION_PERMISSION_KEY } from '../../../shared/src/hooks';
+import {
+  EXTENSION_PERMISSION_KEY,
+  useContentScriptStatus,
+} from '../../../shared/src/hooks';
 
 const DEFAULT_TAB_TITLE = 'New Tab';
 const router = new CustomRouter();
@@ -70,7 +74,7 @@ function InternalApp({
   useQuery(EXTENSION_PERMISSION_KEY, () => ({
     requestContentScripts,
     registerBrowserContentScripts,
-    useContentScriptStatus,
+    getContentScriptPermission,
   }));
 
   useEffect(() => {
@@ -139,6 +143,7 @@ export default function App({
               </OnboardingContextProvider>
             </SubscriptionContextProvider>
           </BootDataProvider>
+          <ReactQueryDevtools />
         </QueryClientProvider>
       </ProgressiveEnhancementContextProvider>
     </RouterContext.Provider>

packages/extension/src/newtab/MainFeedPage.tsx

@@ -38,7 +38,7 @@ export default function MainFeedPage({
   const [feedName, setFeedName] = useState<string>('default');
   const [searchQuery, setSearchQuery] = useState<string>();
   const [showDnd, setShowDnd] = useState(false);
-  useCompanionSettings('main feed page');
+  useCompanionSettings();
   const { isActive: isDndActive } = useContext(DndContext);
   const enableSearch = () => {
     setIsSearchOn(true);

packages/extension/src/newtab/ShortcutLinks.spec.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import nock from 'nock';
 import { BootDataProvider } from '@dailydotdev/shared/src/contexts/BootProvider';
 import {
+  act,
   fireEvent,
   render,
   RenderResult,
   screen,
   waitForElementToBeRemoved,
-} from '@testing-library/preact';
+} from '@testing-library/react';
 import { mocked } from 'ts-jest/utils';
 import { QueryClient, QueryClientProvider } from 'react-query';
-import { act } from 'preact/test-utils';
 import { mockGraphQL } from '@dailydotdev/shared/__tests__/helpers/graphql';
 import { waitForNock } from '@dailydotdev/shared/__tests__/helpers/utilities';
 import {

packages/extension/webpack.config.js

@@ -80,12 +80,6 @@ module.exports = {
       'webextension-polyfill-ts': path.resolve(
         path.join(__dirname, 'node_modules', 'webextension-polyfill-ts'),
       ),
-      react: path.resolve(
-        path.join(__dirname, 'node_modules', 'preact', 'compat'),
-      ),
-      'react-dom': path.resolve(
-        path.join(__dirname, 'node_modules', 'preact', 'compat'),
-      ),
     },
   },
 

packages/shared/__tests__/helpers/utilities.ts

@@ -1,4 +1,4 @@
-import { waitFor } from '@testing-library/preact';
+import { waitFor } from '@testing-library/react';
 import nock from 'nock';
 
 export const expectNockDone = (): void => expect(nock.isDone()).toBeTruthy();
@@ -12,9 +12,6 @@ export function expectToHaveAttribute(
   value: string | null | undefined,
 ): Promise<void> {
   return waitFor(() => {
-    if (value === 'false') {
-      return expect(el).not.toHaveAttribute(att);
-    }
     return expect(el).toHaveAttribute(att, value);
   });
 }

packages/shared/package.json

@@ -40,8 +40,8 @@
     "@dailydotdev/prettier-config": "*",
     "@dailydotdev/react-contexify": "^5.0.0",
     "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/preact": "^3.2.3",
-    "@testing-library/preact-hooks": "^1.1.0",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/classnames": "^2.2.11",
     "@types/dompurify": "^2.3.1",
@@ -93,8 +93,8 @@
     "postcss-rem-to-responsive-pixel": "^5.1.1",
     "postcss-simple-vars": "^6.0.3",
     "prettier": "^2.4.1",
-    "react": "npm:@preact/compat@17.0.2",
-    "react-dom": "npm:@preact/compat@17.0.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "react-intersection-observer": "^8.32.2",
     "react-modal": "^3.14.3",
     "react-query": "3.39.1",