Merge branch 'dev' into callback-graph-robustness

Author: alexcjohnson

@plotly/dash-test-components/babel.config.js

@@ -3,4 +3,8 @@ const presets = [
     '@babel/preset-react'
 ];
 
-module.exports = { presets };
+const plugins = [
+    '@babel/plugin-syntax-dynamic-import'
+];
+
+module.exports = { presets, plugins };

@plotly/dash-test-components/package-lock.json

@@ -22,8 +22,11 @@
   "devDependencies": {
     "@babel/cli": "^7.4.0",
     "@babel/core": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
+    "@plotly/dash-component-plugins": "^1.2.0",
+    "@plotly/webpack-dash-dynamic-import": "^1.1.5",
     "babel-loader": "^8.0.5",
     "npm-run-all": "^4.1.5",
     "react": "16.13.0",

@plotly/dash-test-components/package.json

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { Suspense } from 'react';
+import { asyncDecorator } from '@plotly/dash-component-plugins';
+import asyncComponentLoader from './../fragments/AsyncComponentLoader';
+
+const AsyncComponent = props => (<Suspense fallback={null}>
+    <RealAsyncComponent {...props} />
+</Suspense>);
+
+const RealAsyncComponent = asyncDecorator(AsyncComponent, asyncComponentLoader);
+
+AsyncComponent.propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string
+};
+
+AsyncComponent.defaultProps = {};
+
+export default AsyncComponent;

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

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+const CollapseComponent = props => (<Fragment>
+    {display ? props.children : null}
+</Fragment>);
+
+CollapseComponent.propTypes = {
+    children: PropTypes.node,
+    display: PropTypes.bool,
+    id: PropTypes.string
+};
+
+CollapseComponent.defaultProps = {
+    display: false
+};
+
+export default CollapseComponent;

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

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DelayedEventComponent = ({ id, n_clicks, setProps }) => (<button
+    id={id}
+    onClick={() => setTimeout(() => setProps({ n_clicks: n_clicks + 1 }), 20)}
+/>);
+
+DelayedEventComponent.propTypes = {
+    id: PropTypes.string,
+    n_clicks: PropTypes.number
+};
+
+DelayedEventComponent.defaultProps = {
+    n_clicks: 0
+};
+
+export default DelayedEventComponent;

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

@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+const FragmentComponent = props => (<Fragment>
+    {props.children}
+</Fragment>);
+
+FragmentComponent.propTypes = {
+    children: PropTypes.node,
+    id: PropTypes.string
+};
+
+FragmentComponent.defaultProps = {};
+
+export default FragmentComponent;

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

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import { asyncDecorator } from '@plotly/dash-component-plugins';
+
+/**
+ * MyComponent description
+ */
+const AsyncComponent = ({ value }) => (<Fragment>
+    {value}
+</Fragment>);
+
+AsyncComponent.propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string
+};
+
+AsyncComponent.defaultProps = {};
+
+export default AsyncComponent;

@plotly/dash-test-components/src/fragments/AsyncComponent.js

@@ -0,0 +1 @@
+export default () => import('./AsyncComponent');

@plotly/dash-test-components/src/fragments/AsyncComponentLoader.js

@@ -1,8 +1,18 @@
+import AsyncComponent from './components/AsyncComponent';
+import CollapseComponent from './components/CollapseComponent';
+import DelayedEventComponent from './components/DelayedEventComponent';
+import FragmentComponent from './components/FragmentComponent';
 import StyledComponent from './components/StyledComponent';
 import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 
 
 export {
-    StyledComponent, MyPersistedComponent, MyPersistedComponentNested
+    AsyncComponent,
+    CollapseComponent,
+    DelayedEventComponent,
+    FragmentComponent,
+    MyPersistedComponent,
+    MyPersistedComponentNested,
+    StyledComponent
 };

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

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
 
 const packagejson = require('./package.json');
 
@@ -14,6 +15,7 @@ module.exports = {
     },
     output: {
         path: path.resolve(__dirname, dashLibraryName),
+        chunkFilename: '[name].js',
         filename: `${dashLibraryName}.js`,
         library: dashLibraryName,
         libraryTarget: 'window',
@@ -28,5 +30,23 @@ module.exports = {
                 }
             }
         ],
-    }
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'async',
+            name: true,
+            cacheGroups: {
+                async: {
+                    chunks: 'async',
+                    minSize: 0,
+                    name(module, chunks, cacheGroupKey) {
+                        return `${cacheGroupKey}-${chunks[0].name}`;
+                    }
+                }
+            }
+        }
+    },
+    plugins: [
+        new WebpackDashDynamicImport()
+    ]
 };

@plotly/dash-test-components/webpack.config.js

@@ -2,7 +2,11 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
-## [UNRELEASED]
+## Unreleased
+### Fixed
+- [#1415](https://github.com/plotly/dash/pull/1415) Fix a regression with some layouts callbacks involving dcc.Tabs, not yet loaded dash_table.DataTable and dcc.Graph to not be called
+
+## [1.16.1] - 2020-09-16
 ### Changed
 - [#1376](https://github.com/plotly/dash/pull/1376) Extends the `getTransform` logic in the renderer to handle `persistenceTransforms` for both nested and non-nested persisted props. This was used to to fix [dcc#700](https://github.com/plotly/dash-core-components/issues/700) in conjunction with [dcc#854](https://github.com/plotly/dash-core-components/pull/854) by using persistenceTransforms to strip the time part of the datetime so that datepickers can persist when defined in callbacks.
 

CHANGELOG.md

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

dash-renderer/package-lock.json

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useState} from 'react';
 import {Provider} from 'react-redux';
 
-import initializeStore from './store';
+import Store from './store';
 import AppContainer from './AppContainer.react';
 
-const store = initializeStore();
-
 const AppProvider = ({hooks}: any) => {
+    const [{store}] = useState(() => new Store());
+
     return (
         <Provider store={store}>
             <AppContainer hooks={hooks} />

dash-renderer/package.json

@@ -138,14 +138,6 @@ class BaseTreeContainer extends Component {
             // for persistence
             recordUiEdit(_dashprivate_layout, newProps, _dashprivate_dispatch);
 
-            // Always update this component's props
-            _dashprivate_dispatch(
-                updateProps({
-                    props: changedProps,
-                    itempath: _dashprivate_path
-                })
-            );
-
             // Only dispatch changes to Dash if a watched prop changed
             if (watchedKeys.length) {
                 _dashprivate_dispatch(
@@ -155,6 +147,14 @@ class BaseTreeContainer extends Component {
                     })
                 );
             }
+
+            // Always update this component's props
+            _dashprivate_dispatch(
+                updateProps({
+                    props: changedProps,
+                    itempath: _dashprivate_path
+                })
+            );
         }
     }