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

package/CHANGELOG.md

@@ -3,12 +3,9 @@
 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-5](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-5) (2024-02-21)
+## [8.53.3-snapshot-8](https://github.com/instructure/instructure-ui/compare/v8.53.2...v8.53.3-snapshot-8) (2024-02-23)
 
-
-### Bug Fixes
-
-* **ui-source-code-editor:** make search panel work with older react versions ([a9b1f1a](https://github.com/instructure/instructure-ui/commit/a9b1f1ab5dd620cc93a59909d395387537e16895))
+**Note:** Version bump only for package @instructure/ui-source-code-editor
 
 
 

package/es/SourceCodeEditor/SearchPanel.js

@@ -29,7 +29,12 @@ 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';
-import ReactDOM from 'react-dom';
+let reactdom;
+try {
+  reactdom = require('react-dom/client');
+} catch {
+  reactdom = require('react-dom');
+}
 function SearchPanel({
   view,
   searchConfig
@@ -95,21 +100,16 @@ function SearchPanel({
 export default function customSearch(searchConfig) {
   return searchConfig ? search({
     createPanel: view => {
-      var _SearchPanel;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      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 => {});
+      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, {
+        reactdom.render( /*#__PURE__*/React.createElement(SearchPanel, {
           view: view,
           searchConfig: searchConfig
         }), dom);

package/lib/SourceCodeEditor/SearchPanel.js

@@ -1,21 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireWildcard = 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 = _interopRequireWildcard3(require("react"));
+var _react = _interopRequireWildcard(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)
@@ -40,6 +38,12 @@ 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
@@ -105,21 +109,16 @@ function SearchPanel({
 function customSearch(searchConfig) {
   return searchConfig ? (0, _search.search)({
     createPanel: view => {
-      var _SearchPanel;
       const dom = document.createElement('div');
       dom.style.padding = '8px';
-      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 => {});
+      if ('createRoot' in reactdom) {
+        const root = reactdom.createRoot(dom);
+        root.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+          view: view,
+          searchConfig: searchConfig
+        }));
       } else {
-        _reactDom.default.render( /*#__PURE__*/_react.default.createElement(SearchPanel, {
+        reactdom.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-5",
+  "version": "8.53.3-snapshot-8",
   "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-5",
-    "@instructure/ui-test-queries": "8.53.3-snapshot-5",
-    "@instructure/ui-test-utils": "8.53.3-snapshot-5",
+    "@instructure/ui-babel-preset": "8.53.3-snapshot-8",
+    "@instructure/ui-test-queries": "8.53.3-snapshot-8",
+    "@instructure/ui-test-utils": "8.53.3-snapshot-8",
     "@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-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",
+    "@instructure/emotion": "8.53.3-snapshot-8",
+    "@instructure/shared-types": "8.53.3-snapshot-8",
+    "@instructure/ui-a11y-content": "8.53.3-snapshot-8",
+    "@instructure/ui-buttons": "8.53.3-snapshot-8",
+    "@instructure/ui-dom-utils": "8.53.3-snapshot-8",
+    "@instructure/ui-i18n": "8.53.3-snapshot-8",
+    "@instructure/ui-icons": "8.53.3-snapshot-8",
+    "@instructure/ui-prop-types": "8.53.3-snapshot-8",
+    "@instructure/ui-react-utils": "8.53.3-snapshot-8",
+    "@instructure/ui-test-locator": "8.53.3-snapshot-8",
+    "@instructure/ui-testable": "8.53.3-snapshot-8",
+    "@instructure/ui-text-input": "8.53.3-snapshot-8",
+    "@instructure/ui-themes": "8.53.3-snapshot-8",
+    "@instructure/ui-utils": "8.53.3-snapshot-8",
     "@lezer/highlight": "1.1.6",
     "prop-types": "^15.8.1"
   },

package/src/SourceCodeEditor/SearchPanel.tsx

@@ -40,7 +40,12 @@ import {
   IconSearchLine
 } from '@instructure/ui-icons'
 
-import ReactDOM from 'react-dom'
+let reactdom: any
+try {
+  reactdom = require('react-dom/client')
+} catch {
+  reactdom = require('react-dom')
+}
 
 export type SearchConfig = {
   placeholder: string
@@ -139,21 +144,11 @@ export default function customSearch(searchConfig: SearchConfig | undefined) {
         createPanel: (view) => {
           const dom = document.createElement('div')
           dom.style.padding = '8px'
-          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)
-              })
+          if ('createRoot' in reactdom) {
+            const root = reactdom.createRoot(dom)
+            root.render(<SearchPanel view={view} searchConfig={searchConfig} />)
           } else {
-            ReactDOM.render(
+            reactdom.render(
               <SearchPanel view={view} searchConfig={searchConfig} />,
               dom
             )