setProps and rendered event ordering causing unsent callbacks (#1415)

Author: Marc-Andre-Rivet

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