Upgrade react

package.json

@@ -25,9 +25,9 @@
   },
   "scripts": {
     "clean-dist": "rimraf ./dist",
-    "clean-printable": "rimraf src/content/**/printable.mdx",
+    "clean-printable": "rimraf --glob src/content/**/printable.mdx",
     "preclean": "run-s clean-dist clean-printable",
-    "clean": "rimraf src/content/**/_*.mdx src/**/_*.json repositories/*.json",
+    "clean": "rimraf --glob src/content/**/_*.mdx src/**/_*.json repositories/*.json",
     "start": "npm run clean-dist && webpack serve --config webpack.dev.mjs --env dev --progress --config-node-env development",
     "content": "node src/scripts/build-content-tree.mjs ./src/content ./src/_content.json",
     "bundle-analyze": "run-s clean fetch content && webpack --config webpack.prod.mjs --config-node-env production && run-s printable content && webpack --config webpack.ssg.mjs --config-node-env production --env ssg --profile --json > stats.json && webpack-bundle-analyzer stats.json",
@@ -151,16 +151,15 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.9.0",
-    "@react-spring/web": "^9.7.5",
+    "@react-spring/web": "^10.0.3",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-helmet-async": "^2.0.5",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-helmet-async": "^3.0.0",
     "react-router-dom": "^6.28.0",
-    "react-tiny-popover": "5",
+    "react-tiny-popover": "^8.1.6",
     "react-use": "^17.5.1",
-    "react-visibility-sensor": "^5.0.2",
     "webpack-pwa-manifest": "^4.3.0",
     "workbox-window": "^7.3.0"
   },

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -21,7 +21,7 @@
 
 .copy-button {
   position: absolute;
-  top: 0.32rem;
+  top: 0.6rem;
   right: 0.5rem;
   z-index: 10;
 
@@ -37,15 +37,15 @@
   /* Always visible */
   opacity: 1;
 
-  background-color: #7c3aed;
+  background-color: #175d96;
   color: #e2e8f0;
 
   transition:
     background-color 0.2s,
     transform 0.1s;
 
   &:hover {
-    background-color: #6d28d9;
+    background-color: #2f85d0;
   }
 
   /* Success */

src/components/Configuration/components.js

@@ -1,5 +1,5 @@
 import { isValidElement, Component } from 'react';
-import Popover from 'react-tiny-popover';
+import { Popover } from 'react-tiny-popover';
 import './Configuration.scss';
 import PropTypes from 'prop-types';
 
@@ -78,7 +78,7 @@ export class Details extends Component {
     return (
       <Popover
         isOpen={open}
-        position={['right', 'top']}
+        positions={['right', 'top']}
         padding={0}
         onClickOutside={this.clickOutsideHandler}
         containerClassName={'shadow'}

src/components/Contributors/Contributors.jsx

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
+import { useState, useEffect, useRef } from 'react';
 import SmallIcon from '../../assets/icon-square-small-slack.png';
 import PropTypes from 'prop-types';
 import { contributorsNotFound } from './404.js';
@@ -31,36 +30,43 @@ function Contributor({ contributor, inView }) {
 
 export default function Contributors({ contributors }) {
   const [inView, setInView] = useState(false);
-  const handleInView = (inView) => {
-    if (!inView) {
-      return;
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0 }
+    );
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
     }
-    setInView(inView);
-  };
+
+    return () => observer.disconnect();
+  }, []);
+
   if (!contributors.length) {
     return <noscript />;
   }
 
   return (
-    <VisibilitySensor
-      delayedCall
-      partialVisibility
-      intervalDelay={300}
-      onChange={handleInView}
-    >
-      <div>
-        <div className="grid gap-[10px] lg:gap-[15px] grid-cols-contributors">
-          {contributors
-            .filter((c) => contributorsNotFound.includes(c) === false)
-            .map((contributor) => (
-              <Contributor
-                key={contributor}
-                contributor={contributor}
-                inView={inView}
-              />
-            ))}
-        </div>
+    <div ref={containerRef}>
+      <div className="grid gap-[10px] lg:gap-[15px] grid-cols-contributors">
+        {contributors
+          .filter((c) => contributorsNotFound.includes(c) === false)
+          .map((contributor) => (
+            <Contributor
+              key={contributor}
+              contributor={contributor}
+              inView={inView}
+            />
+          ))}
       </div>
-    </VisibilitySensor>
+    </div>
   );
 }

src/components/SidebarItem/SidebarItem.jsx

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { useState, useEffect } from 'react';
 import './SidebarItem.scss';
 import list2Tree from '../../utilities/list2Tree';
 import ChevronRightIcon from '../../styles/icons/chevron-right.svg';
@@ -8,18 +8,23 @@ import { NavLink } from 'react-router-dom';
 
 const block = 'sidebar-item';
 
