adjusting setProps.ts -> clientsideFunctions.ts and adding test for using setProps

Author: BSd3v

dash/dash-renderer/src/index.js

@@ -1,5 +1,5 @@
 import {DashRenderer} from './DashRenderer';
-import './utils/setProps';
+import './utils/clientsideFunctions';
 
 // make DashRenderer globally available
 window.DashRenderer = DashRenderer;

dash/dash-renderer/src/utils/setProps.ts renamed to dash/dash-renderer/src/utils/clientsideFunctions.ts

@@ -1,22 +1,24 @@
 import {updateProps, notifyObservers} from '../actions/index';
 import {getPath} from '../actions/paths';
 
-const setProps = (updates: {}) => {
+const setProps = (updates: []) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     const ds = (window.dash_stores = window.dash_stores || []);
     for (let y = 0; y < ds.length; y++) {
         const {dispatch, getState} = ds[y];
         const {paths} = getState();
-        Object.entries(updates).forEach(([componentId, props]) => {
-            const componentPath = getPath(paths, componentId);
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        updates.forEach(({id, ...props}) => {
+            const componentPath = getPath(paths, id);
             dispatch(
                 updateProps({
                     props,
                     itempath: componentPath
                 })
             );
-            dispatch(notifyObservers({id: componentId, props}));
+            dispatch(notifyObservers({id, props}));
         });
     }
 };

package.json

@@ -8,8 +8,8 @@
     "private::initialize.renderer": "cd dash/dash-renderer && npm ci",
     "private::cibuild.components": "python dash/development/update_components.py 'all' --ci True",
     "private::build.components": "python dash/development/update_components.py 'all'",
-    "private::cibuild.renderer": "cd dash/dash-renderer && renderer build && sh renderer-test.sh",
-    "private::build.renderer": "cd dash/dash-renderer && renderer build && sh renderer-test.sh",
+    "private::cibuild.renderer": "cd dash/dash-renderer && rimraf build/dash_renderer.min.js && renderer build && sh renderer-test.sh",
+    "private::build.renderer": "cd dash/dash-renderer && rimraf build/dash_renderer.min.js && renderer build && sh renderer-test.sh",
     "private::build.jupyterlab": "cd @plotly/dash-jupyterlab && jlpm install && jlpm build:pack",
     "private::lint.black": "node -e \"if ((process.env.PYVERSION || 'python312') !== 'python38'){process.exit(1)} \" || black dash tests --exclude metadata_test.py --check",
     "private::lint.flake8": "flake8 --exclude=metadata_test.py dash tests",

tests/integration/clientside/test_clientside_functions.py

@@ -0,0 +1,45 @@
+from dash import *
+import json
+from multiprocessing import Value
+import time
+
+def test_sp001_clientside_setprops(dash_duo):
+
+    call_count = Value("i", 0)
+
+    app = Dash(__name__)
+
+    ids = [{'id': {'index': '1', 'type': 'test'}, 'children': ['rawr']}, {'id': 'two', 'children': 'this is a test'}, {'id': 'three', 'children': 'i see trees of green'}]
+
+    app.layout = html.Div([*[html.Div(id=x['id']) for x in ids], html.Div(id='four'), html.Button(id='setup', children='test setprops')])
+
+    app.clientside_callback(
+        """
+            () => {
+                window.dash_clientside.setProps(""" + json.dumps(ids) + """)
+                return window.dash_clientside.no_update
+            }
+        """,
+        Output('setup', 'id'),
+        Input('setup', 'n_clicks'),
+        prevent_initial_call=True
+    )
+
+    for x in ids:
+        @app.callback(Output(x['id'],'id', allow_duplicate=True), Output('four','children', allow_duplicate=True), Input(x['id'], 'children'),
+        State(x['id'], 'id'), prevent_initial_call=True)
+        def prinout(c, id):
+            call_count.value += 1
+            for y in ids:
+                if y['id'] == id:
+                    assert y['children'] == c
+            return no_update, call_count.value
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_text_to_equal("#setup", 'test setprops')
+    dash_duo.find_element("#setup").click()
+    time.sleep(1)
+    dash_duo.wait_for_text_to_equal("#two", 'this is a test')
+    dash_duo.wait_for_text_to_equal("#three", 'i see trees of green')
+    dash_duo.wait_for_text_to_equal("#four", '3')