Merge pull request #2260 from plotly/react-18

Experimental: enable React 18
plotly · Feb 22, 2023 · 3243512 · 3243512
2 parents ae093af + b75da3b
commit 3243512
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 99 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -204,6 +204,24 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
+  test-39-react-18:
+    <<: *test
+    docker:
+      - image: cimg/python:3.9.9-browsers
+        auth:
+          username: dashautomation
+          password: $DASH_PAT_DOCKERHUB
+        environment:
+          PERCY_ENABLE: 0
+          PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: True
+          PYVERSION: python39
+          REDIS_URL: redis://localhost:6379
+          REACT_VERSION: "18.2.0"
+      - image: cimg/redis:6.2.6
+        auth:
+          username: dashautomation
+          password: $DASH_PAT_DOCKERHUB
+
   test-36:
     <<: *test
     docker:
@@ -258,7 +276,7 @@ jobs:
           PYVERSION: python36
           PERCY_ENABLE: 0
 
-  dcc-test-39: &dcc-test
+  dcc-39: &dcc-test
     working_directory: ~/dash
     docker:
       - image: cimg/python:3.9.9-browsers
@@ -302,7 +320,19 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  dcc-test-36:
+  dcc-39-react-18:
+    <<: *dcc-test
+    docker:
+      - image: cimg/python:3.9.9-browsers
+        auth:
+          username: dashautomation
+          password: $DASH_PAT_DOCKERHUB
+        environment:
+          PYVERSION: python39
+          PERCY_ENABLE: 0
+          REACT_VERSION: "18.2.0"
+
+  dcc-36:
     <<: *dcc-test
     docker:
       - image: cimg/python:3.6.15-browsers
@@ -313,7 +343,7 @@ jobs:
           PYVERSION: python36
           PERCY_ENABLE: 0
 
-  html-python-39: &html-test
+  html-39: &html-test
     working_directory: ~/dash
     docker:
       - image: cimg/python:3.9.9-browsers
@@ -365,7 +395,19 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
-  html-python-36:
+  html-39-react-18:
+    <<: *html-test
+    docker:
+      - image: cimg/python:3.9.9-browsers
+        auth:
+          username: dashautomation
+          password: $DASH_PAT_DOCKERHUB
+        environment:
+          PYVERSION: python39
+          PERCY_ENABLE: 0
+          REACT_VERSION: "18.2.0"
+
+  html-36:
     <<: *html-test
     docker:
       - image: cimg/python:3.6.15-browsers
@@ -376,7 +418,7 @@ jobs:
           PYVERSION: python36
           PERCY_ENABLE: 0
 
-  table-server-test:
+  table-server: &table-server
     working_directory: ~/dash
     docker:
       - image: cimg/python:3.9.9-browsers
@@ -423,6 +465,15 @@ jobs:
       - store_artifacts:
           path: /tmp/dash_artifacts
 
+  table-server-react-18:
+    <<: *table-server
+    docker:
+      - image: cimg/python:3.9.9-browsers
+        environment:
+          PYVERSION: python39
+          PERCY_ENABLE: 0
+          REACT_VERSION: "18.2.0"
+
   table-unit-test:
     working_directory: ~/dash
     docker:
@@ -552,6 +603,9 @@ workflows:
       - test-39:
           requires:
             - install-dependencies-39
+      - test-39-react-18:
+          requires:
+            - install-dependencies-39
       - test-36:
           requires:
             - install-dependencies-36
@@ -563,17 +617,23 @@ workflows:
           requires:
             - install-dependencies-36
 
-      - dcc-test-39:
+      - dcc-39:
           requires:
             - install-dependencies-39
-      - dcc-test-36:
+      - dcc-39-react-18:
+          requires:
+            - install-dependencies-39
+      - dcc-36:
           requires:
             - install-dependencies-36
 
-      - html-python-39:
+      - html-39:
+          requires:
+            - install-dependencies-39
+      - html-39-react-18:
           requires:
             - install-dependencies-39
-      - html-python-36:
+      - html-36:
           requires:
             - install-dependencies-36
 
@@ -584,16 +644,19 @@ workflows:
           requires:
             - install-dependencies-39
       - table-visual-test
-      - table-server-test:
+      - table-server:
+          requires:
+            - install-dependencies-39
+      - table-server-react-18:
           requires:
             - install-dependencies-39
 
       - percy/finalize_all:
           requires:
             - test-39
