@instructure/ui-source-code-editor 8.53.3-snapshot-1 → 8.53.3-snapshot-5

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [8.53.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-1) (2024-02-20)
+## [8.53.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-5) (2024-02-21)
 
-**Note:** Version bump only for package @instructure/ui-source-code-editor
+
+### Bug Fixes
+
+* **ui-source-code-editor:** make search panel work with older react versions ([a9b1f1a](https://github.com/instructure/instructure-ui/commit/a9b1f1ab5dd620cc93a59909d395387537e16895))
 
 
 

package/es/SourceCodeEditor/SearchPanel.js

@@ -29,12 +29,7 @@ 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';
 function SearchPanel({
   view,
   searchConfig
@@ -100,16 +95,21 @@ function SearchPanel({
 export default function customSearch(searchConfig) {
   return searchConfig ? search({
     createPanel: view => {
+      var _SearchPanel;
       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
-        }));
+      const reactVersionMajor = Number(React.version.split('.')[0]);
+      if (reactVersionMajor >= 18) {
+        // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+        import( /* webpackIgnore: true */'react-dom/client').then(r => {
+          const root = r.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/React.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        }).catch(e => {});
       } else {
-        reactdom.render( /*#__PURE__*/React.createElement(SearchPanel, {
+        ReactDOM.render( /*#__PURE__*/React.createElement(SearchPanel, {
           view: view,
           searchConfig: searchConfig
         }), 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 _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+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,6 @@ 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');
-}
 function SearchPanel({
   view,
   searchConfig
@@ -109,16 +105,21 @@ function SearchPanel({
 function customSearch(searchConfig) {
   return searchConfig ? (0, _search.search)({
     createPanel: view => {
+      var _SearchPanel;
       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
-        }));
+      const reactVersionMajor = Number(_react.default.version.split('.')[0]);
+      if (reactVersionMajor >= 18) {
+        // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+        Promise.resolve().then(() => (0, _interopRequireWildcard2.default)(require( /* webpackIgnore: true */'react-dom/client'))).then(r => {
+          const root = r.createRoot(dom);
+          root.render(_SearchPanel || (_SearchPanel = /*#__PURE__*/_react.default.createElement(SearchPanel, {
+            view: view,
+            searchConfig: searchConfig
+          })));
+        }).catch(e => {});
       } else {
-        reactdom.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
           view: view,
           searchConfig: searchConfig
         }), dom);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-source-code-editor",
-  "version": "8.53.3-snapshot-1",
+  "version": "8.53.3-snapshot-5",
   "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.3-snapshot-1",
-    "@instructure/ui-test-queries": "8.53.3-snapshot-1",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-1",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-5",
+    "@instructure/ui-test-queries": "8.53.3-snapshot-5",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-5",
     "@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.3-snapshot-1",
-    "@instructure/shared-types": "8.53.3-snapshot-1",
-    "@instructure/ui-a11y-content": "8.53.3-snapshot-1",
-    "@instructure/ui-buttons": "8.53.3-snapshot-1",
-    "@instructure/ui-dom-utils": "8.53.3-snapshot-1",
-    "@instructure/ui-i18n": "8.53.3-snapshot-1",
-    "@instructure/ui-icons": "8.53.3-snapshot-1",
-    "@instructure/ui-prop-types": "8.53.3-snapshot-1",
-    "@instructure/ui-react-utils": "8.53.3-snapshot-1",
-    "@instructure/ui-test-locator": "8.53.3-snapshot-1",
-    "@instructure/ui-testable": "8.53.3-snapshot-1",
-    "@instructure/ui-text-input": "8.53.3-snapshot-1",
-    "@instructure/ui-themes": "8.53.3-snapshot-1",
-    "@instructure/ui-utils": "8.53.3-snapshot-1",
+    "@instructure/emotion": "8.53.3-snapshot-5",
+    "@instructure/shared-types": "8.53.3-snapshot-5",
+    "@instructure/ui-a11y-content": "8.53.3-snapshot-5",
+    "@instructure/ui-buttons": "8.53.3-snapshot-5",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-5",
+    "@instructure/ui-i18n": "8.53.3-snapshot-5",
+    "@instructure/ui-icons": "8.53.3-snapshot-5",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-5",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-5",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-5",
+    "@instructure/ui-testable": "8.53.3-snapshot-5",
+    "@instructure/ui-text-input": "8.53.3-snapshot-5",
+    "@instructure/ui-themes": "8.53.3-snapshot-5",
+    "@instructure/ui-utils": "8.53.3-snapshot-5",
     "@lezer/highlight": "1.1.6",
     "prop-types": "^15.8.1"
   },

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -40,12 +40,7 @@ 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'
 
 export type SearchConfig = {
   placeholder: string
@@ -144,11 +139,21 @@ 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} />)
+          const reactVersionMajor = Number(React.version.split('.')[0])
+          if (reactVersionMajor >= 18) {
+            // webpack tries to evaluate imports compile time which would lead to an error on older react versions
+            import(/* webpackIgnore: true */ 'react-dom/client')
+              .then((r) => {
+                const root = r.createRoot(dom)
+                root.render(
+                  <SearchPanel view={view} searchConfig={searchConfig} />
+                )
+              })
+              .catch((e) => {
+                console.error(e)
+              })
           } else {
-            reactdom.render(
+            ReactDOM.render(
               <SearchPanel view={view} searchConfig={searchConfig} />,
               dom
             )