From a4a4136c2f7d9046f7336b2d5d01ae9191302b40 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 26 Jul 2022 17:58:05 +0100
Subject: [PATCH] Fixed hooks not being usable inside of react components

no issue

- switched to using the `window.ReactDOM` instance that is created when importing the react/react-dom libraries
  - React stores state/component references inside of the ReactDOM instance when rendering so we need to make sure all renders use the same instance otherwise it loses track of which component a hook belongs to
- cleaned up unnecessary vendor shims and `prop-types` import
  - `react` and `react-dom` vendor shims are unused when using the globals instead of imports
  - `prop-types` import+shim is not required as it's part of the `@tryghost/koenig-react` build unlike the earlier direct import of `react-mobiledoc-editor`
---
 ghost/admin/app/components/react-component.js        |  4 ++--
 ghost/admin/app/components/react-mobiledoc-editor.js |  6 ++++--
 ghost/admin/ember-cli-build.js                       |  8 +-------
 ghost/admin/vendor/shims/prop-types.js               | 12 ------------
 ghost/admin/vendor/shims/react-dom.js                | 12 ------------
 ghost/admin/vendor/shims/react.js                    | 12 ------------
 6 files changed, 7 insertions(+), 47 deletions(-)
 delete mode 100644 ghost/admin/vendor/shims/prop-types.js
 delete mode 100644 ghost/admin/vendor/shims/react-dom.js
 delete mode 100644 ghost/admin/vendor/shims/react.js

diff --git a/ghost/admin/app/components/react-component.js b/ghost/admin/app/components/react-component.js
index 99df3004c1..2d24b8d0af 100644
--- a/ghost/admin/app/components/react-component.js
+++ b/ghost/admin/app/components/react-component.js
@@ -1,6 +1,6 @@
+/* global ReactDOM */
 import Component from '@glimmer/component';
 import {action} from '@ember/object';
-import {createRoot} from 'react-dom/client';
 
 export default class ReactComponent extends Component {
     @action
@@ -19,7 +19,7 @@ export default class ReactComponent extends Component {
         }
 
         this.elem = element;
-        this.root = createRoot(this.elem);
+        this.root = ReactDOM.createRoot(this.elem);
         this.root.render(reactComponent);
     }
 
diff --git a/ghost/admin/app/components/react-mobiledoc-editor.js b/ghost/admin/app/components/react-mobiledoc-editor.js
index 5eb2d3fa87..411eb563da 100644
--- a/ghost/admin/app/components/react-mobiledoc-editor.js
+++ b/ghost/admin/app/components/react-mobiledoc-editor.js
@@ -71,7 +71,7 @@ const Koenig = (props) => {
     return <KoenigEditor {...props} />;
 };
 
-export default function ReactMobiledocEditorComponent(props) {
+const ReactMobiledocEditor = (props) => {
     return (
         <ErrorHandler>
             <Suspense fallback={<p>Loading editor...</p>}>
@@ -82,4 +82,6 @@ export default function ReactMobiledocEditorComponent(props) {
             </Suspense>
         </ErrorHandler>
     );
-}
+};
+
+export default ReactMobiledocEditor;
diff --git a/ghost/admin/ember-cli-build.js b/ghost/admin/ember-cli-build.js
index a8e2dedf98..e1dc594a45 100644
--- a/ghost/admin/ember-cli-build.js
+++ b/ghost/admin/ember-cli-build.js
@@ -266,7 +266,7 @@ module.exports = function (defaults) {
     }
 
     // Support react components
-    // React and ReactDOM globals
+    // adds React and ReactDOM to window.
     app.import({
         development: 'node_modules/react/umd/react.development.js',
         production: 'node_modules/react/umd/react.production.min.js'
@@ -275,12 +275,6 @@ module.exports = function (defaults) {
         development: 'node_modules/react-dom/umd/react-dom.development.js',
         production: 'node_modules/react-dom/umd/react-dom.production.min.js'
     });
-    // support `import React from 'react'`
-    app.import('vendor/shims/react.js');
-    app.import('vendor/shims/react-dom.js');
-    // required dependency for dynamically fetched react-mobiledoc-editor
-    app.import('node_modules/prop-types/prop-types.min.js');
-    app.import('vendor/shims/prop-types.js');
 
     return app.toTree();
 };
diff --git a/ghost/admin/vendor/shims/prop-types.js b/ghost/admin/vendor/shims/prop-types.js
deleted file mode 100644
index da42bcd18e..0000000000
--- a/ghost/admin/vendor/shims/prop-types.js
+++ /dev/null
@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['prop-types'],
-      __esModule: true,
-    };
-  }
-
-  define('prop-types', [], vendorModule);
-})();
diff --git a/ghost/admin/vendor/shims/react-dom.js b/ghost/admin/vendor/shims/react-dom.js
deleted file mode 100644
index 894308ccd5..0000000000
--- a/ghost/admin/vendor/shims/react-dom.js
+++ /dev/null
@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['react-dom'],
-      __esModule: true,
-    };
-  }
-
-  define('react-dom', [], vendorModule);
-})();
diff --git a/ghost/admin/vendor/shims/react.js b/ghost/admin/vendor/shims/react.js
deleted file mode 100644
index 848805dc01..0000000000
--- a/ghost/admin/vendor/shims/react.js
+++ /dev/null
@@ -1,12 +0,0 @@
-(function() {
-  function vendorModule() {
-    'use strict';
-
-    return {
-      'default': self['react'],
-      __esModule: true,
-    };
-  }
-
-  define('react', [], vendorModule);
-})();