Merge pull request #13002 from JohnSnowLabs/bugfix/pabla-embed-react-…

…from-unpkg Embed React and ReactDOM instead of packages from unpkg [skip test]
JohnSnowLabs · Oct 28, 2022 · 1426d41 · 1426d41
2 parents ea005cd + 4988357
commit 1426d41
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 23 deletions.
diff --git a/docs/_frontend/package.json b/docs/_frontend/package.json
@@ -28,6 +28,8 @@
     "@floating-ui/react-dom-interactions": "^0.6.3",
     "classnames": "^2.3.1",
     "downshift": "^6.1.7",
-    "preact": "^10.7.0"
+    "preact": "^10.7.0",
+    "react": "17",
+    "react-dom": "17"
   }
 }
diff --git a/docs/_frontend/src/models/FilterForm/FilterForm.js b/docs/_frontend/src/models/FilterForm/FilterForm.js
@@ -1,9 +1,8 @@
+import { createElement as e } from 'react';
 import Select from '../Select';
 import './FilterForm.css';
 import { products, productDisplayName } from '../ModelItem/utils';
 
-const { createElement: e } = React;
-
 const removeAloneEditions = (editions) => {
   const groups = {};
   editions.forEach((edition) => {

diff --git a/docs/_frontend/src/models/Form/Form.js b/docs/_frontend/src/models/Form/Form.js
@@ -1,8 +1,7 @@
+import { createElement as e } from 'react';
 import SearchForm from '../SearchForm';
 import FilterForm from '../FilterForm';
 
-const { createElement: e } = React;
-
 const Form = ({ onSubmit, isLoading, params, meta }) => {
   return [
     e(SearchForm, {

diff --git a/docs/_frontend/src/models/ModelItemList/ModelItemList.js b/docs/_frontend/src/models/ModelItemList/ModelItemList.js
@@ -1,3 +1,5 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
 import Pagination from '../Pagination';
 import Sidebar from '../Sidebar';
 import './ModelItemList.css';
@@ -24,7 +26,7 @@ const ModelItemList = ({
     onSupportedToggle(flag);
   };
 
-  return ReactDOM.createPortal(
+  return createPortal(
     <div key="items" className="grid--container model-items">
       <div className="model-items__sidebar-wrapper">
         <div className="model-items__sidebar">

diff --git a/docs/_frontend/src/models/ModelItemTag/ModelItemTag.js b/docs/_frontend/src/models/ModelItemTag/ModelItemTag.js
@@ -1,4 +1,4 @@
-const { createElement: e } = React;
+import { createElement as e } from 'react';
 
 const ModelItemTag = ({ icon, name, value }) => {
   return e('div', { className: 'model-item__tag' }, [

diff --git a/docs/_frontend/src/models/Pagination/Pagination.js b/docs/_frontend/src/models/Pagination/Pagination.js
@@ -1,4 +1,4 @@
-const { createElement: e } = React;
+import { createElement as e } from 'react';
 import './Pagination.css';
 
 const Pagination = ({ page, totalPages, onChange }) => {

diff --git a/docs/_frontend/src/models/SearchForm/SearchForm.js b/docs/_frontend/src/models/SearchForm/SearchForm.js
@@ -1,8 +1,7 @@
+import { createElement as e, useState, useEffect } from 'react';
 import Spinner from '../Spinner';
 import './SearchForm.css';
 
-const { createElement: e, useState, useEffect } = React;
-
 const SearchForm = ({ onSubmit, isLoading, params }) => {
   const [value, setValue] = useState('');
   useEffect(() => {

diff --git a/docs/_frontend/src/models/Select/Select.js b/docs/_frontend/src/models/Select/Select.js
@@ -1,7 +1,6 @@
+import { createElement as e, Children } from 'react';
 import './Select.css';
 
-const { createElement: e, Children } = React;
-
 const Select = ({
   name,
   value,

diff --git a/docs/_frontend/src/models/Sidebar/Sidebar.js b/docs/_frontend/src/models/Sidebar/Sidebar.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import Combobox from '../Combobox';
 import Radio from '../Radio/Radio';
 import RadioGroup from '../RadioGroup';

diff --git a/docs/_frontend/src/models/Spinner/Spinner.js b/docs/_frontend/src/models/Spinner/Spinner.js
@@ -1,4 +1,4 @@
-const { createElement: e } = React;
+import { createElement as e } from 'react';
 
 const Spinner = () => e('i', { className: 'fas fa-circle-notch fa-spin' });
 

diff --git a/docs/_frontend/src/models/index.js b/docs/_frontend/src/models/index.js
@@ -1,5 +1,6 @@
-const { createElement: e } = React;
+import React from 'react';
+import { render } from 'react-dom';
 
 import App from './App';
 
-ReactDOM.render(e(App), document.getElementById('app'));
+render(<App />, document.getElementById('app'));
diff --git a/docs/_frontend/webpack.config.js b/docs/_frontend/webpack.config.js
@@ -91,10 +91,6 @@ module.exports = (env, argv) => {
         },
       ],
     },
-    externals: {
-      react: 'React',
-      'react-dom': 'ReactDOM',
-    },
     devServer: {
       port: 9000,
       hot: true,

diff --git a/docs/_frontend/yarn.lock b/docs/_frontend/yarn.lock
@@ -3140,7 +3140,7 @@ lodash@^4.17.14:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -4102,6 +4102,15 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-dom@17:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4112,6 +4121,14 @@ react-is@^17.0.2:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react@17:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 readable-stream@^2.0.1:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
@@ -4309,6 +4326,14 @@ safe-buffer@~5.2.0:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz"

diff --git a/docs/_layouts/models.html b/docs/_layouts/models.html
@@ -69,8 +69,6 @@ <h1>NLP Models Hub</h1>
   </div>
 </div>
 
-<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
-<script type="text/javascript" src="/static/models.js?t=1639577062227"></script>
+<script type="text/javascript" src="/static/models.js?t=1666962246795"></script>
 
 {%- include pageview.html -%}