refactor: upgrade react version

package.json

@@ -1,9 +1,9 @@
 {
-  "name": "hypercrx",
+  "name": "HyperCRX",
   "version": "1.9.8",
   "type": "module",
   "private": true,
-  "description": "Hypertrons Chromium Extension",
+  "description": "Hypertrons Chromium Extension for GitHub",
   "license": "Apache",
   "engines": {
     "node": ">=16.14"
@@ -19,29 +19,42 @@
     "update-version": "node scripts/bump-version.cjs"
   },
   "dependencies": {
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design/icons": "^5.4.0",
+    "@ant-design/pro-chat": "^1.9.0",
+    "@ant-design/pro-editor": "^1.3.0",
     "@hot-loader/react-dom": "^17.0.2",
     "@types/chrome": "^0.0.203",
-    "antd": "^5.9.1",
+    "@types/dompurify": "^3.0.5",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "antd": "^5.20.6",
+    "antd-style": "^3.6.1",
     "buffer": "^6.0.3",
+    "color": "^4.2.3",
     "colorthief": "^2.4.0",
+    "copy-to-clipboard": "^3.3.3",
     "delay": "^5.0.0",
     "dom-loaded": "^3.0.0",
+    "dompurify": "^3.1.6",
     "echarts": "^5.3.0",
     "element-ready": "^6.2.1",
     "github-url-detection": "^8.1.0",
+    "highlight.js": "^11.10.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
     "i18next-http-backend": "^2.5.2",
     "jquery": "^3.6.0",
+    "langchain": "^0.2.12",
     "lodash-es": "^4.17.21",
+    "lottie-react": "^2.4.0",
     "moment": "^2.30.1",
-    "react": "^17.0.2",
+    "openai": "^4.60.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-chat-widget": "^3.1.4",
-    "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
     "react-i18next": "^14.1.2",
     "react-modal": "3.15.1",
+    "stream": "^0.0.3",
     "strip-indent": "^4.0.0"
   },
   "devDependencies": {
@@ -50,12 +63,13 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@plasmohq/edge-addons-api": "^1.0.1",
+    "@types/color": "^3.0.6",
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/jest": "^27.4.0",
     "@types/jquery": "^3.5.13",
     "@types/lodash-es": "^4.17.8",
-    "@types/react": "^17.0.39",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-modal": "^3.13.1",
     "babel-loader": "^8.2.3",
     "chrome-webstore-upload": "^1.0.0",
@@ -87,7 +101,7 @@
     "webpack-dev-server": "^4.3.1"
   },
   "resolutions": {
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2"
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0"
   }
 }

src/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifest_version": 3,
-  "name": "Hypercrx",
+  "name": "HyperCRX",
   "options_page": "options.html",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
@@ -27,6 +27,6 @@
   "permissions": ["storage", "notifications", "alarms", "cookies"],
   "host_permissions": ["*://github.com/*"],
   "content_security_policy": {
-    "extension_pages": "script-src 'self'; object-src 'self'"
+    "extension_pages": "script-src 'self'; object-src 'self';"
   }
 }

src/pages/ContentScripts/components/NativePopover.tsx

@@ -1,8 +1,8 @@
 import React, { PropsWithChildren, useEffect } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { createRoot, Root } from 'react-dom/client';
 import elementReady from 'element-ready';
 import $ from 'jquery';
