React v18: WiP

package.json

@@ -4,30 +4,28 @@
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
     "@loadable/component": "^5.16.4",
     "@loadable/server": "^5.16.5",
-    "@mapbox/polyline": "^1.1.1",
+    "@mapbox/polyline": "^1.2.1",
     "@sentry/browser": "^8.26.0",
     "@sentry/node": "^8.26.0",
     "autosize": "^5.0.1",
     "basic-auth": "^2.0.1",
-    "body-parser": "^1.20.2",
+    "body-parser": "^1.20.3",
     "classnames": "^2.5.1",
-    "compression": "^1.7.4",
-    "cookie-parser": "^1.4.6",
-    "core-js": "^3.22.5",
+    "compression": "^1.7.5",
+    "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",
     "decimal.js": "^10.4.3",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
-    "express": "^4.19.2",
+    "express": "^4.21.1",
     "express-enforces-ssl": "^1.1.0",
-    "final-form": "4.20.7",
-    "final-form-arrays": "3.0.2",
+    "final-form": "4.20.10",
+    "final-form-arrays": "3.1.0",
     "full-icu": "^1.4.0",
-    "helmet": "^7.1.0",
-    "jose": "5.2.0",
+    "helmet": "^8.0.0",
+    "jose": "5.9.6",
     "lodash": "^4.17.21",
     "mapbox-gl-multitouch": "^1.0.3",
     "moment": "^2.30.1",
@@ -36,47 +34,45 @@
     "passport-facebook": "^3.0.0",
     "passport-google-oauth": "^2.0.0",
     "patch-package": "^8.0.0",
-    "path-to-regexp": "^6.2.1",
+    "path-to-regexp": "^8.2.0",
     "postinstall-postinstall": "^2.1.0",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.1",
-    "raf": "^3.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "query-string": "^7.1.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-final-form": "6.5.9",
-    "react-final-form-arrays": "3.1.3",
-    "react-helmet-async": "^1.3.0",
-    "react-image-gallery": "1.2.8",
-    "react-intl": "^5.25.1",
+    "react-final-form-arrays": "3.1.4",
+    "react-helmet-async": "^2.0.5",
+    "react-image-gallery": "1.3.0",
+    "react-intl": "6.8.4",
     "react-moment-proptypes": "^1.8.1",
-    "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.2",
-    "react-with-direction": "^1.4.0",
-    "redux": "^4.2.0",
-    "redux-thunk": "^2.4.1",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^5.3.4",
+    "redux": "^4.2.1",
+    "redux-thunk": "^2.4.2",
     "rehype-react": "^6.2.1",
     "rehype-sanitize": "^4.0.0",
     "remark-parse": "^9.0.0",
     "remark-rehype": "^8.1.0",
     "seedrandom": "^3.0.5",
     "sharetribe-flex-sdk": "^1.21.1",
-    "sharetribe-scripts": "6.0.2",
-    "sitemap": "^7.1.1",
+    "sharetribe-scripts": "7.0.0",
+    "sitemap": "^8.0.0",
     "smoothscroll-polyfill": "^0.4.0",
     "source-map-support": "^0.5.21",
-    "unified": "^9.2.2",
-    "url": "^0.11.0"
+    "unified": "^9.2.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "bfj": "^7.0.2",
+    "bfj": "^9.1.1",
     "chalk": "^v4.1.2",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "inquirer": "^8.2.4",
-    "nodemon": "^3.1.4",
+    "inquirer": "^8.2.6",
+    "nodemon": "^3.1.7",
     "prettier": "^1.18.2"
   },
   "resolutions": {

patches/final-form+4.20.7.patch → patches/final-form+4.20.10.patch

@@ -1,23 +1,22 @@
 diff --git a/node_modules/final-form/dist/final-form.es.js b/node_modules/final-form/dist/final-form.es.js
-index a1fa14f..72011ef 100644
+index e31d7f3..0757644 100644
 --- a/node_modules/final-form/dist/final-form.es.js
 +++ b/node_modules/final-form/dist/final-form.es.js
-@@ -1,6 +1,17 @@
+@@ -1,6 +1,16 @@
 -import _extends from '@babel/runtime/helpers/esm/extends';
  import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 
 +const _extends = function (target) {
 +  for (var i = 1; i < arguments.length; i++) {
 +    var source = arguments[i];
 +    for (var key in source) {
-+     if (Object.prototype.hasOwnProperty.call(source, key)) {
-+       target[key] = source[key];
-+     }
-+   }
++      if (Object.prototype.hasOwnProperty.call(source, key)) {
++        target[key] = source[key];
++      }
++    }
 +  }
 +  return target;
-+};
-+
++}
  //      
