Async support - delay loading xlsx

.circleci/config.yml

@@ -31,7 +31,7 @@ jobs:
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev] --quiet
 
             - run:
@@ -107,7 +107,7 @@ jobs:
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev] --quiet
 
             - run:
@@ -212,7 +212,7 @@ jobs:
                 name: Install dependencies (dash)
                 command: |
                     . venv/bin/activate
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev,testing] --quiet
                     cd dash-main/dash-renderer && npm run build && pip install -e . && cd ../..
 

.config/webpack/base.js

@@ -1,12 +1,15 @@
-
 const path = require('path');
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
+
+const basePreprocessing = require('./base.preprocessing');
 const packagejson = require('./../../package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
+
 module.exports = (options = {}) => {
     const babel = options.babel || undefined;
-    const preprocessor = options.preprocessor || {};
+    const preprocessor = basePreprocessing(options.preprocessor);
     const mode = options.mode || 'development';
     const ts = options.ts || {};
 
@@ -24,6 +27,7 @@ module.exports = (options = {}) => {
         mode: mode,
         output: {
             path: path.resolve(__dirname, `./../../${dashLibraryName}`),
+            chunkFilename: '[name].js',
             filename: '[name].js',
             library: dashLibraryName,
             libraryTarget: 'window'
@@ -87,6 +91,20 @@ module.exports = (options = {}) => {
                 tests: path.resolve('./tests')
             },
             extensions: ['.js', '.ts', '.tsx']
-        }
+        },
+        optimization: {
+            splitChunks: {
+                chunks: 'async',
+                name: true,
+                cacheGroups: {
+                    async: {
+
+                    }
+                }
+            }
+        },
+        plugins: [
+            new WebpackDashDynamicImport()
+        ]
     };
 };

.config/webpack/base.preprocessing.js

@@ -0,0 +1,7 @@
+module.exports = ({ definitions, variables, ...options } = {}) => ({
+    ...options,
+    definitions: definitions || [],
+    variables: Object.assign({
+        mode: 'lazy'
+    }, variables || {})
+});

.storybook/webpack.config.js

@@ -1,8 +1,14 @@
 let babel = require('./babel.config.js');
 let config = require('./../.config/webpack/base.js')({
-    babel
+    babel,
+    preprocessor: {
+        variables: {
+            mode: 'eager'
+        }
+    }
 });
 
 config.externals = {};
+delete config.plugins;
 
 module.exports = config;

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Changed
+- [#554](https://github.com/plotly/dash-table/pull/554) Async loading of `xlsx` library on export
+
 ## [4.4.1] - 2019-08-17
 ### Fixed
 - [#618](https://github.com/plotly/dash-table/issues/618) Fix a bug with keyboard navigation not working correctly in certain circumstances when the table contains `readonly` columns.

MANIFEST.in

@@ -1,5 +1,7 @@
 include dash_table/bundle.js
 include dash_table/bundle.js.map
+include dash_table/async~*.js
+include dash_table/async~*.js.map
 include dash_table/metadata.json
 include dash_table/package-info.json
 include LICENSE

dash_table_base/__init__.py

@@ -44,6 +44,22 @@
         ).format(__version__),
         'namespace': package_name,
         'dynamic': True
+    },
+    {
+        'relative_package_path': 'async~export.js',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~export.js'
+        ).format(__version__),
+        'namespace': package_name,
+        'async': True
+    },
+    {
+        'relative_package_path': 'async~export.js.map',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~export.js.map'
+        ).format(__version__),
+        'namespace': package_name,
+        'dynamic': True
     }
 ]
 

package.json

@@ -15,11 +15,11 @@
     "preprivate::opentests": "run-s private::wait*",
     "preprivate::test.server": "run-s private::wait_dash*",
     "preprivate::test.standalone": "run-s private::wait_js",
-    "pretest.standalone": "run-s private::build:js-test",
+    "pretest.standalone": "run-s private::build:js-test-standalone",
     "private::build": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack --display-reasons --bail",
     "private::build:js": "run-s \"private::build -- --mode production\"",
-    "private::build:js-dev": "run-s \"private::build -- --mode development --config webpack.dev.config.js\"",
     "private::build:js-test": "run-s \"private::build -- --mode development --config webpack.test.config.js\"",
+    "private::build:js-test-standalone": "run-s \"private::build -- --mode development --config webpack.test.standalone.config.js\"",
     "private::build:js-test-watch": "run-s \"private::build -- --mode development --config webpack.test.config.js --watch\"",
     "private::build:py": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json --r-prefix 'dash'",
     "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
