@quintype/framework 7.3.2-term-connection-on-config.0 → 7.4.0-react-18.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [7.3.2](https://github.com/quintype/quintype-node-framework/compare/v7.3.1...v7.3.2) (2022-04-18)
+
 ### [7.3.1](https://github.com/quintype/quintype-node-framework/compare/v7.3.0...v7.3.1) (2022-03-03)
 
 ## [7.3.0](https://github.com/quintype/quintype-node-framework/compare/v7.2.0...v7.3.0) (2022-03-01)

package/client/start.js

@@ -11,7 +11,7 @@ import { BreakingNews, CLIENT_SIDE_RENDERED, NAVIGATE_TO_PAGE, PAGE_LOADING } fr
 import { createBrowserHistory } from "history";
 import get from "lodash/get";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot, hydrateRoot } from "react-dom/client";
 import { Provider } from "react-redux";
 import { IsomorphicComponent } from "../isomorphic/component";
 import { makePickComponentSync } from "../isomorphic/impl/make-pick-component-sync";
@@ -181,10 +181,21 @@ export function maybeSetUrl(path, title) {
 export function renderComponent(clazz, container, store, props = {}, callback) {
   const component = React.createElement(Provider, { store }, React.createElement(clazz, props || {}));
 
+  function AppWithCallbackAfterRender() {
+    useEffect(() => {
+      callback();
+    });
+
+    return component;
+  }
+
+  let root = createRoot(document.getElementById(container));
+
   if (props.hydrate) {
-    return ReactDOM.hydrate(component, document.getElementById(container), callback);
+    root = hydrateRoot(document.getElementById(container));
   }
-  return ReactDOM.render(component, document.getElementById(container), callback);
+
+  return root.render(<AppWithCallbackAfterRender />);
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/framework",
-  "version": "7.3.2-term-connection-on-config.0",
+  "version": "7.4.0-react-18.0",
   "description": "Libraries to help build Quintype Node.js apps",
   "main": "index.js",
   "scripts": {
@@ -47,8 +47,8 @@
     "mocha-snapshots": "^4.2.0",
     "morgan": "^1.10.0",
     "path-to-regexp": "^6.2.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-redux": "^7.2.5",
     "react-router": "^5.2.1",
     "redux": "^4.1.1",

package/server/routes.js

@@ -168,10 +168,7 @@ function withConfigPartial(
             })
           )
         )
-        .catch((e) => {
-          logError(e);
-          res.status(500).send("An internal error occured for this publisher's config");
-        });
+        .catch(logError);
     };
   };
 }

package/test/integration/isomorphic-handler-test.js

@@ -25,7 +25,6 @@ const cdnProviderFunc = () => "akamai";
 
 function createApp(loadData, routes, opts = {}, app = express()) {
   const { redirectToLowercaseSlugs = false } = opts;
-  const emptyFunc = () => {};
   isomorphicRoutes(
     app,
     Object.assign(
@@ -34,10 +33,9 @@ function createApp(loadData, routes, opts = {}, app = express()) {
           assetHash: (file) => (file === "app.js" ? "abcdef" : null),
           assetPath: (file) => `/assets/${file}`,
         },
-        getClient: opts.getClientStub || getClientStub,
+        getClient: getClientStub,
         generateRoutes: () => routes,
         loadData,
-        logError: opts.logError || emptyFunc,
         pickComponent: opts.pickComponent || pickComponent,
         renderLayout: (res, { store, title, content }) =>
           res.send(JSON.stringify({ store: store.getState(), title, content })),
@@ -53,33 +51,6 @@ function createApp(loadData, routes, opts = {}, app = express()) {
 }
 
 describe("Isomorphic Handler", function () {
-  it("Renders a 404 when a publisher is not found", function (done) {
-    const app = createApp(
-      (pageType, params, config, client, { host }) => Promise.resolve({ pageType, data: { text: "foobar", host } }),
-      [{ pageType: "home-page", path: "/", exact: true }],
-      {
-        getClientStub: (hostname) => {
-          return {
-            getHostname: () => "demo.quintype.io",
-            getConfig: () => Promise.reject("Pubisher not found"),
-            baseUrl: "https://www.foo.com",
-          };
-        },
-        logError: (error) => {
-          console.log(error);
-        },
-      }
-    );
-
-    supertest(app)
-      .get("/")
-      .expect(500)
-      .then((res) => {
-        assert.equal("An internal error occured for this publisher's config", res.text);
-      })
-      .then(done);
-  });
-
   it("Renders the page if the route matches", function (done) {
     const app = createApp(
       (pageType, params, config, client, { host }) =>