diff --git a/@plotly/dash-test-components/babel.config.js b/@plotly/dash-test-components/babel.config.js
index 37c94a310f..dcf4bdf555 100644
--- a/@plotly/dash-test-components/babel.config.js
+++ b/@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 };
diff --git a/@plotly/dash-test-components/package-lock.json b/@plotly/dash-test-components/package-lock.json
index e99d73699c..b97ea9647d 100644
--- a/@plotly/dash-test-components/package-lock.json
+++ b/@plotly/dash-test-components/package-lock.json
@@ -1177,6 +1177,18 @@
"to-fast-properties": "^2.0.0"
}
},
+ "@plotly/dash-component-plugins": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/@plotly/dash-component-plugins/-/dash-component-plugins-1.2.0.tgz",
+ "integrity": "sha512-HnDyE5b1oh5l6vkZ/cd1Z/b7E4GeANLTMEeDom4WIeBYcJ/fH2PBAytZzgHXNsDYDJrMRPgfyiC7Y7jBIW4edA==",
+ "dev": true
+ },
+ "@plotly/webpack-dash-dynamic-import": {
+ "version": "1.1.5",
+ "resolved": "https://registry.npmjs.org/@plotly/webpack-dash-dynamic-import/-/webpack-dash-dynamic-import-1.1.5.tgz",
+ "integrity": "sha512-WvICYMoUgL3Gk6v2xwcF+zge8fRQ6DjpftVgtFflScdsek+B0LjydTU5EKCo8180pIUJE5WqHmSO+wYlw+a3mw==",
+ "dev": true
+ },
"@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
diff --git a/@plotly/dash-test-components/package.json b/@plotly/dash-test-components/package.json
index 7af18b1e0a..bd6ebb27ad 100644
--- a/@plotly/dash-test-components/package.json
+++ b/@plotly/dash-test-components/package.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",
diff --git a/@plotly/dash-test-components/src/components/AsyncComponent.js b/@plotly/dash-test-components/src/components/AsyncComponent.js
new file mode 100644
index 0000000000..702dc1538e
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/AsyncComponent.js
@@ -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 => (
+
+);
+
+const RealAsyncComponent = asyncDecorator(AsyncComponent, asyncComponentLoader);
+
+AsyncComponent.propTypes = {
+ id: PropTypes.string,
+ value: PropTypes.string
+};
+
+AsyncComponent.defaultProps = {};
+
+export default AsyncComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/components/CollapseComponent.js b/@plotly/dash-test-components/src/components/CollapseComponent.js
new file mode 100644
index 0000000000..ce9260215d
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/CollapseComponent.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+const CollapseComponent = props => (
+ {display ? props.children : null}
+);
+
+CollapseComponent.propTypes = {
+ children: PropTypes.node,
+ display: PropTypes.bool,
+ id: PropTypes.string
+};
+
+CollapseComponent.defaultProps = {
+ display: false
+};
+
+export default CollapseComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/components/DelayedEventComponent.js b/@plotly/dash-test-components/src/components/DelayedEventComponent.js
new file mode 100644
index 0000000000..d83f658f48
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/DelayedEventComponent.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DelayedEventComponent = ({ id, n_clicks, setProps }) => (