@@ -61,6 +61,7 @@
   "devDependencies": {
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
@@ -70,6 +71,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@percy/storybook": "^3.2.0",
+    "@plotly/webpack-dash-dynamic-import": "^1.0.0",
     "@storybook/cli": "^5.1.11",
     "@storybook/react": "^5.1.11",
     "@types/d3-format": "^1.3.1",

src/dash-table/LazyLoader.ts

@@ -0,0 +1,5 @@
+export default class LazyLoader {
+    public static get xlsx() {
+        return import(/* webpackChunkName: "export", webpackMode: "$${{mode}}" */ 'xlsx');
+    }
+}

src/dash-table/components/Export/index.tsx

@@ -1,7 +1,6 @@
-import XLSX from 'xlsx';
 import React from 'react';
 import { IDerivedData, Columns, ExportHeaders, ExportFormat, ExportColumns } from 'dash-table/components/Table/props';
-import { createWorkbook, createHeadings, createWorksheet } from './utils';
+import { createWorkbook, createHeadings, exportWorkbook } from './utils';
 import getHeaderRows from 'dash-table/derived/header/headerRows';
 
 interface IExportButtonProps {
@@ -21,19 +20,16 @@ export default React.memo((props: IExportButtonProps) => {
 
     const exportedColumns = export_columns === ExportColumns.Visible ? visibleColumns : columns;
 
-    const handleExport = () => {
+    const handleExport = async () => {
         const columnID = exportedColumns.map(column => column.id);
         const columnHeaders = exportedColumns.map(column => column.name);
 
         const maxLength = getHeaderRows(columns);
         const heading = (export_headers !== ExportHeaders.None) ? createHeadings(columnHeaders, maxLength) : [];
-        const ws = createWorksheet(heading, virtual_data.data, columnID, export_headers, merge_duplicate_headers);
-        const wb = createWorkbook(ws);
-        if (export_format === ExportFormat.Xlsx) {
-            XLSX.writeFile(wb, 'Data.xlsx', {bookType: 'xlsx', type: 'buffer'});
-        } else if (export_format === ExportFormat.Csv) {
-            XLSX.writeFile(wb, 'Data.csv', {bookType: 'csv', type: 'buffer'});
-        }
+
+        const wb = await createWorkbook(heading, virtual_data.data, columnID, export_headers, merge_duplicate_headers);
+
+        await exportWorkbook(wb, export_format);
     };
 
     return (<div>

src/dash-table/components/Export/utils.tsx

@@ -1,6 +1,8 @@
 import * as R from 'ramda';
-import XLSX from 'xlsx';
+import { WorkBook } from 'xlsx/types';
+
 import { Data, ExportHeaders } from 'dash-table/components/Table/props';
+import LazyLoader from 'dash-table/LazyLoader';
 
 interface IMergeObject {
     s: {r: number, c: number};
@@ -47,13 +49,9 @@ export function getMergeRanges(array: string[][]) {
     return R.filter((item: IMergeObject) => item.s.c !== item.e.c || item.s.r !== item.e.r, apiMergeArray);
 }
 
-export function createWorkbook(ws: XLSX.WorkSheet) {
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');
-    return wb;
-}
+export async function createWorkbook(heading: string[][], data: Data, columnID: string[], exportHeader: string, mergeDuplicateHeaders: boolean ) {
+    const XLSX = await LazyLoader.xlsx;
 
-export function createWorksheet(heading: string[][], data: Data, columnID: string[], exportHeader: ExportHeaders, mergeDuplicateHeaders: boolean) {
     const ws = XLSX.utils.aoa_to_sheet([]);
 
     data = R.map(R.pick(columnID))(data);
@@ -73,7 +71,20 @@ export function createWorksheet(heading: string[][], data: Data, columnID: strin
     } else if (exportHeader === ExportHeaders.Ids) {
         XLSX.utils.sheet_add_json(ws, data, { header: columnID });
     }
-    return ws;
+
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'SheetJS');
+    return wb;
+}
+
+export async function exportWorkbook (wb: WorkBook, format: string) {
+    const XLSX = await LazyLoader.xlsx;
+
+    if (format === 'xlsx') {
+        XLSX.writeFile(wb, 'Data.xlsx', { bookType: 'xlsx', type: 'buffer' });
+    } else if (format === 'csv') {
+        XLSX.writeFile(wb, 'Data.csv', { bookType: 'csv', type: 'buffer' });
+    }
 }
 
 export function createHeadings(columnHeaders: (string | string[])[], maxLength: number) {

src/dash-table/dash/DataTable.js

@@ -1307,4 +1307,4 @@ DataTable.persistenceTransforms = {
 };
 
 DataTable.defaultProps = defaultProps;
-DataTable.propTypes = propTypes;
+DataTable.propTypes = propTypes;

tests/cypress/plugins/index.js

@@ -2,7 +2,7 @@ const wp = require('@cypress/webpack-preprocessor');
 
 module.exports = on => {
     const options = {
-        webpackOptions: require('../../../webpack.test.config.js')
+        webpackOptions: require('../../../webpack.test.standalone.config.js')
     };
 
     on('file:preprocessor', wp(options));

tests/cypress/tests/unit/exportUtils_tests.ts

@@ -1,7 +1,8 @@
-import { transformMultiDimArray, getMergeRanges, createHeadings, createWorksheet } from 'dash-table/components/Export/utils';
 import * as R from 'ramda';
 import { ExportHeaders } from 'dash-table/components/Table/props';
 
+import { transformMultiDimArray, getMergeRanges, createHeadings, createWorkbook } from 'dash-table/components/Export/utils';
+
 describe('export', () => {
 
     describe('transformMultiDimArray', () => {
@@ -225,10 +226,10 @@ describe('export', () => {
         ];
 
         const columnID = ['col1', 'col2', 'col4'];
-        it('create sheet with column names as headers for name or display header mode', () => {
-            const wsName = createWorksheet(Headings, data, columnID, ExportHeaders.Names, true);
-            const wsDisplay = createWorksheet(Headings, data, columnID, ExportHeaders.Display, true);
-            const wsDisplayNoMerge = createWorksheet(Headings, data, columnID, ExportHeaders.Display, false);
+        it('create sheet with column names as headers for name or display header mode', async () => {
+            const wsName = await createWorkbook(Headings, data, columnID, ExportHeaders.Names, true);
+            const wsDisplay = await createWorkbook(Headings, data, columnID, ExportHeaders.Display, true);
+            const wsDisplayNoMerge = await createWorkbook(Headings, data, columnID, ExportHeaders.Display, false);
             const expectedWS = {
                 A1: {t: 's', v: 'rows'},
                 A2: {t: 's', v: 'rows'},
@@ -256,12 +257,12 @@ describe('export', () => {
             expectedWSDisplay['!merges'] = [ {s: {r: 0, c: 0}, e: {r: 0, c: 1}},
                 {s: {r: 1, c: 1}, e: {r: 1, c: 2}},
                 {s: {r: 3, c: 0}, e: {r: 3, c: 2}} ];
-            expect(wsName).to.deep.equal(expectedWS);
-            expect(wsDisplayNoMerge).to.deep.equal(expectedWS);
-            expect(wsDisplay).to.deep.equal(expectedWSDisplay);
+            expect(wsName.Sheets.SheetJS).to.deep.equal(expectedWS);
+            expect(wsDisplayNoMerge.Sheets.SheetJS).to.deep.equal(expectedWS);
+            expect(wsDisplay.Sheets.SheetJS).to.deep.equal(expectedWSDisplay);
         });
-        it('create sheet with column ids as headers', () => {
-            const ws = createWorksheet(Headings, data, columnID, ExportHeaders.Ids, true);
+        it('create sheet with column ids as headers', async () => {
+            const ws = await createWorkbook(Headings, data, columnID, ExportHeaders.Ids, true);
             const expectedWS = {
                 A1: {t: 's', v: 'col1'},
                 A2: {t: 'n', v: 1},
@@ -276,10 +277,10 @@ describe('export', () => {
                 C3: {t: 'n', v: 4},
                 C4: {t: 'n', v: 3}};
             expectedWS['!ref'] = 'A1:C4';
-            expect(ws).to.deep.equal(expectedWS);
+            expect(ws.Sheets.SheetJS).to.deep.equal(expectedWS);
         });
-        it('create sheet with no headers', () => {
-            const ws = createWorksheet([], data, columnID, ExportHeaders.None, true);
+        it('create sheet with no headers', async () => {
+            const ws = await createWorkbook([], data, columnID, ExportHeaders.None, true);
             const expectedWS = {
                 A1: {t: 'n', v: 1},
                 A2: {t: 'n', v: 2},
@@ -291,15 +292,15 @@ describe('export', () => {
                 C2: {t: 'n', v: 4},
                 C3: {t: 'n', v: 3}};
             expectedWS['!ref'] = 'A1:C3';
-            expect(ws).to.deep.equal(expectedWS);
+            expect(ws.Sheets.SheetJS).to.deep.equal(expectedWS);
         });
-        it('create sheet with undefined column for clearable columns', () => {
+        it('create sheet with undefined column for clearable columns', async () => {
             const newData = [
                 {col2: 2, col4: 3},
                 {col2: 3, col4: 4},
                 {col2: 2, col4: 3}
             ];
-            const ws = createWorksheet(Headings, newData, columnID, ExportHeaders.Display, false);
+            const ws = await createWorkbook(Headings, newData, columnID, ExportHeaders.Display, false);
             const expectedWS = {A1: {t: 's', v: 'rows'},
                     A2: {t: 's', v: 'rows'},
                     A3: {t: 's', v: 'rows'},
@@ -319,7 +320,7 @@ describe('export', () => {
                     C6: {t: 'n', v: 4},
                     C7: {t: 'n', v: 3}};
             expectedWS['!ref'] = 'A1:C7';
-            expect(ws).to.deep.equal(expectedWS);
+            expect(ws.Sheets.SheetJS).to.deep.equal(expectedWS);
         });
     });
 

tests/visual/percy-storybook/Border.defaults.percy.tsx

@@ -93,7 +93,7 @@ storiesOf('DashTable/Border (available space filled)', module)
         fixed_rows={{ headers: true }}
     />))
     .add('with no frozen rows and frozen columns', () => (<DataTable
-        {...props2}DataTable
+        {...props2} DataTable
         fixed_columns={{ headers: true, data: 1 }}
     />))
     .add('with frozen rows and frozen columns', () => (<DataTable