Merge branch 'dev' into add-more-tests

Author: T4rk1n

CHANGELOG.md

@@ -5,13 +5,19 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## [UNRELEASED]
 
 ## Added
+
+- [#2795](https://github.com/plotly/dash/pull/2795) Allow list of components to be passed as layout.
 - [2760](https://github.com/plotly/dash/pull/2760) New additions to dcc.Loading resolving multiple issues:
   - `delay_show` and `delay_hide` props  to prevent flickering during brief loading periods (similar to Dash Bootstrap Components dbc.Spinner)
   - `overlay_style` for styling the loading overlay,  such as setting  visibility and opacity for children
   - `target_components` specifies components/props triggering the loading spinner
   - `custom_spinner`  enables using a custom component for loading messages instead of built-in spinners
   - `display`  overrides the loading status with options for "show," "hide," or "auto"
 
+## Fixed
+
+- [#2362](https://github.com/plotly/dash/pull/2362) Global namespace not polluted any more when loading clientside callbacks.
+
 ## [2.16.1] - 2024-03-06
 
 ## Fixed

components/dash-core-components/package.json

@@ -103,6 +103,6 @@
     "react-dom": ">=16"
   },
   "browserslist": [
-    "last 8 years and not dead"
+    "last 9 years and not dead"
   ]
 }

components/dash-html-components/package.json

@@ -59,6 +59,6 @@
     "/dash_html_components/*{.js,.map}"
   ],
   "browserslist": [
-    "last 8 years and not dead"
+    "last 9 years and not dead"
   ]
 }

components/dash-table/package.json

@@ -125,6 +125,6 @@
     "npm": ">=6.1.0"
   },
   "browserslist": [
-    "last 8 years and not dead"
+    "last 9 years and not dead"
   ]
 }

dash/_callback.py

@@ -502,9 +502,11 @@ def add_context(*args, **kwargs):
 
 
 _inline_clientside_template = """
-var clientside = window.dash_clientside = window.dash_clientside || {{}};
-var ns = clientside["{namespace}"] = clientside["{namespace}"] || {{}};
-ns["{function_name}"] = {clientside_function};
+(function() {{
+    var clientside = window.dash_clientside = window.dash_clientside || {{}};
+    var ns = clientside["{namespace}"] = clientside["{namespace}"] || {{}};
+    ns["{function_name}"] = {clientside_function};
+}})();
 """
 
 

dash/_validate.py

@@ -398,12 +398,13 @@ def validate_index(name, checks, index):
 
 
 def validate_layout_type(value):
-    if not isinstance(value, (Component, patch_collections_abc("Callable"))):
+    if not isinstance(
+        value, (Component, patch_collections_abc("Callable"), list, tuple)
+    ):
         raise exceptions.NoLayoutException(
             """
-            Layout must be a single dash component
+            Layout must be a single dash component, a list of dash components,
             or a function that returns a dash component.
-            Cannot be a tuple (are there any trailing commas?)
             """
         )
 