+
  var charCodeOfDot = ".".charCodeAt(0);
- var reEscapeChar = /\\(\\)?/g;

server/csp.js

@@ -159,7 +159,7 @@ exports.csp = (reportUri, reportOnly) => {
   // https://github.com/helmetjs/helmet/blob/bdb09348c17c78698b0c94f0f6cc6b3968cd43f9/middlewares/content-security-policy/index.ts#L51
 
   const directives = Object.assign({ reportUri: [reportUri] }, defaultDirectives, customDirectives);
-  if (!reportOnly) {
+  if (!reportOnly && !dev) {
     directives.upgradeInsecureRequests = [];
   }
 

server/dataLoader.js

@@ -1,5 +1,6 @@
-const url = require('url');
+const { URL } = require('node:url');
 const log = require('./log');
+const { getRootURL } = require('./api-util/rootURL');
 
 const PREVENT_DATA_LOADING_IN_SSR = process.env.PREVENT_DATA_LOADING_IN_SSR === 'true';
 
@@ -19,7 +20,7 @@ exports.loadData = function(requestUrl, sdk, appInfo) {
     mergeConfig,
     fetchAppAssets,
   } = appInfo;
-  const { pathname, query } = url.parse(requestUrl);
+  const { pathname, search } = new URL(`${getRootURL()}${requestUrl}`);
 
   let translations = {};
   let hostedConfig = {};
@@ -43,7 +44,7 @@ exports.loadData = function(requestUrl, sdk, appInfo) {
     return matchedRoutes.reduce((calls, match) => {
       const { route, params } = match;
       if (typeof route.loadData === 'function' && !route.auth) {
-        calls.push(store.dispatch(route.loadData(params, query, config)));
+        calls.push(store.dispatch(route.loadData(params, search, config)));
       }
       return calls;
     }, []);

server/index.js

@@ -192,7 +192,7 @@ const noCacheHeaders = {
   'Cache-control': 'no-cache, no-store, must-revalidate',
 };
 
-app.get('*', (req, res) => {
+app.get('*', async (req, res) => {
   if (req.url.startsWith('/static/')) {
     // The express.static middleware only handles static resources
     // that it finds, otherwise passes them through. However, we don't
@@ -226,8 +226,9 @@ app.get('*', (req, res) => {
     .loadData(req.url, sdk, appInfo)
     .then(data => {
       const cspNonce = cspEnabled ? res.locals.cspNonce : null;
-      const html = renderer.render(req.url, context, data, renderApp, webExtractor, cspNonce);
-
+      return renderer.render(req.url, context, data, renderApp, webExtractor, cspNonce);
+    })
+    .then(html => {
       if (dev) {
         const debugData = {
           url: req.url,

server/renderer.js

@@ -97,44 +97,44 @@ exports.render = function(requestUrl, context, data, renderApp, webExtractor, no
   const collectWebChunks = webExtractor.collectChunks.bind(webExtractor);
 
   // Render the app with given route, preloaded state, hosted translations.
-  const { head, body } = renderApp(
+  return renderApp(
     requestUrl,
     context,
     preloadedState,
     translations,
     hostedConfig,
     collectWebChunks
-  );
+  ).then(({ head, body }) => {
+    // Preloaded state needs to be passed for client side too.
+    // For security reasons we ensure that preloaded state is considered as a string
+    // by replacing '<' character with its unicode equivalent.
+    // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
+    const serializedState = JSON.stringify(preloadedState, replacer).replace(/</g, '\\u003c');
 
-  // Preloaded state needs to be passed for client side too.
-  // For security reasons we ensure that preloaded state is considered as a string
-  // by replacing '<' character with its unicode equivalent.
-  // http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
-  const serializedState = JSON.stringify(preloadedState, replacer).replace(/</g, '\\u003c');
+    // At this point the serializedState is a string, the second
+    // JSON.stringify wraps it within double quotes and escapes the
+    // contents properly so the value can be injected in the script tag
+    // as a string.
+    const nonceMaybe = nonce ? `nonce="${nonce}"` : '';
+    const preloadedStateScript = `
+        <script ${nonceMaybe}>window.__PRELOADED_STATE__ = ${JSON.stringify(
+      serializedState
+    )};</script>
+    `;
+    // Add nonce to server-side rendered script tags
+    const nonceParamMaybe = nonce ? { nonce } : {};
 
-  // At this point the serializedState is a string, the second
-  // JSON.stringify wraps it within double quotes and escapes the
-  // contents properly so the value can be injected in the script tag
-  // as a string.
-  const nonceMaybe = nonce ? `nonce="${nonce}"` : '';
-  const preloadedStateScript = `
-      <script ${nonceMaybe}>window.__PRELOADED_STATE__ = ${JSON.stringify(
-    serializedState
-  )};</script>
-  `;
-  // Add nonce to server-side rendered script tags
-  const nonceParamMaybe = nonce ? { nonce } : {};
-
-  return template({
-    htmlAttributes: head.htmlAttributes.toString(),
-    title: head.title.toString(),
-    link: head.link.toString(),
-    meta: head.meta.toString(),
-    script: head.script.toString(),
-    preloadedStateScript,
-    ssrStyles: webExtractor.getStyleTags(),
-    ssrLinks: webExtractor.getLinkTags(),
-    ssrScripts: webExtractor.getScriptTags(nonceParamMaybe),
-    body,
+    return template({
+      htmlAttributes: head.htmlAttributes.toString(),
+      title: head.title.toString(),
+      link: head.link.toString(),
+      meta: head.meta.toString(),
+      script: head.script.toString(),
+      preloadedStateScript,
+      ssrStyles: webExtractor.getStyleTags(),
+      ssrLinks: webExtractor.getLinkTags(),
+      ssrScripts: webExtractor.getScriptTags(nonceParamMaybe),
+      body,
+    });
   });
 };

src/app.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { any, string } from 'prop-types';
-import ReactDOMServer from 'react-dom/server';
 
 import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter, StaticRouter } from 'react-router-dom';
@@ -340,7 +339,12 @@ export const renderApp = (
       hostedConfig={hostedConfig}
     />
   );
-  const body = ReactDOMServer.renderToString(WithChunks);
-  const { helmet: head } = helmetContext;
-  return { head, body };
+
+  // Let's keep react-dom/server out of the main code-chunk.
+  return import('react-dom/server').then(mod => {
+    const { default: ReactDOMServer } = mod;
+    const body = ReactDOMServer.renderToString(WithChunks);
+    const { helmet: head } = helmetContext;
+    return { head, body };
+  });
 };

src/app.test.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { act } from 'react';
+import ReactDOMClient from 'react-dom/client';
 import { getHostedConfiguration } from './util/testHelpers';
 import { ClientApp } from './app';
 import configureStore from './store';
@@ -15,7 +15,7 @@ afterAll(() => {
 });
 
 describe('Application - JSDOM environment', () => {
-  it('renders the LandingPage without crashing', () => {
+  it('renders the LandingPage without crashing', async () => {
     window.google = { maps: {} };
 
     // LandingPage gets rendered and it calls hostedAsset > fetchPageAssets > sdk.assetByVersion
@@ -32,7 +32,11 @@ describe('Application - JSDOM environment', () => {
     const fakeSdk = { assetByVersion: resolvePageAssetCall, assetByAlias: resolvePageAssetCall };
     const store = configureStore({}, fakeSdk);
     const div = document.createElement('div');
-    ReactDOM.render(<ClientApp store={store} hostedConfig={getHostedConfiguration()} />, div);
+    const root = ReactDOMClient.createRoot(div);
+
+    await act(async () => {
+      root.render(<ClientApp store={store} hostedConfig={getHostedConfiguration()} />);
+    });
     delete window.google;
   });
 });

src/components/AspectRatioWrapper/AspectRatioWrapper.js

@@ -1,9 +1,20 @@
 import React from 'react';
-import { node, number, string } from 'prop-types';
 import classNames from 'classnames';
 
 import css from './AspectRatioWrapper.module.css';
 
+/**
+ * Container that maintains a given aspect ratio, which should be given through width and heigh props
+ *
+ * @component
+ * @param {Object} props
+ * @param {string?} props.className add more style rules in addition to components own css.root
+ * @param {string?} props.rootClassName overwrite components own css.root
+ * @param {number} props.width
+ * @param {number} props.height
+ * @param {ReactNode} props.children
+ * @returns {JSX.Element} container element that maintains given aspect ratio
+ */
 const AspectRatioWrapper = props => {
   const { children, className, rootClassName, width, height, ...rest } = props;
   const classes = classNames(rootClassName || css.root, className);
@@ -20,18 +31,4 @@ const AspectRatioWrapper = props => {
   );
 };
 
-AspectRatioWrapper.defaultProps = {
-  className: null,
-  rootClassName: null,
-  children: null,
-};
-
-AspectRatioWrapper.propTypes = {
-  className: string,
-  rootClassName: string,
-  width: number.isRequired,
-  height: number.isRequired,
-  children: node,
-};
-
 export default AspectRatioWrapper;