-export default class SidebarItem extends Component {
-  static propTypes = {
-    title: PropTypes.string,
-    anchors: PropTypes.array,
-    url: PropTypes.string,
-    currentPage: PropTypes.string,
-  };
-  state = {
-    open: this._isOpen(this.props),
-  };
+/**
+ * Checks whether the item should be expanded
+ *
+ * @param {object} props - The current props
+ */
+function _isOpen(props) {
+  return RegExp(`${props.currentPage}/?$`).test(props.url);
+}
+
+export default function SidebarItem({ title, anchors = [], url, currentPage }) {
+  const [open, setOpen] = useState(() => _isOpen({ currentPage, url }));
+
+  useEffect(() => {
+    setOpen(_isOpen({ currentPage, url }));
+  }, [currentPage, url]);
 
-  scrollTop(event) {
+  function scrollTop(event) {
     // there're two cases
     // 1. location.pathname or location.hash changes which will be handled by useEffect in Page.jsx
     // 2. location.pathname and location.hash doesn't change at all
@@ -33,103 +38,85 @@ export default class SidebarItem extends Component {
     }
   }
 
-  renderAnchors(anchors) {
+  /**
+   * Toggles the open state (expanded/collapsed)
+   *
+   * @param {object} e - Click event
+   */
+  function _toggle() {
+    setOpen(!open);
+  }
+
+  /**
+   * Generate the url for the given [anchor] depending on the current page
+   *
+   * @param {object} anchor - The anchor object containing its id
+   * @returns {string}
+   */
+  function _generateAnchorURL(anchor) {
+    return anchor.id ? `${url}#${anchor.id}` : url;
+  }
+
+  function renderAnchors(anchors) {
     return (
       <ul className={`${block}__anchors`}>
         {anchors.map((anchor) => (
           <li
-            key={this._generateAnchorURL(anchor)}
+            key={_generateAnchorURL(anchor)}
             className={`${block}__anchor`}
             title={anchor.title}
           >
-            <NavLink to={this._generateAnchorURL(anchor)}>
-              {anchor.title2}
-            </NavLink>
-            {anchor.children && this.renderAnchors(anchor.children)}
+            <NavLink to={_generateAnchorURL(anchor)}>{anchor.title2}</NavLink>
+            {anchor.children && renderAnchors(anchor.children)}
           </li>
         ))}
       </ul>
     );
   }
 
-  render() {
-    let { title, anchors = [] } = this.props;
-    let openMod = this.state.open ? `${block}--open` : '';
-    let disabledMod = anchors.length === 0 ? `${block}--disabled` : '';
-
-    const filteredAnchors = anchors.filter((anchor) => anchor.level > 1);
-    const tree = list2Tree(title, filteredAnchors);
+  const openMod = open ? `${block}--open` : '';
+  const disabledMod = anchors.length === 0 ? `${block}--disabled` : '';
 
-    return (
-      <div className={`${block} ${openMod} ${disabledMod}`}>
-        {anchors.length > 0 ? (
-          <ChevronRightIcon
-            width={15}
-            height={17}
-            fill="#175d96"
-            className={`${block}__toggle`}
-            onClick={this._toggle.bind(this)}
-          />
-        ) : (
-          <BarIcon
-            className={`${block}__toggle`}
-            width={15}
-            height={17}
-            fill="#175d96"
-          />
-        )}
+  const filteredAnchors = anchors.filter((anchor) => anchor.level > 1);
+  const tree = list2Tree(title, filteredAnchors);
 
-        <NavLink
-          end
-          key={this.props.url}
-          className={`${block}__title`}
-          to={this.props.url}
-          onClick={this.scrollTop}
-        >
-          {title}
-        </NavLink>
+  return (
+    <div className={`${block} ${openMod} ${disabledMod}`}>
+      {anchors.length > 0 ? (
+        <ChevronRightIcon
+          width={15}
+          height={17}
+          fill="#175d96"
+          className={`${block}__toggle`}
+          onClick={_toggle}
+        />
+      ) : (
+        <BarIcon
+          className={`${block}__toggle`}
+          width={15}
+          height={17}
+          fill="#175d96"
+        />
+      )}
 
-        {anchors.length > 0 ? this.renderAnchors(tree) : null}
-      </div>
-    );
-  }
+      <NavLink
+        end
+        key={url}
+        className={`${block}__title`}
+        to={url}
+        onClick={scrollTop}
+      >
+        {title}
+      </NavLink>
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.currentPage !== this.props.currentPage) {
-      this.setState({
-        open: this._isOpen(nextProps),
-      });
-    }
-  }
-
-  /**
-   * Checks whether the item should be expanded
-   *
-   * @param {object} props - The current props
-   */
-  _isOpen(props) {
-    return RegExp(`${props.currentPage}/?$`).test(props.url);
-  }
-
-  /**
-   * Toggles the open state (expanded/collapsed)
-   *
-   * @param {object} e - Click event
-   */
-  _toggle() {
-    this.setState({
-      open: !this.state.open,
-    });
-  }
-
-  /**
-   * Generate the url for the given [anchor] depending on the current page
-   *
-   * @param {object} anchor - The anchor object containing its id
-   * @returns {string}
-   */
-  _generateAnchorURL(anchor) {
-    let { url } = this.props;
-    return anchor.id ? `${url}#${anchor.id}` : url;
-  }
+      {anchors.length > 0 ? renderAnchors(tree) : null}
+    </div>
+  );
 }
+
+SidebarItem.propTypes = {
+  title: PropTypes.string,
+  anchors: PropTypes.array,
+  url: PropTypes.string,
+  currentPage: PropTypes.string,
+};