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 git@github.com:plotly/dash.git dash-main
+ git clone --depth 1 -b exp-dynamic git@github.com: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 git@github.com:plotly/dash.git dash-main
+ git clone --depth 1 -b exp-dynamic git@github.com: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 git@github.com:plotly/dash.git dash-main
+ git clone --depth 1 -b exp-dynamic git@github.com: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