-
+let root: Root | null = null;
 interface NativePopoverProps extends PropsWithChildren<any> {
   anchor: JQuery<HTMLElement>;
   width: number;
@@ -34,16 +34,21 @@ export const NativePopover = ({ anchor, width, arrowPosition, children }: Native
           $popoverContainer.css('top', `${top + anchorHeight + 10}px`);
           $popoverContainer.css('left', `${left - (width - anchorWidth) / 2}px`);
           $popoverContent.attr('class', `Popover-message Box color-shadow-large Popover-message--${arrowPosition}`);
-          render(children, $popoverContent[0]);
+          if (root == null) {
+            root = createRoot($popoverContent[0]);
+          }
+
+          root.render(children);
           $popoverContainer.css('display', 'block');
         }, 1000);
       };
 
       const hidePopover = () => {
         popoverTimer && clearTimeout(popoverTimer);
         $popoverContent.addClass('Popover-message--large');
-        if ($popoverContent.children().length > 0) {
-          unmountComponentAtNode($popoverContent[0]);
+        if (root) {
+          root.unmount();
+          root = null;
         }
         $popoverContainer.css('display', 'none');
       };

src/pages/ContentScripts/features/developer-activity-openrank-trends/index.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { render, Container } from 'react-dom';
 import $ from 'jquery';
 
 import features from '../../../../feature-manager';
 import { getDeveloperName, isDeveloperWithMeta } from '../../../../helpers/get-developer-info';
 import { getActivity, getOpenrank } from '../../../../api/developer';
 import { UserMeta, metaStore } from '../../../../api/common';
 import View from './view';
-
+import { createRoot } from 'react-dom/client';
 const featureId = features.getFeatureID(import.meta.url);
 let developerName: string;
 let activity: any;
@@ -20,8 +19,8 @@ const getData = async () => {
   meta = (await metaStore.get(developerName)) as UserMeta;
 };
 
-const renderTo = (container: Container) => {
-  render(<View activity={activity} openrank={openrank} meta={meta} />, container);
+const renderTo = (container: any) => {
+  createRoot(container).render(<View activity={activity} openrank={openrank} meta={meta} />);
 };
 
 const init = async (): Promise<void> => {

src/pages/ContentScripts/features/developer-hovercard-info/index.tsx

@@ -2,9 +2,8 @@ import features from '../../../../feature-manager';
 import { getOpenrank } from '../../../../api/developer';
 import elementReady from 'element-ready';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import View from './view';
-
+import { createRoot } from 'react-dom/client';
 const featureId = features.getFeatureID(import.meta.url);
 let isInitialized = false;
 
@@ -39,7 +38,7 @@ const getDeveloperName = (target: HTMLElement): string | null => {
 const renderTo = (container: HTMLElement, developerName: string, openrank: string) => {
   const openRankContainer = document.createElement('div');
   container.appendChild(openRankContainer);
-  ReactDOM.render(<View developerName={developerName} openrank={openrank} />, openRankContainer);
+  createRoot(openRankContainer).render(<View developerName={developerName} openrank={openrank} />);
 };
 
 const elementReadyWithTimeout = async (selector: string, options: { stopOnDomReady: boolean }, timeout: number) => {

src/pages/ContentScripts/features/developer-networks/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, Container } from 'react-dom';
 import $ from 'jquery';
-
+import { createRoot } from 'react-dom/client';
 import elementReady from 'element-ready';
 
 import features from '../../../../feature-manager';
@@ -12,8 +11,8 @@ const featureId = features.getFeatureID(import.meta.url);
 
 let userID: any;
 
-const renderTo = (container: Container) => {
-  render(<View userID={userID} />, container);
+const renderTo = (container: any) => {
+  createRoot(container).render(<View userID={userID} />);
 };
 
 const init = async (): Promise<void> => {

src/pages/ContentScripts/features/oss-gpt/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, Container } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import $ from 'jquery';
 
 import features from '../../../../feature-manager';
@@ -42,14 +42,13 @@ const getCurrentDocsName = (repoName: string): string | null => {
   return result;
 };
 
-const renderTo = (container: Container) => {
-  render(
+const renderTo = (container: any) => {
+  createRoot(container).render(
     <View
       theme={getGithubTheme() as 'light' | 'dark'}
       currentRepo={repoName}
       currentDocsName={getCurrentDocsName(repoName)}
-    />,
-    container
+    />
   );
 };
 

src/pages/ContentScripts/features/perceptor-layout/index.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import $ from 'jquery';
 import elementReady from 'element-ready';
-import { render, Container } from 'react-dom';
-
+import { createRoot } from 'react-dom/client';
 import features from '../../../../feature-manager';
 import isPerceptor from '../../../../helpers/is-perceptor';
 import View from './view';
 
 const featureId = features.getFeatureID(import.meta.url);
 
-const renderTo = (container: Container) => {
-  render(<View />, container);
+const renderTo = (container: any) => {
+  createRoot(container).render(<View />);
 };
 
 const init = async (): Promise<void> => {

src/pages/ContentScripts/features/repo-activity-openrank-trends/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { render, Container } from 'react-dom';
 import $ from 'jquery';
-
+import { createRoot } from 'react-dom/client';
 import features from '../../../../feature-manager';
 import { getRepoName, isPublicRepoWithMeta, isRepoRoot } from '../../../../helpers/get-repo-info';
 import { getActivity, getOpenrank } from '../../../../api/repo';
@@ -20,8 +19,8 @@ const getData = async () => {
   meta = (await metaStore.get(repoName)) as RepoMeta;
 };
 
-const renderTo = (container: Container) => {
-  render(<View repoName={repoName} activity={activity} openrank={openrank} meta={meta} />, container);
+const renderTo = (container: any) => {
+  createRoot(container).render(<View repoName={repoName} activity={activity} openrank={openrank} meta={meta} />);
 };
 
 const init = async (): Promise<void> => {

src/pages/ContentScripts/features/repo-activity-racing-bar/index.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import { render, Container } from 'react-dom';
 import $ from 'jquery';
-
 import features from '../../../../feature-manager';
 import isPerceptor from '../../../../helpers/is-perceptor';
 import { getRepoName, isPublicRepoWithMeta } from '../../../../helpers/get-repo-info';
 import { getActivityDetails } from '../../../../api/repo';
 import View from './view';
 import DataNotFound from '../repo-networks/DataNotFound';
 import { RepoActivityDetails } from './data';
-
+import { createRoot } from 'react-dom/client';
 const featureId = features.getFeatureID(import.meta.url);
 let repoName: string;
 let repoActivityDetails: RepoActivityDetails;
@@ -18,12 +16,13 @@ const getData = async () => {
   repoActivityDetails = await getActivityDetails(repoName);
 };
 
-const renderTo = (container: Container) => {
+const renderTo = (container: any) => {
+  const root = createRoot(container);
   if (!repoActivityDetails) {
-    render(<DataNotFound />, container);
+    root.render(<DataNotFound />);
     return;
   }
-  render(<View currentRepo={repoName} repoActivityDetails={repoActivityDetails} />, container);
+  root.render(<View currentRepo={repoName} repoActivityDetails={repoActivityDetails} />);
 };
 
 const init = async (): Promise<void> => {

src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
-import { min } from 'lodash-es';
 import { getInterval, judgeInterval } from '../../../../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',

src/pages/ContentScripts/features/repo-fork-tooltip/index.tsx

@@ -7,7 +7,7 @@ import { getForks } from '../../../../api/repo';
 import { RepoMeta, metaStore } from '../../../../api/common';
 
 import React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import $ from 'jquery';
 
 const featureId = features.getFeatureID(import.meta.url);
@@ -28,11 +28,10 @@ const init = async (): Promise<void> => {
   await elementReady(forkButtonSelector);
   const $forkButton = $(forkButtonSelector);
   const placeholderElement = $('<div class="NativePopover" />').appendTo('body')[0];
-  render(
+  createRoot(placeholderElement).render(
     <NativePopover anchor={$forkButton} width={280} arrowPosition="top-middle">
       <View forks={forks} meta={meta} />
-    </NativePopover>,
-    placeholderElement
+    </NativePopover>
   );
 };
 

src/pages/ContentScripts/features/repo-header-labels/index.tsx

@@ -9,8 +9,8 @@ import { getRepoName, hasRepoContainerHeader, isPublicRepoWithMeta } from '../..
 import { getActivity, getOpenrank, getParticipant, getContributor } from '../../../../api/repo';
 import { RepoMeta, metaStore } from '../../../../api/common';
 import React from 'react';
-import { render, Container } from 'react-dom';
 import $ from 'jquery';
+import { createRoot } from 'react-dom/client';
 
 const featureId = features.getFeatureID(import.meta.url);
 let repoName: string;
@@ -28,13 +28,23 @@ const getData = async () => {
   meta = (await metaStore.get(repoName)) as RepoMeta;
 };
 
-const renderTo = (container: Container) => {
-  render(
-    <View activity={activity} openrank={openrank} participant={participant} contributor={contributor} meta={meta} />,
-    container
+const renderTo = (container: any) => {
+  createRoot(container).render(
+    <View activity={activity} openrank={openrank} participant={participant} contributor={contributor} meta={meta} />
   );
 };
-
+const waitForElement = (selector: string) => {
+  return new Promise((resolve) => {
+    const observer = new MutationObserver(() => {
+      const element = document.querySelector(selector);
+      if (element) {
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+};
 const init = async (): Promise<void> => {
   repoName = getRepoName();
   await getData();
@@ -44,13 +54,11 @@ const init = async (): Promise<void> => {
   renderTo(container);
   await elementReady('#repository-container-header');
   $('#repository-container-header').find('span.Label').after(container);
-
-  await elementReady('#activity-header-label');
-  await elementReady('#OpenRank-header-label');
-  await elementReady('#participant-header-label');
+  await waitForElement('#activity-header-label');
+  await waitForElement('#OpenRank-header-label');
+  await waitForElement('#participant-header-label');
   const placeholderElement = $('<div class="NativePopover" />').appendTo('body')[0];
-
-  render(
+  createRoot(placeholderElement).render(
     <>
       <NativePopover anchor={$('#activity-header-label')} width={280} arrowPosition="top-middle">
         <ActivityView activity={activity} meta={meta} />
@@ -61,8 +69,7 @@ const init = async (): Promise<void> => {
       <NativePopover anchor={$('#participant-header-label')} width={280} arrowPosition="top-middle">
         <ParticipantView participant={participant} contributor={contributor} meta={meta} />
       </NativePopover>
-    </>,
-    placeholderElement
+    </>
   );
 };