Merge pull request #3175 from plotly/external-children

3.0 RC3 changes.

Author: T4rk1n

@plotly/dash-test-components/src/components/ExternalComponent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 
-const ExternalComponent = ({ id, text, input_id }) => {
+const ExternalComponent = ({ id, text, input_id, extra_component }) => {
     const ctx = window.dash_component_api.useDashContext();
     const ExternalWrapper = window.dash_component_api.ExternalWrapper;
 
@@ -15,6 +15,14 @@ const ExternalComponent = ({ id, text, input_id }) => {
                 value={text}
                 componentPath={[...ctx.componentPath, 'external']}
             />
+            {
+                extra_component &&
+                <ExternalWrapper
+                    componentType={extra_component.type}
+                    componentNamespace={extra_component.namespace}
+                    componentPath={[...ctx.componentPath, 'extra']}
+                    {...extra_component.props}
+            />}
         </div>
     )
 }
@@ -23,6 +31,11 @@ ExternalComponent.propTypes = {
     id: PropTypes.string,
     text: PropTypes.string,
     input_id: PropTypes.string,
+    extra_component: PropTypes.exact({
+        type: PropTypes.string,
+        namespace: PropTypes.string,
+        props: PropTypes.object, 
+    }),
 };
 
 export default ExternalComponent;

CHANGELOG.md

@@ -2,6 +2,19 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [3.0.0-rc3] - 2025-02-21
+
+## Added
+
+- [#3121](https://github.com/plotly/dash/pull/3121) Restyle and add version checker to dev tools.
+- [#3175](https://github.com/plotly/dash/pull/3175) Add `custom_data` hook.
+- [#3175](https://github.com/plotly/dash/pull/3175) Improved error for removed Dash app attribute, run_server and long_callback
+- [#3175](https://github.com/plotly/dash/pull/3175) Expose `stringifyId` in `window.dash_component_api`.
+
+## Fixed
+
+- [#3175](https://github.com/plotly/dash/pull/3175) Fix `ExternalWrapper` rendering children and support pattern matching ids.
+
 ## [3.0.0-rc2] - 2025-02-18
 
 ## Added

dash/_callback_context.py

@@ -304,6 +304,14 @@ def origin(self):
         """
         return _get_from_context("origin", "")
 
+    @property
+    @has_context
+    def custom_data(self):
+        """
+        Custom data set by hooks.custom_data.
+        """
+        return _get_from_context("custom_data", {})
+
 
 callback_context = CallbackContext()
 

dash/_dash_renderer.py

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "2.0.1"
+__version__ = "2.0.2"
 
 _available_react_versions = {"18.3.1", "18.2.0", "16.14.0"}
 _available_reactdom_versions = {"18.3.1", "18.2.0", "16.14.0"}
@@ -64,7 +64,7 @@ def _set_react_version(v_react, v_reactdom=None):
     {
         "relative_package_path": "dash-renderer/build/dash_renderer.min.js",
         "dev_package_path": "dash-renderer/build/dash_renderer.dev.js",
-        "external_url": "https://unpkg.com/[email protected].1"
+        "external_url": "https://unpkg.com/[email protected].2"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },

dash/_hooks.py

@@ -45,6 +45,7 @@ def __init__(self) -> None:
             "error": [],
             "callback": [],
             "index": [],
+            "custom_data": [],
         }
         self._js_dist = []
         self._css_dist = []
@@ -191,6 +192,28 @@ def wrap(func):
 
         return wrap
 
+    def custom_data(
+        self, namespace: str, priority: _t.Optional[int] = None, final=False
+    ):
+        """
+        Add data to the callback_context.custom_data property under the namespace.
+
+        The hook function takes the current context_value and before the ctx is set
+        and has access to the flask request context.
+        """
+
+        def wrap(func: _t.Callable[[_t.Dict], _t.Any]):
+            self.add_hook(
+                "custom_data",
+                func,
+                priority=priority,
+                final=final,
+                data={"namespace": namespace},
+            )
+            return func
+
+        return wrap
+
 
 hooks = _Hooks()
 

dash/_obsolete.py

@@ -0,0 +1,23 @@
+# pylint: disable=too-few-public-methods
+from .exceptions import ObsoleteAttributeException
+
+
+class ObsoleteAttribute:
+    def __init__(self, message: str, exc=ObsoleteAttributeException):
+        self.message = message
+        self.exc = exc
+
+
+class ObsoleteChecker:
+    _obsolete_attributes = {
+        "run_server": ObsoleteAttribute("app.run_server has been replaced by app.run"),
+        "long_callback": ObsoleteAttribute(
+            "app.long_callback has been  removed, use app.callback(..., background=True) instead"
+        ),
+    }
+
+    def __getattr__(self, name: str):
+        if name in self._obsolete_attributes:
+            err = self._obsolete_attributes[name]
+            raise err.exc(err.message)
+        return getattr(self, name)

dash/dash-renderer/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {
@@ -13,7 +13,7 @@
     "build:dev": "webpack",
     "build:local": "renderer build local",
     "build": "renderer build && npm run prepublishOnly",
-    "postbuild": "es-check es2018 ../deps/*.js build/*.js",
+    "postbuild": "es-check es2015 ../deps/*.js build/*.js",
     "test": "karma start karma.conf.js --single-run",
     "format": "run-s private::format.*",
     "lint": "run-s private::lint.* --continue-on-error"

dash/dash-renderer/package.json

@@ -6,7 +6,7 @@ import {getAction} from './constants';
 import cookie from 'cookie';
 import {validateCallbacksToLayout} from './dependencies';
 import {includeObservers, getLayoutCallbacks} from './dependencies_ts';
-import {getPath} from './paths';
+import {computePaths, getPath} from './paths';
 
 export const onError = createAction(getAction('ON_ERROR'));
 export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
@@ -21,6 +21,14 @@ export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
 export const insertComponent = createAction(getAction('INSERT_COMPONENT'));
 export const removeComponent = createAction(getAction('REMOVE_COMPONENT'));
 
+export const addComponentToLayout = payload => (dispatch, getState) => {
+    const {paths} = getState();
+    dispatch(insertComponent(payload));
+    dispatch(
+        setPaths(computePaths(payload.component, payload.componentPath, paths))
+    );
+};
+
 export const dispatchError = dispatch => (message, lines) =>
     dispatch(
         onError({

dash/dash-renderer/src/actions/index.js

@@ -3,6 +3,7 @@ import {DashContext, useDashContext} from './wrapper/DashContext';
 import {getPath} from './actions/paths';
 import {getStores} from './utils/stores';
 import ExternalWrapper from './wrapper/ExternalWrapper';
+import {stringifyId} from './actions/dependencies';
 
 /**
  * Get the dash props from a component path or id.
@@ -32,5 +33,6 @@ function getLayout(componentPathOrId: string[] | string): any {
     ExternalWrapper,
     DashContext,
     useDashContext,
-    getLayout
+    getLayout,
+    stringifyId
 };

dash/dash-renderer/src/dashApi.ts

@@ -1,9 +1,14 @@
 import React, {useState, useEffect} from 'react';
-import {useDispatch} from 'react-redux';
+import {batch, useDispatch} from 'react-redux';
 
 import {DashLayoutPath} from '../types/component';
 import DashWrapper from './DashWrapper';
-import {insertComponent, removeComponent} from '../actions';
+import {
+    addComponentToLayout,
+    notifyObservers,
+    removeComponent,
+    updateProps
+} from '../actions';
 
 type Props = {
     componentPath: DashLayoutPath;
@@ -21,18 +26,18 @@ function ExternalWrapper({
     componentPath,
     ...props
 }: Props) {
-    const dispatch = useDispatch();
+    const dispatch: any = useDispatch();
     const [inserted, setInserted] = useState(false);
 
     useEffect(() => {
         // Give empty props for the inserted components.
         // The props will come from the parent so they can be updated.
         dispatch(
-            insertComponent({
+            addComponentToLayout({
                 component: {
                     type: componentType,
                     namespace: componentNamespace,
-                    props: {}
+                    props: props
                 },
                 componentPath
             })
@@ -43,10 +48,17 @@ function ExternalWrapper({
         };
     }, []);
 
+    useEffect(() => {
+        batch(() => {
+            dispatch(updateProps({itempath: componentPath, props}));
+            dispatch(notifyObservers({id: props.id, props}));
+        });
+    }, [props]);
+
     if (!inserted) {
         return null;
     }
     // Render a wrapper with the actual props.
-    return <DashWrapper componentPath={componentPath} {...props} />;
+    return <DashWrapper componentPath={componentPath} />;
 }
 export default ExternalWrapper;

dash/dash-renderer/src/wrapper/ExternalWrapper.tsx

@@ -68,6 +68,7 @@
 from . import _get_app
 
 from ._grouping import map_grouping, grouping_len, update_args_group
+from ._obsolete import ObsoleteChecker
 
 from . import _pages
 from ._pages import (
@@ -207,7 +208,7 @@ def _do_skip(error):
 
 # pylint: disable=too-many-instance-attributes
 # pylint: disable=too-many-arguments, too-many-locals
-class Dash:
+class Dash(ObsoleteChecker):
     """Dash is a framework for building analytical web applications.
     No JavaScript required.
 
@@ -1388,6 +1389,10 @@ def dispatch(self):
             g.path = flask.request.full_path
             g.remote = flask.request.remote_addr
             g.origin = flask.request.origin
+            g.custom_data = AttributeDict({})
+
+            for hook in self._hooks.get_hooks("custom_data"):
+                g.custom_data[hook.data["namespace"]] = hook(g)
 
         except KeyError as missing_callback_function:
             msg = f"Callback function not found for output '{output}', perhaps you forgot to prepend the '@'?"

dash/dash.py

@@ -10,6 +10,10 @@ class ObsoleteKwargException(DashException):
     pass
 
 
+class ObsoleteAttributeException(DashException):
+    pass
+
+
 class NoLayoutException(DashException):
     pass
 

dash/exceptions.py

@@ -1 +1 @@
-__version__ = "3.0.0rc2"
+__version__ = "3.0.0rc3"

dash/version.py

@@ -1,4 +1,4 @@
-from dash import Dash, html, dcc, html, Input, Output, State
+from dash import Dash, html, dcc, html, Input, Output, State, MATCH
 from dash_test_components import ExternalComponent
 
 
@@ -8,7 +8,22 @@ def test_rext001_render_external_component(dash_duo):
         [
             dcc.Input(id="sync", value="synced"),
             html.Button("sync", id="sync-btn"),
-            ExternalComponent("ext", input_id="external", text="external"),
+            ExternalComponent(
+                id="ext",
+                input_id="external",
+                text="external",
+                extra_component={
+                    "type": "Div",
+                    "namespace": "dash_html_components",
+                    "props": {
+                        "id": "extra",
+                        "children": [
+                            html.Div("extra children", id={"type": "extra", "index": 1})
+                        ],
+                    },
+                },
+            ),
+            html.Div(html.Div(id={"type": "output", "index": 1}), id="out"),
         ]
     )
 
@@ -21,7 +36,20 @@ def test_rext001_render_external_component(dash_duo):
     def on_sync(_, value):
         return value
 
+    @app.callback(
+        Output({"type": "output", "index": MATCH}, "children"),
+        Input({"type": "extra", "index": MATCH}, "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def click(*_):
+        return "clicked"
+
     dash_duo.start_server(app)
     dash_duo.wait_for_text_to_equal("#external", "external")
     dash_duo.find_element("#sync-btn").click()
     dash_duo.wait_for_text_to_equal("#external", "synced")
+
+    dash_duo.wait_for_text_to_equal("#extra", "extra children")
+
+    dash_duo.find_element("#extra > div").click()
+    dash_duo.wait_for_text_to_equal("#out", "clicked")