-            - dcc-test-39
-            - html-python-39
-            - table-server-test
+            - dcc-39
+            - html-39
+            - table-server
       - artifacts:
           requires:
             - percy/finalize_all

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 - [#2417](https://github.com/plotly/dash/pull/2417) Add wait_timeout property to customize the behavior of the default wait timeout used for by wait_for_page, fix [#1595](https://github.com/plotly/dash/issues/1595)
 - [#2417](https://github.com/plotly/dash/pull/2417) Add the element target text for wait_for_text* error message, fix [#945](https://github.com/plotly/dash/issues/945)
 - [#2425](https://github.com/plotly/dash/pull/2425) Add `add_log_handler=True` to Dash init, if you don't want a log stream handler at all.
+- [#2260](https://github.com/plotly/dash/pull/2260) Experimental support for React 18. The default is still React v16.14.0, but to use React 18 you can either set the environment variable `REACT_VERSION=18.2.0` before running your app, or inside the app call `dash._dash_renderer._set_react_version("18.2.0")`. THIS FEATURE IS EXPERIMENTAL. It has not been tested with component suites outside the Dash core, and we may add or remove available React versions in any future release.
 
 ## Fixed
 

diff --git a/components/dash-table/tests/selenium/test_header.py b/components/dash-table/tests/selenium/test_header.py
@@ -23,7 +23,7 @@ def get_app(props=dict()):
     return app
 
 
-def get_sigle_row_app(props=dict()):
+def get_single_row_app(props=dict()):
     app = dash.Dash(__name__)
 
     baseProps = get_props()
@@ -115,7 +115,7 @@ def test_head003_preserves_column_name_on_cancel(test):
 
 
 def test_head004_change_single_row_header(test):
-    test.start_server(get_sigle_row_app())
+    test.start_server(get_single_row_app())
 
     target = test.table("table")
 

diff --git a/dash/_dash_renderer.py b/dash/_dash_renderer.py
@@ -1,39 +1,64 @@
+import os
+
 __version__ = "1.14.5"
 
-_js_dist_dependencies = [
-    {
-        "external_url": {
-            "prod": [
-                "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                "https://unpkg.com/react@16.14.0/umd/react.production.min.js",
-                "https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js",
-                "https://unpkg.com/prop-types@15.8.1/prop-types.min.js",
-            ],
-            "dev": [
-                "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
-                "https://unpkg.com/react@16.14.0/umd/react.development.js",
-                "https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js",
-                "https://unpkg.com/prop-types@15.8.1/prop-types.js",
-            ],
-        },
-        "relative_package_path": {
-            "prod": [
-                "deps/polyfill@7.12.1.min.js",
-                "deps/react@16.14.0.min.js",
-                "deps/react-dom@16.14.0.min.js",
-                "deps/prop-types@15.8.1.min.js",
-            ],
-            "dev": [
-                "deps/polyfill@7.12.1.min.js",
-                "deps/react@16.14.0.js",
-                "deps/react-dom@16.14.0.js",
-                "deps/prop-types@15.8.1.js",
-            ],
-        },
-        "namespace": "dash",
-    }
-]
+_available_react_versions = {"16.14.0", "18.2.0"}
+_available_reactdom_versions = {"16.14.0", "18.2.0"}
+_js_dist_dependencies = []  # to be set by _set_react_version
+
+
+def _set_react_version(v_react, v_reactdom=None):
+    if not v_reactdom:
+        v_reactdom = v_react
+
+    react_err = f"looking for one of {_available_react_versions}, found {v_react}"
+    reactdom_err = (
+        f"looking for one of {_available_reactdom_versions}, found {v_reactdom}"
+    )
+    assert v_react in _available_react_versions, react_err
+    assert v_reactdom in _available_reactdom_versions, reactdom_err
+
+    _js_dist_dependencies[:] = [
+        {
+            "external_url": {
+                "prod": [
+                    "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
+                    f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
+                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
+                    "https://unpkg.com/prop-types@15.8.1/prop-types.min.js",
+                ],
+                "dev": [
+                    "https://unpkg.com/@babel/polyfill@7.12.1/dist/polyfill.min.js",
+                    f"https://unpkg.com/react@{v_react}/umd/react.development.js",
+                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
+                    "https://unpkg.com/prop-types@15.8.1/prop-types.js",
+                ],
+            },
+            "relative_package_path": {
+                "prod": [
+                    "deps/polyfill@7.12.1.min.js",
+                    f"deps/react@{v_react}.min.js",
+                    f"deps/react-dom@{v_reactdom}.min.js",
+                    "deps/prop-types@15.8.1.min.js",
+                ],
+                "dev": [
+                    "deps/polyfill@7.12.1.min.js",
+                    f"deps/react@{v_react}.js",
+                    f"deps/react-dom@{v_reactdom}.js",
+                    "deps/prop-types@15.8.1.js",
+                ],
+            },
+            "namespace": "dash",
+        }
+    ]
+
 
+_env_react_version = os.getenv("REACT_VERSION")
+if _env_react_version:
+    _set_react_version(_env_react_version)
+    print(f"EXPERIMENTAL: Using react version from env: {_env_react_version}")
+else:
+    _set_react_version("16.14.0", "16.14.0")
 
 _js_dist = [
     {

diff --git a/dash/dash-renderer/init.template b/dash/dash-renderer/init.template
@@ -1,39 +1,63 @@
+import os
+
 __version__ = "$version"
 
-_js_dist_dependencies = [
-    {
-        "external_url": {
-            "prod": [
-                "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
-                "https://unpkg.com/react@$react/umd/react.production.min.js",
-                "https://unpkg.com/react-dom@$reactdom/umd/react-dom.production.min.js",
-                "https://unpkg.com/prop-types@$proptypes/prop-types.min.js",
-            ],
-            "dev": [
-                "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
-                "https://unpkg.com/react@$react/umd/react.development.js",
-                "https://unpkg.com/react-dom@$reactdom/umd/react-dom.development.js",
-                "https://unpkg.com/prop-types@$proptypes/prop-types.js",
-            ],
-        },
-        "relative_package_path": {
-            "prod": [
-                "deps/polyfill@$polyfill.min.js",
-                "deps/react@$react.min.js",
-                "deps/react-dom@$reactdom.min.js",
-                "deps/prop-types@$proptypes.min.js",
-            ],
-            "dev": [
-                "deps/polyfill@$polyfill.min.js",
-                "deps/react@$react.js",
-                "deps/react-dom@$reactdom.js",
-                "deps/prop-types@$proptypes.js",
-            ],
-        },
-        "namespace": "dash",
-    }
-]
+_available_react_versions = {"$react", $extra_react_versions}
+_available_reactdom_versions = {"$reactdom", $extra_reactdom_versions}
+_js_dist_dependencies = []  # to be set by _set_react_version
+
+
+def _set_react_version(v_react, v_reactdom=None):
+    if not v_reactdom:
+        v_reactdom = v_react
+
+    react_err = f"looking for one of {_available_react_versions}, found {v_react}"
+    reactdom_err = (
+        f"looking for one of {_available_reactdom_versions}, found {v_reactdom}"
+    )
+    assert v_react in _available_react_versions, react_err
+    assert v_reactdom in _available_reactdom_versions, reactdom_err
+
+    _js_dist_dependencies[:] = [
+        {
+            "external_url": {
+                "prod": [
+                    "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
+                    f"https://unpkg.com/react@{v_react}/umd/react.production.min.js",
+                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.production.min.js",
+                    "https://unpkg.com/prop-types@$proptypes/prop-types.min.js",
+                ],
+                "dev": [
+                    "https://unpkg.com/@babel/polyfill@$polyfill/dist/polyfill.min.js",
+                    f"https://unpkg.com/react@{v_react}/umd/react.development.js",
+                    f"https://unpkg.com/react-dom@{v_reactdom}/umd/react-dom.development.js",
+                    "https://unpkg.com/prop-types@$proptypes/prop-types.js",
+                ],
+            },
+            "relative_package_path": {
+                "prod": [
+                    "deps/polyfill@$polyfill.min.js",
+                    f"deps/react@{v_react}.min.js",
+                    f"deps/react-dom@{v_reactdom}.min.js",
+                    "deps/prop-types@$proptypes.min.js",
+                ],
+                "dev": [
+                    "deps/polyfill@$polyfill.min.js",
+                    f"deps/react@{v_react}.js",
+                    f"deps/react-dom@{v_reactdom}.js",
+                    "deps/prop-types@$proptypes.js",
+                ],
+            },
+            "namespace": "dash",
+        }
+    ]
+
 
+_env_react_version = os.getenv("REACT_VERSION")
+if _env_react_version:
+    _set_react_version(_env_react_version)
+else:
+    _set_react_version("$react", "$reactdom")
 
 _js_dist = [
     {