@@ -418,18 +419,34 @@ def validate_layout(layout, layout_value):
             """
         )
 
-    layout_id = stringify_id(getattr(layout_value, "id", None))
+    component_ids = set()
 
-    component_ids = {layout_id} if layout_id else set()
-    for component in layout_value._traverse():  # pylint: disable=protected-access
-        component_id = stringify_id(getattr(component, "id", None))
-        if component_id and component_id in component_ids:
-            raise exceptions.DuplicateIdError(
-                f"""
-                Duplicate component id found in the initial layout: `{component_id}`
-                """
-            )
-        component_ids.add(component_id)
+    def _validate(value):
+        def _validate_id(comp):
+            component_id = stringify_id(getattr(comp, "id", None))
+            if component_id and component_id in component_ids:
+                raise exceptions.DuplicateIdError(
+                    f"""
+                    Duplicate component id found in the initial layout: `{component_id}`
+                    """
+                )
+            component_ids.add(component_id)
+
+        _validate_id(value)
+
+        for component in value._traverse():  # pylint: disable=protected-access
+            _validate_id(component)
+
+    if isinstance(layout_value, (list, tuple)):
+        for component in layout_value:
+            if isinstance(component, (Component,)):
+                _validate(component)
+            else:
+                raise exceptions.NoLayoutException(
+                    "List of components as layout must be a list of components only."
+                )
+    else:
+        _validate(layout_value)
 
 
 def validate_template(template):

dash/dash-renderer/package.json

@@ -88,6 +88,6 @@
   ],
   "prettier": "@plotly/prettier-config-dash",
   "browserslist": [
-    "last 8 years and not dead"
+    "last 9 years and not dead"
   ]
 }

dash/dash-renderer/src/APIController.react.js

@@ -21,6 +21,7 @@ import {getAppState} from './reducers/constants';
 import {STATUS} from './constants/constants';
 import {getLoadingState, getLoadingHash} from './utils/TreeContainer';
 import wait from './utils/wait';
+import isSimpleComponent from './isSimpleComponent';
 
 export const DashContext = createContext({});
 
@@ -97,20 +98,44 @@ const UnconnectedContainer = props => {
 
         content = (
             <DashContext.Provider value={provider.current}>
-                <TreeContainer
-                    _dashprivate_error={error}
-                    _dashprivate_layout={layout}
-                    _dashprivate_loadingState={getLoadingState(
-                        layout,
-                        [],
-                        loadingMap
-                    )}
-                    _dashprivate_loadingStateHash={getLoadingHash(
-                        [],
-                        loadingMap
-                    )}
-                    _dashprivate_path={JSON.stringify([])}
-                />
+                {Array.isArray(layout) ? (
+                    layout.map((c, i) =>
+                        isSimpleComponent(c) ? (
+                            c
+                        ) : (
+                            <TreeContainer
+                                _dashprivate_error={error}
+                                _dashprivate_layout={c}
+                                _dashprivate_loadingState={getLoadingState(
+                                    c,
+                                    [i],
+                                    loadingMap
+                                )}
+                                _dashprivate_loadingStateHash={getLoadingHash(
+                                    [i],
+                                    loadingMap
+                                )}
+                                _dashprivate_path={`[${i}]`}
+                                key={i}
+                            />
+                        )
+                    )
+                ) : (
+                    <TreeContainer
+                        _dashprivate_error={error}
+                        _dashprivate_layout={layout}
+                        _dashprivate_loadingState={getLoadingState(
+                            layout,
+                            [],
+                            loadingMap
+                        )}
+                        _dashprivate_loadingStateHash={getLoadingHash(
+                            [],
+                            loadingMap
+                        )}
+                        _dashprivate_path={'[]'}
+                    />
+                )}
             </DashContext.Provider>
         );
     } else {
@@ -216,7 +241,7 @@ UnconnectedContainer.propTypes = {
     graphs: PropTypes.object,
     hooks: PropTypes.object,
     layoutRequest: PropTypes.object,
-    layout: PropTypes.object,
+    layout: PropTypes.any,
     loadingMap: PropTypes.any,
     history: PropTypes.any,
     error: PropTypes.object,

requires-ci.txt

@@ -3,7 +3,7 @@ black==22.3.0
 dash-flow-example==0.0.5
 dash-dangerously-set-inner-html
 flake8==7.0.0
-flaky==3.7.0
+flaky==3.8.1
 flask-talisman==1.0.0
 mimesis<=11.1.0
 mock==4.0.3

tests/integration/clientside/test_clientside.py

@@ -35,6 +35,10 @@ def update_output(value):
     dash_duo.wait_for_text_to_equal("#output-serverside", 'Server says "hello world"')
     dash_duo.wait_for_text_to_equal("#output-clientside", 'Client says "hello world"')
 
+    assert dash_duo.driver.execute_script("return 'dash_clientside' in window")
+    assert dash_duo.driver.execute_script("return !('clientside' in window)")
+    assert dash_duo.driver.execute_script("return !('ns' in window)")
+
 
 def test_clsd002_chained_serverside_clientside_callbacks(dash_duo):
     app = Dash(__name__, assets_folder="assets")