Merge pull request #126 from plotly/try-to-add-async

Add an option to generate async component

Author: Xing Han Lu

.gitignore

@@ -1,4 +1,6 @@
 # Created by .ignore support plugin (hsz.mobi)
+### Webpack
+.build_cache
 ### VisualStudioCode template
 .vscode/*
 !.vscode/settings.json

README.md

@@ -41,6 +41,12 @@ to generate the components in the `build:backends` script of the generated
 `package.json`.
 
 
+## Advanced customization
+
+### Shared cache groups for async chunks
+
+Shared async chunks for code that repeats across multiple async chunks is already supported through our custom `webpack.config.js` optimizations. You can leverage it by manually the path of `{{cookiecutter.project_shortname}}-shared.js` to `_js_dist` inside `{{cookiecutter.project_shortname}}/__init__.py` (as well as the associated external URL).
+
 ## More Resources
 
 - Found a bug or have a feature request? [Create an issue](https://github.com/plotly/dash-component-boilerplate/issues/new)

cookiecutter.json

@@ -8,6 +8,7 @@
   "author_email": "Enter your email (For package.json)",
   "github_org": "",
   "description": "Project Description",
+  "use_async": ["False", "True"],
   "license": [
     "MIT License",
     "BSD License",

hooks/post_gen_project.py

@@ -3,10 +3,12 @@
 import shlex
 import sys
 import os
+import shutil
 import subprocess
 
 install_deps = '{{cookiecutter.install_dependencies}}'
 project_shortname = '{{cookiecutter.project_shortname}}'
+use_async = '{{cookiecutter.use_async}}'
 
 
 is_windows = sys.platform == 'win32'
@@ -33,6 +35,22 @@ def _execute_command(cmd):
     return status
 
 
+
+# Remove the cookiecutter_templates directory since it only contains
+# files that are conditionally included.
+template_dir = os.path.join(os.getcwd(), 'cookiecutter_templates')
+shutil.rmtree(template_dir)
+
+print("\n\n\nuse_async")
+print(use_async)
+# If it doesn't use async, we can remove the fragments and lazyloader.js
+if use_async != "True":
+    print('use_async is set to False, your component will not be lazy loaded and fragments will not be created.')
+    shutil.rmtree(os.path.join(os.getcwd(), 'src', 'lib', 'fragments'))
+    os.remove(os.path.join(os.getcwd(), 'src', 'lib', 'LazyLoader.js'))
+
+
+
 if install_deps != 'True':
     print('`install_dependencies` is false!!', file=sys.stderr)
     print('Please create a venv in your project root'
@@ -90,4 +108,5 @@ def _execute_command(cmd):
 
 print('\n{} ready!\n'.format(project_shortname))
 
+
 sys.exit(0)

{{cookiecutter.project_shortname}}/.gitignore

@@ -1,4 +1,6 @@
 # Created by .ignore support plugin (hsz.mobi)
+### Webpack
+.build_cache
 ### VisualStudioCode template
 .vscode/*
 !.vscode/settings.json

{{cookiecutter.project_shortname}}/MANIFEST.in

@@ -1,5 +1,9 @@
 include {{cookiecutter.project_shortname}}/{{cookiecutter.project_shortname}}.min.js
 include {{cookiecutter.project_shortname}}/{{cookiecutter.project_shortname}}.min.js.map
+include {{cookiecutter.project_shortname}}/async-*.js
+include {{cookiecutter.project_shortname}}/async-*.js.map
+include {{cookiecutter.project_shortname}}/*-shared.js
+include {{cookiecutter.project_shortname}}/*-shared.js.map
 include {{cookiecutter.project_shortname}}/metadata.json
 include {{cookiecutter.project_shortname}}/package-info.json
 include README.md

{{cookiecutter.project_shortname}}/cookiecutter_templates/AsyncComponent.react.js

@@ -0,0 +1,49 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import { {{cookiecutter.component_name}} as RealComponent } from '../LazyLoader';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+export default class {{cookiecutter.component_name}} extends Component {
+    render() {
+        return (
+            <React.Suspense fallback={null}>
+                <RealComponent {...this.props}/>
+            </React.Suspense>
+        );
+    }
+}
+
+{{cookiecutter.component_name}}.defaultProps = {};
+
+{{cookiecutter.component_name}}.propTypes = {
+    /**
+     * The ID used to identify this component in Dash callbacks.
+     */
+    id: PropTypes.string,
+
+    /**
+     * A label that will be printed when this component is rendered.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * The value displayed in the input.
+     */
+    value: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+
+export const defaultProps = {{cookiecutter.component_name}}.defaultProps;
+export const propTypes = {{cookiecutter.component_name}}.propTypes;

{{cookiecutter.project_shortname}}/cookiecutter_templates/Component.react.js

@@ -0,0 +1,61 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * ExampleComponent is an example component.
+ * It takes a property, `label`, and
+ * displays it.
+ * It renders an input with the property `value`
+ * which is editable by the user.
+ */
+export default class {{cookiecutter.component_name}} extends Component {
+    render() {
+        const {id, label, setProps, value} = this.props;
+
+        return (
+            <div id={id}>
+                ExampleComponent: {label}&nbsp;
+                <input
+                    value={value}
+                    onChange={
+                        /*
+                         * Send the new value to the parent component.
+                         * setProps is a prop that is automatically supplied
+                         * by dash's front-end ("dash-renderer").
+                         * In a Dash app, this will update the component's
+                         * props and send the data back to the Python Dash
+                         * app server if a callback uses the modified prop as
+                         * Input or State.
+                         */
+                        e => setProps({ value: e.target.value })
+                    }
+                />
+            </div>
+        );
+    }
+}
+
+{{cookiecutter.component_name}}.defaultProps = {};
+
+{{cookiecutter.component_name}}.propTypes = {
+    /**
+     * The ID used to identify this component in Dash callbacks.
+     */
+    id: PropTypes.string,
+
+    /**
+     * A label that will be printed when this component is rendered.
+     */
+    label: PropTypes.string.isRequired,
+
+    /**
+     * The value displayed in the input.
+     */
+    value: PropTypes.string,
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};

{{cookiecutter.project_shortname}}/package.json

@@ -33,6 +33,8 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.4",
     "@babel/preset-env": "^7.5.4",
     "@babel/preset-react": "^7.0.0",
+    "@plotly/webpack-dash-dynamic-import": "^1.2.0",
+    "@plotly/dash-component-plugins": "^1.2.0",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "copyfiles": "^2.1.1",
@@ -48,6 +50,7 @@
     "react-dom": "^16.8.6",
     "styled-jsx": "^3.2.1",
     "style-loader": "^0.23.1",
+    "terser-webpack-plugin": "^2.3.0",
     "webpack": "4.36.1",
     "webpack-cli": "3.3.6",
     "webpack-serve": "3.1.0"