@instructure/ui-source-code-editor 8.53.2-snapshot-3 → 8.53.3-snapshot-2

package/CHANGELOG.md

@@ -3,7 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.2-snapshot-3](https://github.com/instructure/instructure-ui/compare/v8.53.1...v8.53.2-snapshot-3) (2024-02-15)
+## [8.53.3-snapshot-2](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-2) (2024-02-16)
+
+
+### Bug Fixes
+
+* **ui-source-code-editor:** fix react-dom version detection ([465c10d](https://github.com/instructure/instructure-ui/commit/465c10d43543efe1dc6d3de07d5b0b311d4c27ea))
+
+
+
+
+
+## [8.53.2](https://github.com/instructure/instructure-ui/compare/v8.53.1...v8.53.2) (2024-02-15)
 
 
 ### Bug Fixes

package/es/SourceCodeEditor/SearchPanel.js

@@ -29,12 +29,11 @@ import { setSearchQuery, search, findNext, findPrevious, SearchQuery, closeSearc
 import { TextInput } from '@instructure/ui-text-input';
 import { IconButton } from '@instructure/ui-buttons';
 import { IconArrowOpenDownLine, IconArrowOpenUpLine, IconSearchLine } from '@instructure/ui-icons';
-let reactdom;
-try {
-  reactdom = require('react-dom/client');
-} catch {
-  reactdom = require('react-dom');
-}
+import ReactDOM from 'react-dom';
+const createRoot = async () => {
+  // eslint-disable-next-line import/no-unresolved
+  return import('react-dom/client');
+};
 function SearchPanel({
   view,
   searchConfig
@@ -100,20 +99,41 @@ function SearchPanel({
 export default function customSearch(searchConfig) {
   return searchConfig ? search({
     createPanel: view => {
+      var _SearchPanel, _SearchPanel2;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      if ('createRoot' in reactdom) {
-        const root = reactdom.createRoot(dom);
-        root.render( /*#__PURE__*/React.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }));
-      } else {
-        reactdom.render( /*#__PURE__*/React.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }), dom);
-      }
+      createRoot().then(res => {
+        let err;
+        try {
+          const root = res.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/React.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        } catch (error) {
+          err = error;
+        }
+        // this timeout is needed because Root.render() seems to cause
+        // prop validation to be emitted a frame later
+        setTimeout(() => {
+          if (err) {}
+        });
+      }).catch(() => {
+        // react-dom/client does not exist, its React 16 or 17
+        let error;
+        setTimeout(() => {
+          try {
+            ReactDOM.render(_SearchPanel2 || (_SearchPanel2 = /*#__PURE__*/React.createElement(SearchPanel, {
+              view: view,
+              searchConfig: searchConfig
+            })), dom);
+          } catch (e) {
+            // catch unhandled errors
+            error = e;
+          }
+          if (error) {}
+        });
+      });
       return {
         dom
       };

package/lib/SourceCodeEditor/SearchPanel.js

@@ -1,19 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = customSearch;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
+var _react = _interopRequireWildcard3(require("react"));
 var _search = require("@codemirror/search");
 var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
 var _IconButton = require("@instructure/ui-buttons/lib/IconButton");
 var _IconArrowOpenDownLine = require("@instructure/ui-icons/lib/IconArrowOpenDownLine.js");
 var _IconArrowOpenUpLine2 = require("@instructure/ui-icons/lib/IconArrowOpenUpLine.js");
 var _IconSearchLine2 = require("@instructure/ui-icons/lib/IconSearchLine.js");
+var _reactDom = _interopRequireDefault(require("react-dom"));
 var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
 /*
  * The MIT License (MIT)
@@ -38,12 +40,10 @@ var _IconSearchLine, _IconArrowOpenDownLin, _IconArrowOpenUpLine;
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-let reactdom;
-try {
-  reactdom = require('react-dom/client');
-} catch {
-  reactdom = require('react-dom');
-}
+const createRoot = async () => {
+  // eslint-disable-next-line import/no-unresolved
+  return Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require('react-dom/client')));
+};
 function SearchPanel({
   view,
   searchConfig
@@ -109,20 +109,41 @@ function SearchPanel({
 function customSearch(searchConfig) {
   return searchConfig ? (0, _search.search)({
     createPanel: view => {
+      var _SearchPanel, _SearchPanel2;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      if ('createRoot' in reactdom) {
-        const root = reactdom.createRoot(dom);
-        root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }));
-      } else {
-        reactdom.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
-          view: view,
-          searchConfig: searchConfig
-        }), dom);
-      }
+      createRoot().then(res => {
+        let err;
+        try {
+          const root = res.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/_react.default.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        } catch (error) {
+          err = error;
+        }
+        // this timeout is needed because Root.render() seems to cause
+        // prop validation to be emitted a frame later
+        setTimeout(() => {
+          if (err) {}
+        });
+      }).catch(() => {
+        // react-dom/client does not exist, its React 16 or 17
+        let error;
+        setTimeout(() => {
+          try {
+            _reactDom.default.render(_SearchPanel2 || (_SearchPanel2 = /*#__PURE__*/_react.default.createElement(SearchPanel, {
+              view: view,
+              searchConfig: searchConfig
+            })), dom);
+          } catch (e) {
+            // catch unhandled errors
+            error = e;
+          }
+          if (error) {}
+        });
+      });
       return {
         dom
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "8.53.2-snapshot-3",
+  "version": "8.53.3-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,9 +23,9 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.53.2-snapshot-3",
-    "@instructure/ui-test-queries": "8.53.2-snapshot-3",
-    "@instructure/ui-test-utils": "8.53.2-snapshot-3",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-2",
+    "@instructure/ui-test-queries": "8.53.3-snapshot-2",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-2",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0"
   },
@@ -44,20 +44,20 @@
     "@codemirror/search": "^6.5.4",
     "@codemirror/state": "^6.3.0",
     "@codemirror/view": "^6.21.3",
-    "@instructure/emotion": "8.53.2-snapshot-3",
-    "@instructure/shared-types": "8.53.2-snapshot-3",
-    "@instructure/ui-a11y-content": "8.53.2-snapshot-3",
-    "@instructure/ui-buttons": "8.53.2-snapshot-3",
-    "@instructure/ui-dom-utils": "8.53.2-snapshot-3",
-    "@instructure/ui-i18n": "8.53.2-snapshot-3",
-    "@instructure/ui-icons": "8.53.2-snapshot-3",
-    "@instructure/ui-prop-types": "8.53.2-snapshot-3",
-    "@instructure/ui-react-utils": "8.53.2-snapshot-3",
-    "@instructure/ui-test-locator": "8.53.2-snapshot-3",
-    "@instructure/ui-testable": "8.53.2-snapshot-3",
-    "@instructure/ui-text-input": "8.53.2-snapshot-3",
-    "@instructure/ui-themes": "8.53.2-snapshot-3",
-    "@instructure/ui-utils": "8.53.2-snapshot-3",
+    "@instructure/emotion": "8.53.3-snapshot-2",
+    "@instructure/shared-types": "8.53.3-snapshot-2",
+    "@instructure/ui-a11y-content": "8.53.3-snapshot-2",
+    "@instructure/ui-buttons": "8.53.3-snapshot-2",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-2",
+    "@instructure/ui-i18n": "8.53.3-snapshot-2",
+    "@instructure/ui-icons": "8.53.3-snapshot-2",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-2",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-2",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-2",
+    "@instructure/ui-testable": "8.53.3-snapshot-2",
+    "@instructure/ui-text-input": "8.53.3-snapshot-2",
+    "@instructure/ui-themes": "8.53.3-snapshot-2",
+    "@instructure/ui-utils": "8.53.3-snapshot-2",
     "@lezer/highlight": "1.1.6",
     "prop-types": "^15.8.1"
   },

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -40,11 +40,10 @@ import {
   IconSearchLine
 } from '@instructure/ui-icons'
 
