Merge pull request #2785 from plotly/master-2.16.1

Master 2.16.1

.github/CODEOWNERS

@@ -1,3 +1,3 @@
 # These owners will be the default owners for everything in
 # the repo. Unless a later match takes precedence
-* @alexcjohnson
+* @alexcjohnson @T4rk1n @ndrezn

CHANGELOG.md

@@ -2,6 +2,12 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## [2.16.1] - 2024-03-06
+
+## Fixed
+
+- [#2783](https://github.com/plotly/dash/pull/2783) Remove dynamic loading.
+
 ## [2.16.0] - 2024-03-01
 
 ## Fixed

dash/_dash_renderer.py

@@ -1,6 +1,6 @@
 import os
 
-__version__ = "1.19.0"
+__version__ = "1.19.1"
 
 _available_react_versions = {"16.14.0", "18.2.0"}
 _available_reactdom_versions = {"16.14.0", "18.2.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/dash-renderer@1.19.0"
+        "external_url": "https://unpkg.com/dash-renderer@1.19.1"
         "/build/dash_renderer.min.js",
         "namespace": "dash",
     },

dash/_validate.py

@@ -1,3 +1,4 @@
+import sys
 from collections.abc import MutableSequence
 import re
 from textwrap import dedent
@@ -356,6 +357,13 @@ def check_obsolete(kwargs):
                 See https://dash.plotly.com for details.
                 """
             )
+        if key in ["dynamic_loading", "preloaded_libraries"]:
+            # Only warns as this was only available for a short time.
+            print(
+                f"{key} has been removed and no longer a valid keyword argument in Dash.",
+                file=sys.stderr,
+            )
+            continue
         # any other kwarg mimic the built-in exception
         raise TypeError(f"Dash() got an unexpected keyword argument '{key}'")
 

dash/dash-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-renderer",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "description": "render dash components in react",
   "main": "build/dash_renderer.min.js",
   "scripts": {

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

@@ -1,12 +1,6 @@
 import {batch, connect} from 'react-redux';
 import {includes, isEmpty} from 'ramda';
-import React, {
-    useEffect,
-    useRef,
-    useState,
-    createContext,
-    useCallback
-} from 'react';
+import React, {useEffect, useRef, useState, createContext} from 'react';
 import PropTypes from 'prop-types';
 import TreeContainer from './TreeContainer';
 import GlobalErrorContainer from './components/error/GlobalErrorContainer.react';
@@ -27,7 +21,6 @@ import {getAppState} from './reducers/constants';
 import {STATUS} from './constants/constants';
 import {getLoadingState, getLoadingHash} from './utils/TreeContainer';
 import wait from './utils/wait';
-import LibraryManager from './libraries/LibraryManager';
 
 export const DashContext = createContext({});
 
@@ -53,10 +46,6 @@ const UnconnectedContainer = props => {
     if (!events.current) {
         events.current = new EventEmitter();
     }
-
-    const [libraryReady, setLibraryReady] = useState(false);
-    const onLibraryReady = useCallback(() => setLibraryReady(true), []);
-
     const renderedTree = useRef(false);
 
     const propsRef = useRef({});
@@ -71,9 +60,7 @@ const UnconnectedContainer = props => {
         })
     });
 
-    useEffect(
-        storeEffect.bind(null, props, events, setErrorLoading, libraryReady)
-    );
+    useEffect(storeEffect.bind(null, props, events, setErrorLoading));
 
     useEffect(() => {
         if (renderedTree.current) {
@@ -130,23 +117,14 @@ const UnconnectedContainer = props => {
         content = <div className='_dash-loading'>Loading...</div>;
     }
 
-    return (
-        <LibraryManager
-            requests_pathname_prefix={config.requests_pathname_prefix}
-            onReady={onLibraryReady}
-            ready={libraryReady}
-            layout={layoutRequest && layoutRequest.content}
-        >
-            {config && config.ui === true ? (
-                <GlobalErrorContainer>{content}</GlobalErrorContainer>
-            ) : (
-                content
-            )}
-        </LibraryManager>
+    return config && config.ui === true ? (
+        <GlobalErrorContainer>{content}</GlobalErrorContainer>
+    ) : (
+        content
     );
 };
 
-function storeEffect(props, events, setErrorLoading, libraryReady) {
+function storeEffect(props, events, setErrorLoading) {
     const {
         appLifecycle,
         dependenciesRequest,
@@ -165,7 +143,7 @@ function storeEffect(props, events, setErrorLoading, libraryReady) {
             }
             dispatch(apiThunk('_dash-layout', 'GET', 'layoutRequest'));
         } else if (layoutRequest.status === STATUS.OK) {
-            if (isEmpty(layout) && libraryReady) {
+            if (isEmpty(layout)) {
                 if (typeof hooks.layout_post === 'function') {
                     hooks.layout_post(layoutRequest.content);
                 }
@@ -208,8 +186,7 @@ function storeEffect(props, events, setErrorLoading, libraryReady) {
             layoutRequest.status === STATUS.OK &&
             !isEmpty(layout) &&
             // Hasn't already hydrated
-            appLifecycle === getAppState('STARTED') &&
-            libraryReady
+            appLifecycle === getAppState('STARTED')
         ) {
             let hasError = false;
             try {
@@ -258,8 +235,7 @@ const Container = connect(
         graphs: state.graphs,
         history: state.history,
         error: state.error,
-        config: state.config,
-        paths: state.paths
+        config: state.config
     }),
     dispatch => ({dispatch})
 )(UnconnectedContainer);

dash/dash-renderer/src/TreeContainer.js

@@ -1,44 +1,79 @@
 import React, {Component, memo, useContext} from 'react';
 import PropTypes from 'prop-types';
+import Registry from './registry';
+import {propTypeErrorHandler} from './exceptions';
 import {
     addIndex,
     assoc,
     assocPath,
     concat,
     dissoc,
     equals,
-    has,
     isEmpty,
     isNil,
+    has,
     keys,
     map,
     mapObjIndexed,
-    path as rpath,
-    pathOr,
+    mergeRight,
     pick,
     pickBy,
     propOr,
+    path as rpath,
+    pathOr,
     type
 } from 'ramda';
-import {batch} from 'react-redux';
-
 import {notifyObservers, updateProps, onError} from './actions';
 import isSimpleComponent from './isSimpleComponent';
 import {recordUiEdit} from './persistence';
 import ComponentErrorBoundary from './components/error/ComponentErrorBoundary.react';
+import checkPropTypes from './checkPropTypes';
 import {getWatchedKeys, stringifyId} from './actions/dependencies';
 import {
     getLoadingHash,
     getLoadingState,
     validateComponent
 } from './utils/TreeContainer';
 import {DashContext} from './APIController.react';
-import LibraryComponent from './libraries/LibraryComponent';
+import {batch} from 'react-redux';
 
 const NOT_LOADING = {
     is_loading: false
 };
 
+function CheckedComponent(p) {
+    const {element, extraProps, props, children, type} = p;
+
+    const errorMessage = checkPropTypes(
+        element.propTypes,
+        props,
+        'component prop',
+        element
+    );
+    if (errorMessage) {
+        propTypeErrorHandler(errorMessage, props, type);
+    }
+
+    return createElement(element, props, extraProps, children);
+}
+
+CheckedComponent.propTypes = {
+    children: PropTypes.any,
+    element: PropTypes.any,
+    layout: PropTypes.any,
+    props: PropTypes.any,
+    extraProps: PropTypes.any,
+    id: PropTypes.string
+};
+
+function createElement(element, props, extraProps, children) {
+    const allProps = mergeRight(props, extraProps);
+    if (Array.isArray(children)) {
+        return React.createElement(element, allProps, ...children);
+    }
+    return React.createElement(element, allProps, children);
+}
+
 function isDryComponent(obj) {
     return (
         type(obj) === 'Object' &&
@@ -215,6 +250,8 @@ class BaseTreeContainer extends Component {
         }
         validateComponent(_dashprivate_layout);
 
+        const element = Registry.resolve(_dashprivate_layout);
+
         // Hydrate components props
         const childrenProps = pathOr(
             [],
@@ -418,14 +455,17 @@ class BaseTreeContainer extends Component {
                 dispatch={_dashprivate_dispatch}
                 error={_dashprivate_error}
             >
-                <LibraryComponent
-                    children={children}
-                    type={_dashprivate_layout.type}
-                    namespace={_dashprivate_layout.namespace}
-                    props={props}
-                    extraProps={extraProps}
-                    props_check={_dashprivate_config.props_check}
-                />
+                {_dashprivate_config.props_check ? (
+                    <CheckedComponent
+                        children={children}
+                        element={element}
+                        props={props}
+                        extraProps={extraProps}
+                        type={_dashprivate_layout.type}
+                    />
+                ) : (
+                    createElement(element, props, extraProps, children)
+                )}
             </ComponentErrorBoundary>
         );
     }