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
 };