-let reactdom: any
-try {
-  reactdom = require('react-dom/client')
-} catch {
-  reactdom = require('react-dom')
+import ReactDOM from 'react-dom'
+const createRoot = async () => {
+  // eslint-disable-next-line import/no-unresolved
+  return import('react-dom/client')
 }
 
 export type SearchConfig = {
@@ -144,15 +143,43 @@ export default function customSearch(searchConfig: SearchConfig | undefined) {
         createPanel: (view) => {
           const dom = document.createElement('div')
           dom.style.padding = '8px'
-          if ('createRoot' in reactdom) {
-            const root = reactdom.createRoot(dom)
-            root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
-          } else {
-            reactdom.render(
-              <SearchPanel view={view} searchConfig={searchConfig} />,
-              dom
-            )
-          }
+          createRoot()
+            .then((res) => {
+              let err: unknown
+              try {
+                const root = res!.createRoot(dom)
+                root.render(
+                  <SearchPanel view={view} searchConfig={searchConfig} />
+                )
+              } catch (error) {
+                err = error
+              }
+              // this timeout is needed because Root.render() seems to cause
+              // prop validation to be emitted a frame later
+              setTimeout(() => {
+                if (err) {
+                  console.error(err)
+                }
+              })
+            })
+            .catch(() => {
+              // react-dom/client does not exist, its React 16 or 17
+              let error: unknown
+              setTimeout(() => {
+                try {
+                  ReactDOM.render(
+                    <SearchPanel view={view} searchConfig={searchConfig} />,
+                    dom
+                  )
+                } catch (e) {
+                  // catch unhandled errors
+                  error = e
+                }
+                if (error) {
+                  console.error(error)
+                }
+              })
+            })
           return { dom }
         }
       })